基于bootstrop常用類總結(推薦)

bootstrap前端開發工具

柵格系統

版心 .container

柵格布局 (一行分為12格，響應式布局)

.row
.col-md-12
.col-sm-12
.col-xs-12

<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>

排版

文本對齊:

.text-center;
.text-left;
.text-right;

塊標簽對齊:

.center-block;
.pull-left;
.pull-right;

排版樣式：

h2 .page-header
small
p .lead

 <h2 class="page-header">你好，世界！<small>你好，世界！</small></h2>
 <p>百度網盤為您提供文件的網絡備份、同步和分享服務。空間大、速度快、安全穩固,支持教育網加速,支持手機端。現在注冊即有機會享受15G的免費存儲空間</p>
 <p class="lead">百度網盤為您提供文件的網絡備份、同步和分享服務。空間大、速度快、安全穩固,支持教育網加速,支持手機端。現在注冊即有機會享受15G的免費存儲空間</p>

文字顏色(帶有樣式滑動效果)

.text-muted 灰色
.text-primary 淺藍色
.text-success 綠色
.text-info 深藍色
.text-warning 棕色
.text-danger 紅色

列表

.list-style 無樣式列表
.list-inline 列表浮動到一行

描述

<dl>
 <dt>時間和教案課件課件啊</dt>
 <dd>愛十分慢慢你就開始去喝酒后即可漢口幾個號北京奧股份</dd>
</dl>

.dl-horizontal 水平排列的描述

表格

表格樣式

.table
.table-hover
.table-bordered
.table-striped

表格的顏色

tr.active 灰色
tr.danger 紅色
tr.warning 淺黃色
tr.success 綠色

表單

表單樣式

div.from-grop

<div class="form-group">
 <label for="nameid">name</label>
 <input class="form-control input-lg" id="nameid" type="text" placeholder="name">
</div>

表單元素

input.form-control
input.input-lg

表單顏色

div.has-success
div.has-error
div.has-warning

多選框或單選框

<div class="checkbox">
 <label>
 <input type="checkbox" name="" value="">check me out
 </label>
</div>
<div class="radio">
 <label>
 <input type="radio" name="" value="">check me out
 </label>
</div>

水平多選框

<div class="checkbox-inline">
 <label>
 <input type="checkbox" name="" value="">check me out
 </label>
</div>

顯示和隱藏

.show
.hidden
.sr-only

表單尺寸

.inuut-lg
.input-sm

按鈕

button
input type="submit"
input type=button
input type=reset
a

七種樣式

.btn btn-default
.btn btn-primary
.btn btn-success
.btn btn-info
.btn btn-warning
.btn btn-danger
.btn btn-link

按鈕尺寸

.btn-lg
.btn-sm
.btn-xs

按鈕變成塊元素

.btn-block

按鈕的活動狀態

.active

按鈕的禁用狀態

.disabled

圖片

img圖片

.img-rounded
.img-circle
.img-thumbnail

img響應式圖片

.img-responsive

關閉叉號

.close (&times)

向下的小箭頭

.caset

組件

下拉菜單

div.dropdown
button[data-toggle=dropdown]
ul.dropdown-menu
li.dropdown-header
li.disabled
li.divider

按鈕組

div.btn-group

按鈕工具欄

div.btn-toolbar

按鈕尺寸

div.btn-group-lg

垂直排列

div.btn-group-vertical

按鈕組中的下拉菜單

div.btn-group
button
button
div.btn-group

以上這篇基于bootstrop常用類總結(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。