Bootstrap學習筆記

學習一套CSS框架

Bootstrap將全局font-size設置為14px,line-height設置為1.428。
這些屬性直接賦予<body>元素和所有段落元素。
另外<p>元素還被設置了等於1/2行高(即10px)的地步外邊距(margin)。

佈局容器

.container (固定寬度)用於固定寬度並支持響應式佈局的容器。

.container-fluid(100%寬度)佔據全部視口(viewport)的容器

柵格系統

通過行(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)

一個例子:bootstrap

表格

表格的內容通常是一次性加載的,所以如果很長的話,會加載一段時間,而使用了tbody標籤時,就會分段加載了。

狀態類

bootstrap狀態類

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

 滑鼠懸停

使用.table-hover達到用戶滑鼠經過時會有高亮效果。

滑鼠懸停

 

 表單

使用.form-group。所有設置了.form-control類的<input>、<textarea>、<select>元素都將被默認設置寬度屬性為width:100%。將label元素和前面提到的空間包裹在.form-group中可以獲得最好的排列。

表單

 內聯表單

為<form>元素添加.form-inline類可以讓其中的內容做對其並且表現為inline-block級別的控件。只適用於視口(viewport)至少在768px寬度時(視口寬度再小的話就會使表單折疊)。

表單inline-block

 按鈕

按鈕

使用 .btn-lg.btn-sm 或 .btn-xs 就可以選用不同大小的按鈕

不同大小的按鈕

給按鈕添加.btn-block類,可以將其拉伸至父元素100%的寬度,而且按鈕也變成了block元素

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *