bootstrap笔记之——代码，表格

一、代码

　　在Bootstrap主要提供了三种代码风格：
　　　　1、使用<code></code>来显示单行内联代码
　　　　2、使用<pre></pre>来显示多行块代码
　　　　3、使用<kbd></kbd>来显示用户输入代码

　　不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。

1、<pre>标签

　　对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议在编写HTML标签时，就控制好。

　　只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

 

二、表格

　　1、Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

　　　  ☑  .table：基础表格

  　　☑  .table-striped：斑马线表格

 　　 ☑  .table-bordered：带边框的表格

  　　☑  .table-hover：鼠标悬停高亮的表格

　　  ☑  .table-condensed：紧凑型表格

 　　 ☑  .table-responsive：响应式表格

 

　　2、表格行的类

　　Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，要实现悬浮状态，需要在<table>标签上加入table-hover类。具体说明如下表所示：

　　

　　除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

 

 　　3、基础表格

　　“.table”主要有三个作用：

 　　 ☑  给表格设置了margin-bottom:20px以及设置单元内距

 　　 ☑  在thead底部设置了一个2px的浅灰实线

  　　☑  每个单元格顶部设置了一个1px的浅灰实线

　　

 

 

　　4、斑马线表格

　　在Bootstrap中实现让表格带有背景条纹效果，只需要在<table class="table">的基础上增加类名“.table-striped”即可

　　

 

　　5、带边框的表格

　　基础表格仅让表格部分地方有边框，但有时候需要整个表格具有边框效果。Bootstrap出于实际运用，也考虑这种表格效果，即所有单元格具有一条1px的边框。

　　Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似，只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可。

　

 

 

　　6、鼠标悬停高亮

　　鼠标悬停高亮的表格使用也简单，仅需要<table class="table">元素上添加类名“table-hover”即可

 

　　7、紧凑型表格

　　单元格没内距或者内距较其他表格的内距更小。重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。

 

　　8、响应式表格

　　Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。

　　Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。

　　宽屏效果：

　　

　　窄屏效果：

　　

　不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时，千万注意，你的<table>元素中一定不能缺少类名“table”。

转载于:https://www.cnblogs.com/echospace-/p/7339530.html