排版-标题

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

                                <td>怎么学好Ｃ＃</td>

                                <td>长春师范</td>

                            </tr>

                            <tr class="text-center">

                                <td>前端开发</td>

                                <td>怎么学好前端</td>

                                <td>河北师范</td>

                            </tr>

                        </table>

            </div>

        </div>

    </div>

效果

带表框的table

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

<table class="table table-bordered">

  ...

</table>

鼠标悬停

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

<table class="table table-hover">

  ...

</table>

　　

 
 
 
 
 
 
 
 
 
 

排版-标题及table的更多相关文章

  1. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  2. WPS 文字排版 标题回车后标题号自动增加

    飞思卡来互联网提供全球性的 看了看 风格的呵呵 合格否d合格否的 secure embedded嵌入式解 个国家和地区,注册了成千上万项专利,产品面向 物联网,汽车电子,消费电子,工业及网络设备等市 ...

  3. Bootstrap3 排版-标题

    HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. h1. Boots ...

  4. 关于table元素的认识

    表格是网页上最常见的元素,但是,现在对很多刚入行的前端们那是谈table色变.那是为啥?这是表格的框架的简单.明了.在传统的网页中使用没有边框的表格来排版是非常流行.在web标准逐渐深入设计领域以后, ...

  5. bootstrap基础学习小记（二）排版、列表、代码风格、表格

    排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...

  6. table详解

    1.tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. tr内是th还是td可由自己定义,th,td可存在于任一行,th与td的区别在与th字体更粗 2.定义一个table默认有bor ...

  7. Bootstrap方法之--排版、代码

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  8. Selenium之table操作

    操作内容: 获取table总行数.总列数.获取某单元格的text值,删除一行[如果每行后边提供删除的按钮] HTML代码: <html><head><meta http- ...

  9. 善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

    在很久以前我們都是用 Table 在排版的,我相信現在還是有不少人還是在用 Table 進行排版而非現在較為流行的 CSS 排版,使用 Table 排版最大的好處就是版面在各瀏覽器中顯示比較不會亂掉. ...

随机推荐

  1. 1.MFC架构分析

    1.架构代码文件的结构 主要由四个部分组成 1.资源文件Resource.h:主要定义资源的ID 2.预编译文件:stdafx.h 可以用来解决头文件包含冲突的问题,定义一些需要全局性包含的文件. 3 ...

  2. abaqus查询网格相关

    怎样查询网格中总共有多少单元和节点: 可以进入mesh模块----tools----query----mesh----下面选择select elements----选中所有单元----鼠标中键就可以显 ...

  3. virtual关键字

    出于多态的考虑,为了覆盖, 子类同名覆盖函数(函数名.参数.返回值都相同) virtual void print(): 这也许会使人联想到函数的重载,但稍加对比就会发现两者是完全不同的:(1)重载的几 ...

  4. 第40章：MongoDB-集群--Replica Sets(副本集)---副本集的管理

    ①以单机模式启动成员 由于很多维护的工作需要写入操作,所以不合适在副本集中操作,可以以单机模式启动成员,也就是不要使用副本的选项,就跟以前启动单独的服务器一样.一般使用一个跟副本集配置中不一样的端口号 ...

  5. ReSharper 10.0.0.2 Ultimate 破解

    文件下载地址:http://pan.baidu.com/s/1gf7l8cF 1.安装ReSharper 10.0.0.2 Ultimate 2.修改Products.json文件的FilePath, ...

  6. Jquery 图片走马灯效果原理

    本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 照例先上代码: HTML: <div class="box"> & ...

  7. JavaScript实现LUHN算法验证银行卡号有效性

    一般验证银行卡有效性用到一种叫做LUHN的算法,简介请参考这篇博客:基于Luhn算法的银行卡卡号的格式校验 注意: 1.LUHN算法只是能校验卡号是否有效,并不能校验卡号和用户名是否一致. 2.如果有 ...

  8. Swift5 语言指南(十二) 属性

    属性将值与特定类,结构或枚举相关联.存储的属性将常量和变量值存储为实例的一部分,而计算属性则计算(而不是存储)值.计算属性由类,结构和枚举提供.存储的属性仅由类和结构提供. 存储和计算属性通常与特定类 ...

  9. 在notepad++中使用正则匹配功能(一-龥！-～) 中文[利刃篇]

    用正则时间越久,人就越懒,就越知道正则的强大.正则,不只是在代码里用到,在字符查找是也会用到,学会适当使用正则,将会使你的工作事办功倍!但是,中文却是一个砍,不容易过. 于是在用notepad++,也 ...

  10. openresty + lua 1、openresty 连接 mysql，实现 crud

    最近开发一个项目,公司使用的是 openresty + lua,所以就研究了 openresty + lua.介绍的话,我就不多说了,网上太多了. 写这个博客主要是记录一下,在学习的过程中遇到的一些坑 ...