Bootstrap——全域性CSS樣式
阿新 • • 發佈:2018-11-16
1、.container
為頁面內容和柵格系統包裹.container容器,響應式,大屏固定寬度且居中,小屏百分百自適應。
2、.row . col-*-*
Bootstrap中定義了一套響應式的網格系統,將一個容器劃分成12列,然後通過col-*-*的類名控制每一列的佔比(每列寬度通過百分比實現)。
每一個列預設有一個15px的左右外邊距,row類的一個作用是通過左右-15px遮蔽掉這個邊距。
col-xs-[列數] 、col-sm-[列數] 、col-md-[列數]、 col-lg-[列數]分別指在超小螢幕(<768px)、小螢幕(≥768px)、中等螢幕(≥992px)、大螢幕(≥1200px)佔幾份。
可以給一個div新增多個col-*-*,使不同螢幕下佔不同份數。不寫col-xs-12時雖然預設佔12列,但是沒有padding等樣式。
<div class="container"> <div class="row"> <div class="col-md-2 text-center"></div> <div class="col-md-5"></div> <div class="col-md-2"></div> <div class="col-md-3"></div> </div> </div>
text-center的作用是讓內部內容居中顯示。
3、.btn
為<a>、<button>或<input>元素新增按鈕類即可使用Bootstrap提供的樣式,有預定義樣式和不同尺寸的按鈕。
http://blog.koalite.com/bbg/可以輸入顏色得到自定義的按鈕,也可以直接複製原始碼(如下)修改。
.btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; } .btn-info:focus, .btn-info.focus { color: #fff; background-color: #31b0d5; border-color: #1b6d85; } .btn-info:hover { color: #fff; background-color: #31b0d5; border-color: #269abc; } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: #fff; background-color: #31b0d5; border-color: #269abc; } .btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus, .btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus { color: #fff; background-color: #269abc; border-color: #1b6d85; } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-image: none; } .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus { background-color: #5bc0de; border-color: #46b8da; } .btn-info .badge { color: #5bc0de; background-color: #fff; }
4、.hidden-*、.visible-*-*
hidden-*:在某種螢幕尺寸下隱藏;
visible-*-*:在某種螢幕尺寸下顯示,第二個*代表display為block、inline或inline-block。
<div class="topbar hidden-xs hidden-sm"></div>
<div class="topbar visible-md-block visible-lg-block"></div>