排版-标题

　　在标题中还可以包含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. 牛客练习赛31 B 赞迪卡之声妮莎与奥札奇 逻辑,博弈 B

    牛客练习赛31 B 赞迪卡之声妮莎与奥札奇 https://ac.nowcoder.com/acm/contest/218/B 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 2621 ...

  2. Win7 VS2017编译bgfx图形API

    官方的编译指南在这个页面 https://bkaradzic.github.io/bgfx/build.html#quick-start 目前的版本编译比较简单,下载3个项目,放于同级目录下 http ...

  3. select和其元素options

    普通的select形式为: <select> <option>选中元素1</option> <option>选中元素2</option> & ...

  4. Bootstrap方法为页面添加一个弹出框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. WITH RECOMPILE 和 OPTION(RECOMPILE) 使用上的区别

    在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的其他因素的情况下,比如重建索引,更新统计信息等等), 一是基于WITH RECOMPILE的存储过程级 ...

  6. RunC容器逃逸漏洞席卷业界，网易云如何做到实力修复？

    近日,业界爆出的runC容器越权逃逸漏洞CVE-2019-5736,席卷了整个基于runC的容器云领域,大量云计算厂商和采用容器云的企业受到影响.网易云方面透露,经过技术团队的紧急应对,网易云上的容器 ...

  7. 一道面试题（C语言）

    题:输入一个数,列出所有加和等于该数的式子. 分析: 以 6 为例: 从上面的分析就比较容易找到规律了. C语言代码: #include <stdio.h> int main() { in ...

  8. MySQL：事务的隔离性

    [参考文章]:数据库的事务特性及隔离级别 1. 事务的四大特性 1.1 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,因此事务的操作如果成功就必须要完全应用 ...

  9. Netty：Channel 建立后消息发送失败

    1. 问题现象 Channel 建立后消息发送失败: ChannelFuture future = DeviceManager.getBootstrap().connect(); deviceChan ...

  10. Tools - 一些代码阅读的方法

    1 初始能力 让阅读思路清晰连贯,保持在程序的流程架构和逻辑实现上,不被语法.编程技巧和业务流程等频繁地阻碍和打断. 语言基础:熟悉基础语法,常用的函数.库.编程技巧等: 了解设计模式.构建工具.代码 ...