排版-标题

　　在标题中还可以包含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. Canny边缘检测算法的一些改进

    传统的Canny边缘检测算法是一种有效而又相对简单的算法,可以得到很好的结果(可以参考上一篇Canny边缘检测算法的实现).但是Canny算法本身也有一些缺陷,可以有改进的地方. 1. Canny边缘 ...

  2. Springboot+Mybatis+MySQL实例练习时踩坑记录

    最近刚开始学习后端,直接让上手学习Springboot+Mybatis+MySQL对CRUD的实例,虽然实例不难,但是上面的三个知识我都不懂,就有点为难我了 所以经常遇到一个点卡自己很久的情况,这里列 ...

  3. [au3]批量输入号码程序

    批量输入号码程序 这个文件可以随时产生一个剪贴板文字的文本文件,以供其他程序读取. 这个程序修改了许多次了,主要是针对网络延迟的问题. 最终找到了解决方案:探测输入的界面的反馈信息,也就是反馈的颜色. ...

  4. BASH 环境

    本节内容 1.  什么是shell 2.  命令的优先级 3.  元字符 4.  登录shell与非登录shell 一  什么是shell shell一般代表两个层面的意思,一个是命令解释器,如bas ...

  5. [Python] networkx入门 转

    networkx是python的一个第三方包,可以方便地调用各种图算法的计算. 通过调用python画图包matplotlib能实现图的可视化. 1.安装 正好整理一下python第三方包的安装方法. ...

  6. 为什么需要micro-service构建平台

    最近一直在做micro-service的开发平台建设.由于这是一个实验项目,目前所有工作都得靠自己操刀. 今天在总结用python开发一个web service时,偶有所得,这让我建设micro-se ...

  7. Adobe Photoshop CC 2019画板背景色白底如何去掉？

    Adobe Photoshop CC 2019画板背景色白底切透明图片很不方便,有两种方法可以解决: 第一种方法: 新建文档的时候直接背景内容直接选择透明 若设计师提供的设计稿是白底也没关系,就是第二 ...

  8. 5.html基础标签:块级+行级元素+特殊字符+嵌套规则

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

  9. 你可能不知道的github语法——图标

    概述 逛github,看到别人的仓库的description里面有各种炫丽的图标,不禁有点好奇,于是去查了下怎么写真的被我查到了,记录在下面,供以后开发时参考,相信对其他人也有用. 图标 可以先看看g ...

  10. 【Spark工作原理】stage划分原理理解

    Job->Stage->Task开发完一个应用以后,把这个应用提交到Spark集群,这个应用叫Application.这个应用里面开发了很多代码,这些代码里面凡是遇到一个action操作, ...