【BootStrap】 基础
一. 自适应(针对不同设备如手机平板笔电,使页面的宽度适应设备宽度)
<meta name="viewport" content="width=device-width, initial-scale=1">
二. 布局
1. 容器 .container
2. 栅格 .row - 最主要的布局样式 (注意 row 是百分比宽度,这个用起来不是很方便的)
a. 一行最多包含12个单元格,超出12个会再起一行
b. 单元格样式 .col-xs-(手机),
.col-sm-
(平板),.col-md-
(笔电),.col-lg-
(大屏桌面)
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 - 将表格置于该容器内,表格将实现自适应