您好,登錄后才能下訂單哦!
bootstrap前端開發(fā)工具
柵格系統(tǒng)
版心 .container
柵格布局 (一行分為12格,響應(yīng)式布局)
.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;
塊標(biāo)簽對齊:
.center-block;
.pull-left;
.pull-right;
排版樣式:
h2 .page-header
small
p .lead
<h2 class="page-header">你好,世界!<small>你好,世界!</small></h2> <p>百度網(wǎng)盤為您提供文件的網(wǎng)絡(luò)備份、同步和分享服務(wù)。空間大、速度快、安全穩(wěn)固,支持教育網(wǎng)加速,支持手機(jī)端?,F(xiàn)在注冊即有機(jī)會享受15G的免費(fèi)存儲空間</p> <p class="lead">百度網(wǎng)盤為您提供文件的網(wǎng)絡(luò)備份、同步和分享服務(wù)??臻g大、速度快、安全穩(wěn)固,支持教育網(wǎng)加速,支持手機(jī)端?,F(xiàn)在注冊即有機(jī)會享受15G的免費(fèi)存儲空間</p>
文字顏色(帶有樣式滑動效果)
.text-muted 灰色
.text-primary 淺藍(lán)色
.text-success 綠色
.text-info 深藍(lán)色
.text-warning 棕色
.text-danger 紅色
列表
.list-style 無樣式列表
.list-inline 列表浮動到一行
描述
<dl> <dt>時(shí)間和教案課件課件啊</dt> <dd>愛十分慢慢你就開始去喝酒后即可漢口幾個(gè)號北京奧股份</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
按鈕的活動狀態(tài)
.active
按鈕的禁用狀態(tài)
.disabled
圖片
img圖片
.img-rounded
.img-circle
.img-thumbnail
img響應(yīng)式圖片
.img-responsive
關(guān)閉叉號
.close (×)
向下的小箭頭
.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常用類總結(jié)(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。