bootstrap博客模板带版本管理（bootstrap笔记代码与表格）

或许能够 2022-11-27 15:39:14

代码

在bootstrap主要提供了三种代码风格：

1、使用<code></code>来显示单行内联代码

<code><code></code>

2、使用<pre></pre>来显示多行块代码

<pre>

<ul>

<li>...</li>

<li>...</li>

<li>...</li>

</ul>

</pre>

3、使用<kbd></kbd>来显示用户输入代码。

<div>请输入<kbd>ctrl c</kbd>来复制代码，然后使用<kbd>ctrl v</kbd>来粘贴代码</div>

在使用代码时，用户可以根据具体的需求来使用不同的类型：

1、<code>：一般是针对于单个单词或单个句子的代码

2、<pre>：一般是针对于多行代码（也就是成块的代码）

3、<kbd>:一般是表示用户要通过键盘输入的内容

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。

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

表格

表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。

Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色

其使用非常的简单，只需要在<tr>元素中添加上表对应的类名

<tr class="active">

<td>…</td>

</tr>

基础表格 .table

对表格的结构，跟我们平时使用表格是一样的,在Bootstrap基础表格是通过类名“.table”来控制

<table class="table">

<thead>

<tr>

<th>表格标题</th>

</tr>

</thead>

<tbody>

<tr>

<td>表格单元格</td>

</tr>

</tbody>

</table>

基本表格图

斑马线表格 .table-striped

简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难，只需要在<table class="table">的基础上增加类名“.table-striped”即可

<table class="table table-striped">

…

</table>

其效果与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。

带边框的表格 .table-bordered

即所有单元格具有一条1px的边框。只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可

<table class="table table-bordered">

…

</table>

样式如图

鼠标悬浮高亮的表格 .table-hover

当鼠标悬停在表格的行上面有一个高亮的背景色，使用也简单，仅需要<table class="table">元素上添加类名“table-hover”即可。

<table class="table table-hover">

…

</table>

注：其实，鼠标悬浮高亮表格，可以和Bootstrap其他表格混合使用。简单点说，只要你想让你的表格具备悬浮高亮效果，你只要给这个表格添加“table-hover”类名就好了。

<table class="table table-striped table-bordered table-hover">

…

</table>

紧凑型表格 .table-condensed

紧凑型表格的运用，也只是需要在<table class="table">基础上添加类名“table-condensed”

<table class="table table-condensed">

…

</table>

Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

响应式表格 .table-responsive

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

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

<div class="table-responsive">

<table class="table table-bordered">

…

</table>

</div>

宽屏效果

窄屏效果

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