排版-标题及table

时间:2023-03-10 01:00:37
排版-标题及table

  排版-标题

  在标题中还可以包含small标签,可以用来标记副标题

  副标题灰色,比主标题小

     <h1>我是标题 <small>我是小标题</small></h1>

  页面主体

  Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元 素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

  

  无用文本

  对于没用的文本使用 <s> 标签。

  

  <p><s>无用的文本</s></p>

  带下划线的文本

      为文本添加下划线,使用u标签

  着重

  通过使用strong强调一段文本

  文本对齐 

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

  

  内联列表
  通过display:inline-block;并添加少量内补,将所有元素放置同一行
  
<ul class="list-inline">
<li>...</li>
</ul>

表格

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

  

//不带条纹的
<table class="table">
...
</table> //条纹table
<table class="table">
...
</table>
 
<div class="container">
<div class="row">
<div class="col md-12">
<table class="table table-striped">
<tr class="text-center">
<th class="text-center">标题</th>
<th class="text-center">备注</th>
<th class="text-center">名称</th>
</tr>
<tr class="text-center">
<td>C#</td>
<td>怎么学好C#</td>
<td>长春师范</td>
</tr>
<tr class="text-center">
<td>前端开发</td>
<td>怎么学好前端</td>
<td>河北师范</td>
</tr>
</table>
</div> </div>
</div>

效果

排版-标题及table

带表框的table

  添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
...
</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
...
</table>