bootstrap排版和表格

在菜鸟教程里面看的
如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 ,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本,
为了给段落添加强调文本,则可以添加 class=“lead”,这将得到更大更粗、行高更高的文本。
本行内容是在标签内

本行内容是在标签内

本行内容是在标签内,并呈现为斜体

向左对齐文本

居中对齐文本

向右对齐文本

本行内容是减弱的

本行内容带有一个 primary class

本行内容带有一个 success class

本行内容带有一个 info class

本行内容带有一个 warning class

本行内容带有一个 danger class

这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。

这是一个带有源标题的引用。 Someone famous in Source Title
这是一个向右对齐的引用。 Someone famous in Source Title

有序列表

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

无序列表

  • Item 1
  • Item 2
  • Item 3
  • Item 4

未定义样式列表

  • Item 1
  • Item 2
  • Item 3
  • Item 4

内联列表

  • Item 1
  • Item 2
  • Item 3
  • Item 4

定义列表

Description 1
Item 1
Description 2
Item 2

水平的定义列表

Description 1
Item 1
Description 2
Item 2
描述 实例
.lead 使段落突出显示 尝试一下
.small 设定小文本 (设置为父文本的 85% 大小) 尝试一下
.text-left 设定文本左对齐 尝试一下
.text-center 设定文本居中对齐 尝试一下
.text-right 设定文本右对齐 尝试一下
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 尝试一下
.text-nowrap 段落中超出屏幕部分不换行 尝试一下
.text-lowercase 设定文本小写 尝试一下
.text-uppercase 设定文本大写 尝试一下
.text-capitalize 设定单词首字母大写 尝试一下
.initialism 显示在 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 尝试一下
.blockquote-reverse 设定引用右对齐 尝试一下
.list-unstyled 移除默认的列表样式,列表项中左对齐 (
      中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
尝试一下
.list-inline 将所有列表项放置同一行 尝试一下
.dl-horizontal 该类设置了浮动和偏移,应用于
元素和
元素中,具体实现可以查看实例
尝试一下
.pre-scrollable 使
 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
尝试一下

.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)

内的行上看到条纹

边框表格

通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,

悬停表格

通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,

精简表格

通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑

描述 实例
.table 为任意 添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态
尝试一下
.table-striped
尝试一下
.table-bordered 为所有表格的单元格添加边框 尝试一下
.table-hover
尝试一下
.table-condensed 让表格更加紧凑 尝试一下
联合使用所有表格类 尝试一下
描述 实例
.active 将悬停的颜色应用在行或者单元格上 尝试一下
.success 表示成功的操作 尝试一下
.info 表示信息变化的操作 尝试一下
.warning 表示一个警告的操作 尝试一下
.danger 表示一个危险的操作 尝试一下

条纹表格

通过添加 .table-striped class,您将在

描述
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作

响应式表格

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

垂直或基本表单

基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

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