bootstrap switch樣式修改與多列等間距佈局

先以一張圖開啓今天的隨筆

 

 

今天實習遇到了switch按鈕，小姐姐說用插件bootstrap switch來寫，我第一次用這個插件，首先在引入方面就遇到了不少坑，先來總結一下bootstrap switch的用法。

官網地址 http://www.bootcss.com/p/bootstrap-switch/

首先在bootstrap框架環境下引入bootstrap-switch.min.css和bootstrap-switch.min.js，或者bootstrap-switch.css和bootstrap-switch.js，須要注意的是支撐包中的css有針對bootstrap2和bootstrap3的，放在兩個文件夾中，rel="stylesheet"記得加上，我就給傻逼的忘了，被本身坑了很久...

而後添加html

<div class="device-switch switch">

<input type="checkbox" checked/>

</div>

再初始化

$('.device-switch input').bootstrapSwitch({

onColor: "success",//項目須要，用了綠色

offColor: "default"

}).bootstrapSwitch('state', true);//按鈕默認打開

有一些屬性能夠在html裏指定，也能夠在js中初始化，可是我設置大小屬性的時候都沒有效果，目前尚未找到緣由，由於後面要改樣式，就暫時沒有深究。

 

而後我花了一個上午修改bootstrap switch的樣式，沒有什麼捷徑，就是用谷歌的開發者工具查看元素樣式，一點一點嘗試。

放上買家秀和賣家秀對比

修改前：

 

 

修改後：

 

這個買家秀還不錯吧，嘻嘻

switch的簡化結構大概是這樣的

 

 

如今是開的狀態，點擊關閉後是這樣

 

 

關閉的時候裏面的塊會左滑，顯示off部分，因此我主要將邊框改爲圓角，並運用margin的負值將白色、灰色塊左移，以填補圓角產生的背景空缺

至於裏面的塊具體移動多少，目前尚未明白它的計算機制，修改後的長度如今是可行的。

上代碼：

.switch{display:inline-block;}

.bootstrap-switch{border-radius:22px;    

width: 52px !important;height: 22px !important;

    }   

.bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-label

{

padding:0px;

    font-size: 12px;

    display: inline-block;

}

.bootstrap-switch .bootstrap-switch-label

{

width:42px !important;

height: 22px;

border-radius:11px !important;

position:relative;

}

.bootstrap-switch .bootstrap-switch-handle-on{

width: 52px !important;

    margin-right: -22px;

    padding-right: 22px;

    }

.bootstrap-switch .bootstrap-switch-handle-off{

width: 52px !important;

    border-radius: 11px;

    margin-left: -11px;

    padding-right: 2px;

    position:relative;

    color:#fff !important;

}

須要注意的是z-index在某些狀況下會失效：

1、父標籤 position屬性爲relative；

2、問題標籤無position屬性（不包括static）；

3、問題標籤含有浮動(float)屬性。

  代碼中忽然出現的position:relative就是爲了解決這個問題

 

關於多列等間距均勻佈局（最左邊和最右邊不留間隔），對這個疑惑已久，

三列均勻佈局：

 

 

因爲項目用了bootstrap,直接用了它的柵格佈局，並修改了padding值，給左邊的塊margin-left取負值，具體數值根據padding值決定，右邊則讓margin-right取負值，修改後如上圖下半部分的效果，最左邊和最右邊的間隔沒有了。

可是這種方法還不是很好，左邊和右邊的可視區域寬度都改變了，這些多列布局還有不少疑惑，等研究清楚了再更新。

flex佈局能夠作到平均分配空間，可是間隔仍是沒搞定，留下沒有技術的淚。

剛剛發現bootstrap已經解決了這個問題，row配合col-*-*就能夠了