0
点赞
收藏
分享

微信扫一扫

Bootstrap2:排版,代码,表格

秀儿2020 2022-04-30 阅读 58

 上期我们讲了Bootstrap有关页面美化的一些简单用法,这期我们继续深入了解他的其他功能

 

Bootstrap讲全局font-size设置为14px,line-height设置为20px,段落的行高设置为10px,颜色设置为#333。我们可以通过在页面按F12查看body的样式

段落突出:通过.lead类可以让段落突出显示,我们来看演示代码:

<div class="container">

<p>卓越人生</p>

<p class="lead">从卓景开始</p>

<p>走向人生巅峰</p>

</div>

 

效果看的出,从卓景开始 几个字 变大了。这个就是段落突出显示

在Bootstrap中h1- h6可以作为class的样式。来用

<p class="h1">卓越人生,从卓景开始</p>

<p class="h2">卓越人生,从卓景开始</p>

<p class="h3">卓越人生,从卓景开始</p>

<p class="h4">卓越人生,从卓景开始</p>

<p class="h5">卓越人生,从卓景开始</p>

<p class="h6">卓越人生,从卓景开始</p>

效果和直接写h1-h6的标题标签 效果一样

 

标记:class=”mark”

标记,把指定的内容标记出来。示例如下:

标记:I <span class="mark"> like </span> you 很久了

被span标签包起来的文本 you 的样式被添加背景色

 

改变大小写

大写:class=”text-uppercase”

示例代码:<span class="text-uppercase">i like you</span>

小写:class=”text-lowercase” 

示例代码:<span class="text-lowercase">I like you</span>

首字母大写:class=”text-capitalize”

示例代码:<span class="text-capitalize">i like you</span>

 表格测试:

咱们先来看一下我们平常写的table表格

<table>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

.......

</tbody>

</table>

现在我们的表格是没有任何样式,没有边框没有对齐方式的。

<table class=table>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

.......

</tbody>

</table>

现在再看效果,自动铺满,对齐,标题加粗,添加分割线。。

        条纹状表格:<table class=”table table-striped”>

<table class=table table-striped>

<thead>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

.......

</tbody>

</table>

隔行就有背景色

 

举报

相关推荐

0 条评论