首页 技术 正文
技术 2022年11月14日
0 收藏 574 点赞 4,451 浏览 1347 个字

  排版-标题

  在标题中还可以包含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>

  

          

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,493
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,133
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,297