【BootStrap】 基础

【BootStrap】 基础

一. 自适应（针对不同设备如手机平板笔电，使页面的宽度适应设备宽度）

　　<meta name="viewport" content="width=device-width, initial-scale=1">

二. 布局

　　1. 容器 .container

　　2. 栅格 .row - 最主要的布局样式 （注意 row 是百分比宽度，这个用起来不是很方便的）

　　　　a. 一行最多包含12个单元格，超出12个会再起一行

　　　　b. 单元格样式

.col-xs-（手机），
.col-sm-
（平板），[code].col-md-

（笔电），

.col-lg-

（大屏桌面）[/code]

　　　　c. 为了让一个页面在不同设备上显示良好，可以把手机，平板，笔电等样式都添加上，栅格会自行调整布局

三. 实用标签

　　1. small - 小号文字（可用作副标题）

　　2. mark - 高亮

　　3. del/s - 文字上加划线

　　4. ins/u - 下划线

　　5. strong - 加粗

　　6. em - 斜体

　　7. abbr - 帮助信息

　　8. cite - tips

四. 实用样式

　　1. 字体样式

　　　　a. 对齐方式： text-left ，text-center，text-right，text-justify

　　　　b. text-nowrap - 不换行

　　　　c. 大小写 ： text-lowercase ， text-uppercase ， text-capitalize

　　2. 列表样式

　　　　a. list-unstyled - 无样式

　　　　b. list-inline - 水平列表

　　3. 表格样式

　　　　a. table - 每行带分割线

　　　　b. table-striped - 隔行变色

　　　　c. table-bordered - 带边框

　　　　d. table-hover - 悬浮效果

　　　　e. table-condensed - 使表格变得紧凑

　　　　f. active , success , info , warning , danger- tr 的样式

　　　　g. table-responsive - 将表格置于该容器内，表格将实现自适应