bootstrap基础归纳(1)
例子
(1)栅格系统
1、列偏移
.col-xs/sm/md/lg-offset-*,*为数字,表示向右偏移的列数(以最左边列为基础),不能大于12。偏移和显示列综合不能超过12,如果超过则换到下一行。
2、列排序
.col-x-push-* 向右浮动
.col-x-pull-* 向左浮动
3、支持嵌套
一个列里可以再声明一个或多个行,内部嵌套row宽为100%。
4、清除浮动
(2)css布局
1、标题
< h1>-< h6>标签 大到小font-size属性
.h1-.h6样式 给文本赋予不同级别标题的样式
< small > / .small 获得一个字号更小、颜色更浅的文本(小标题)
2、段落
基本段落< body> < p> = font-size 14px line-height 1.428
中心段落 .lead 更大更粗行高更高的段落文本
< mark> 高亮文本
< del > / < s > 删除线文本
< ins > / < u >下划线
< strong > / < em > 加粗
< b > / < i > 高亮
文本对齐方式
.text-left 、.text-center 、 .text-right、 text-justify(两端对齐)、 text-nowrap(不换行)
字母大小写
.text-lowercase 大写字母转为小写
.text-uppercase 小写字母转为大写
.text-capitalize 文本收字母转为大写
引用
3、列表
无序列表 < ul >< li >
有序列表< ol >< li >
无样式列表 给< ol >< ul >应用.list-unstyled 移除默认的list-style的样式(列表项目符号和左侧外边距)
内联列表 给< ol >< ul >应用.list-inline 可将列表所有元素放置于同一行
描述列表
4、基本表格
给< table > .table样式可以获得这样一个样式
< tbale > .table-bordered 增加边框
< table > .table-hover 让表格中< tbody >元素内的每一行对鼠标悬停状态作出响应。
< table > .table-condensed 让表格更加紧凑,padding内边距减半。
.active 悬停颜色
.success 绿色
.info 蓝色
.warning 黄山
.danger 红色
< table > 应用.table-responsive 当小于768px时出现滚动条
5、按钮
基本样式 < button >元素应用.btn
按钮尺寸 < button >元素应用.btn-lg/.btn-sm/.btn-xs
块级按钮 < button >元素应用.btn-block 将按钮拉伸至其父元素100%的宽度 同时按钮变成块级元素
按钮激活状态
< button >元素应用.active
按钮禁用状态
6、响应式图形
图片支持响应式布局 < img >元素应用.img-responsive
7、辅助类
情景文本颜色
情景文本背景色
关闭按钮 < button >元素应用.close
三角符号 < span >元素应用.caret
快速浮动
块级居中 .center-block让元素以块级的方式居中
清除浮动 .clearfix
显示或隐藏 任意元素应用.show / .hidden / .invisible
(3)表单
1、基础(垂直)表单
< label> 当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上
“for” 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值。
class=“form-group” 表单间距
class=“form-control” 表单样式
向父 < form> 元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的 < div> 中。这是获取最佳间距所必需的。
向所有的文本元素 < input>、< textarea> 和 < select> 添加 class =“form-control” 。
行内表单(内联)class=“form-inline”
水平表单
向父 < form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 < div> 中。
向标签添加 class .control-label。
下拉框
复选框( checkbox)单选框(radio)
2、表单焦点
图标提示
输入框组
输入框