排版-标题

　　在标题中还可以包含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. Wordpress“固定链接”页面出现404原因及解决方法

    编辑配置文件:/etc/apache2/apache2.conf(非常靠后的位置),将里面的AllowOverride选项由None设置为All. <Directory /> Option ...

  2. 【repost】jQuery笔记总结

    第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 J ...

  3. 读书笔记之Linux系统编程与深入理解Linux内核

    前言 本人再看深入理解Linux内核的时候发现比较难懂,看了Linux系统编程一说后,觉得Linux系统编程还是简单易懂些,并且两本书都是讲Linux比较底层的东西,只不过侧重点不同,本文就以Linu ...

  4. Codeforces791 C. Bear and Different Names

    C. Bear and Different Names time limit per test 1 second memory limit per test 256 megabytes input s ...

  5. MVC笔记之一：MVC编程模型

    MVC是ASPX.NET用于构造Web应用的一种框架,和传统的ASPX.NET开发模式(Web Form)在架构上相同,同样采用三层框架实现,但相比传输开的模式,各层架构更加规范. 传统三层架构: V ...

  6. zoj4110 Strings in the Pocket（manacher）

    传送:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=6012 题意:给定两个串$S$和$T$,可以翻转$S$串中的任意一个子段, ...

  7. WebRTC 学习之 Intel® Collaboration Suite for WebRTC 关键类整理

    关键类整理 ---> ConferenceClient.ConferenceClientObserver. 一.ConferenceClient ConferenceClient是一个应用程序在 ...

  8. MySQL：字符串字段加索引

    1. 使用方式 1.1 全字段加索引 给整个字段加索引,索引存储整个字段的值. 数据量较小时,查询成本高,准确度高: 数据量较大时,比较耗费空间: 1.2 前缀索引 MySQL支持前缀索引,可以定义字 ...

  9. eclipse clean和build作用

    由于eclipse的编译是基于时间戳的判断机制的. 因此当你按build   all的时候有些eclipse认为时间戳没有改变的类不会被编译. 因此你可以先clean一下再编译.这个时候eclipse ...

  10. 【PaddlePaddle】自然语言处理：句词预测

    前言 预测词汇的相关性算是自然语言中的HelloWolrd.本文主要根据百度PaddlePaddle示例word2vec,对句子中下一个单词的预测.该示例使用4个词语来预测下一个词. 1. 数据集以及 ...