by 學習一套CSS框架
Bootstrap將全局font-size設置為14px，line-height設置為1.428。
這些屬性直接賦予<body>元素和所有段落元素。
另外<p>元素還被設置了等於1/2行高(即10px)的地步外邊距(margin)。
佈局容器
.container (固定寬度)用於固定寬度並支持響應式佈局的容器。
|
1 2 3 |
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> ... <span class="nt"></div></span> |
.container-fluid(100%寬度)佔據全部視口(viewport)的容器。
|
1 2 3 |
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span> ... <span class="nt"></div></span> |
柵格系統
通過行(Row)和列(Column)的組合來完成佈局。
行(Row)需要放在.container或者.container-fluid下，為了分配合適的排列(alignment)和內補(padding)。
柵格系統中的列是用1～12的數字來制定跨度，超過12以後會另外分配一行。
柵格參數
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
一個例子：
表格
表格的內容通常是一次性加載的，所以如果很長的話，會加載一段時間，而使用了tbody標籤時，就會分段加載了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <thead> <tr> <th>#</th> <th>head</th> </tr> <tbody> <tr> <td>body</td> </tr> </tbody> </thead> </table> |
狀態類
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
滑鼠懸停
使用.table-hover達到用戶滑鼠經過時會有高亮效果。
|
1 2 3 |
<table class="table table-hover"> ... </table> |
表單
使用.form-group。所有設置了.form-control類的<input>、<textarea>、<select>元素都將被默認設置寬度屬性為width:100%。將label元素和前面提到的空間包裹在.form-group中可以獲得最好的排列。
|
1 2 3 4 5 6 |
<div class="container bs-docs-container"> <div class="form-group"> <label>Name:</label> <input type="text" class="form-control" placehold="please type your name"> </div> </div> |
內聯表單
為<form>元素添加.form-inline類可以讓其中的內容做對其並且表現為inline-block級別的控件。只適用於視口(viewport)至少在768px寬度時(視口寬度再小的話就會使表單折疊)。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <form class="form-inline"> <div class="form-group"> <label>Name:</label> <input type="text"> <label>Age:</label> <input type="text"> </div> </form> </div> |
按鈕
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <div class="row"> <div class="col-md-9"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <div> </div> </div> |
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以選用不同大小的按鈕
|
1 2 3 4 5 6 7 8 9 |
<div class="container"> <div class="row"> <div class="col-md-9"> <button type="button" class="btn btn-default btn-lg">我是一個大按鈕</button> <button type="button" class="btn btn-primary btn-md">一般大小的</button> <button type="button" class="btn btn-success btn-xs">小小的按鈕</button> <div> </div> </div> |
給按鈕添加.btn-block類，可以將其拉伸至父元素100%的寬度，而且按鈕也變成了block元素
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。