bootstrap筆記

1

Bootstrap是移動設備優先的。

通過添加.img-responsive class可以讓Bootstrap 3中的圖片對響應式佈局的支持更友好。

使用.col-md-offset-*可以將列偏移到右側。

2.

bootstrap常用柵欄格式寫法:

<div class="row">

         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >

         </div>

</div>

3.

Bootstrap將全局font-size設置爲14pxline-height1.428。這些屬性直接賦給<body>和所有段落元素。

4.

將任何.table包裹在.table-responsive中即可創建響應式表格,其會在小屏幕設備上(小於768px)水平滾動。當屏幕大於768px寬度時,水平滾動條消失。5

5.

單獨的表單控件會被自動賦予一些全局樣式。所有設置了.form-control<input><textarea><select>元素都將被默認設置爲width: 100%;。將label和前面提到的這些控件包裹在.form-group中可以獲得最好的排列。

6.

爲左對齊和inline-block級別的控件設置.form-inline,可以將其排布的更緊湊。

7.

通過爲表單添加.form-horizontal,並使用Bootstrap預置的柵格class可以將label和控件組水平並排佈局。這樣做將改變.form-group的行爲,使其表現爲柵格系統中的行(row),因此就無需再使用.row了。

8.

通過將.checkbox-inline  .radio-inline應用到一系列的checkboxradio控件上,可以使這些控件排列在一行。

9.

添加.has-warning.has-error.has-success到這些控件的父元素即可。任何包含在此元素之內的.control-label.form-control.help-block都將接受這些校驗狀態的樣式。

10.

<button type="button" class="btn btn-link">Link</button類似於a的鏈接

<div class="center-block">...</div內容區域居中

如果是用於對齊導航條上的組件,請務必使用.navbar-left  .navbar-right

<button type="button" class="close" aria-hidden="true">×</button>

關閉按鈕

<div class="jumbotron">大屏幕介紹



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章