Bootstrap基础学习笔记（仅个人学习使用）

网格系统

偏移列

col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

列排序

定位问题 .col-md-push-* 和 .col-md-pull-*

• *范围是从 1 到 11
• push 是推过去 ， pull是拉回来 ，如果以左右为列的话 ， 从左到右用push 从右往左用pull。

排版类

• class="lead"，这将得到更大更粗、行高更高的文本
• class="text-left"向左对齐文本
• class="text-center"居中对齐文本
• class="text-right"向右对齐文本
• class="text-muted"本行内容是减弱的
• class="text-primary"本行内容带有一个 primary class颜色改变
• class="text-success"本行内容带有一个 success class颜色改变
• class="text-info"本行内容带有一个 info class颜色改变
• class="text-warning"本行内容带有一个 warning class颜色改变
• class="text-danger"本行内容带有一个 danger class颜色改变
• class="initialism" 显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
• <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 。
• .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
• .text-nowrap 段落中超出屏幕部分不换行
• .text-lowercase 设定文本小写
• .text-uppercase 设定文本大写
• .text-capitalize 设定单词首字母大写
• .list-unstyled 移除默认的列表样式，列表项中左对齐 <ul> 和 <ol> 中 这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
• .list-inline 将所有列表项放置同一行

代码

Bootstrap 允许您以两种方式显示代码：

• 第一种是 <code>标签。如果您想要内联显示代码，那么您应该使用<code>标签。
• 第二种是 <pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre>标签。
• .pre-scrollable使 <pre></pre>内元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

表格

• <table> 为表格添加基础样式,定义表格区块 标签内为表格区域即表格容器
• <thead> 表格标题行的容器元素,用来标识表格列。第一行标题行容器
• <th> 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
• <tbody> 表格主体中的表格行的容器元素。内容区域容器
• <tr> 一组出现在单行上的表格单元格的容器元素. 表格一行容器。
• <td> 默认的表格单元格。行内快容器 存放一格内容
• <caption> 关于表格存储内容的描述或总结。显示在表格前部

表格类(只能在table标签上使用的类)

• .table 为任意 <table> 添加基本样式 (只有横向分隔线)
• .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
• .table-bordered 为所有表格的单元格添加边框
• .table-hover 在<tbody> 内的任一行启用鼠标悬停状态
• .table-condensed 让表格更加紧凑

<tr>, <th> 和 <td> 类(只能在此上使用)

• .active 将悬停的颜色应用在行或者单元格上，颜色默认为灰色
• .success 表示成功的操作
• .info 表示信息变化的操作
• .warning 表示一个警告的操作
• .danger 表示一个危险的操作

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。 例子

表单

Bootstrap 提供了下列类型的表单布局：垂直表单（默认）内联表单 水平表单。

创建基本表单的步骤：

• 向父<form>元素添加 role="form"。
• 把标签和控件放在一个带有 class .form-group 的<div> 中。这是获取最佳间距所必需的。
• 向所有的文本元素 <input>、<textarea>和<select>添加 class ="form-control"

转载于:https://juejin.im/post/5b1e2e8651882513ea5cbfa7