bootstrap入門基礎
阿新 • • 發佈：2017-07-08
smi 水平 元素 name 防止 大小 pla table 目標
1.字體
text-left text-center text-right text-lowercase 小寫 text-uppercase 大寫 text-capitalize 首字母大寫
2.表格
.table .table-bordered .table-striped .table-hover .table-condensed
3.顏色
denger 紅色 waring info success active
4.表格
form-control form-group div裏面組件 form-inline 水平排版
5.輸入
placeholder 提示 input-lg 更大 input-sm 更小 sr-only 取消提示 control-label has-success
.input-group 控件組 .input-group-addon 防止額外內容圖標
6.按鈕
btn btn-default btn-success btn-primary btn-info btn-warning btn-danger btn-link active 按下狀態(選中狀態) btn-block 全屏狀態（和父元素一樣大） disabled <a class="btn btn-danger" href="">a標簽也可以變成按鈕</a>
7.圖片
img-rounded 圓角 img-circle 圓形 img-thumbnail 帶邊框的圓角
8.不同瀏覽器支持
meta name=viewport width height user-scalable initial-scale=1(代表1倍) maximum-scale minimun-scale
.test{
}
@media (only 只為屏幕發生改變) screen and（鏈接） (max-width:900px) and(min-width:500px){
.test{
}
}
9.柵格
柵格分成12等份 col-lg-3 col-md-4 col-sm-6 col-xs-12占超大屏列（寬度）的1/4 中等屏的1/3 小屏的1/2 手機端全屏顯示（寬度） col-lg-offset-3超大屏幕的時候偏移1/4
10.單位
單位
px 屏幕分辨率的長度單位
em 字體尺寸（會繼承父元素的字體大小 IE不支持）
rem:
與em類似，相對於HTML根節點的字體單位,HTML默認字體大小16px
1. rem會繼承根元素字體大小
2.1rem = 10px = html{font-size:62.5%}
3.幾乎所有瀏覽器都支持了
11.圖標(字體圖標)
復制圖標庫(http://getbootstrap.com/components/ 也可用國產的)中的圖標class="glyphicon glyphicon-asterisk"
可以添加樣式.glyphicon-asterisk{color:green;font-size:100px}
12.下拉菜單
下拉菜單 .dropdown 控制組件為下拉 dropdown-toggle下拉菜單 data-toggle指以什麽事件觸發，常用的如modal,popover,tooltips等，data-target指事件的目標，一起使用就是代表data-target所指的元素以data-toggle指定的形式顯示 data-dismiss 關閉某個元素 .dropdown-menu-right 代替.pull-right右對齊 divider 分割線 <span class="caret"></span>下拉框的下標
13.導航欄
.nav .nav-tabs 可切換的導航 .nav-pills 膠囊導航 .nav-justifiled 導航垂直
14.分頁
分頁 .pagination 父元素中添加分頁 pagination-lg 變大 pagination-sm 變小 .pager 翻頁區域 .previous 鏈接左對齊 .next 鏈接右對齊
15.進度條
進度條 .progress .progress-bar .progress-bar-success 顏色 .progress-bar-striped 進度條顏色漸變（花紋）
16.列表
列表 list-group list-group-item 列表項 active disabled badge 提示未讀消息的下標 list-group-item-info 顏色
17.面板
面板 .panel .panel-default .panel-primary 藍色。。。。 .panel-heading 面板頭部（面板是幹什麽的） .panel-body 面板內容 .panel-footer 面板註腳
18.插件
插件 data 控制頁面交互 $(document).off(‘.data-api‘)解除屬性綁定 modal 模態框是覆蓋在父窗體上的子窗體 modal-dialog modal-content modal-header modal-body modal-footer
bootstrap入門基礎