1.Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式

2.使用了<small>标签来制作副标题,由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;

3.如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的

处理。

4.<b>和<strong>加粗

5.<em>或<i>斜体

6.强调相关的类:

.text-muted:提示,使用浅灰色(#999)

.text-primary:主要,使用蓝色(#428bca)

.text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(##a94442)

7.文本对齐风格:.text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐

8.列表:

无序列表 <ul>     <li>…</li> </ul>

有序列表 <ol>     <li>…</li> </ol>

定义列表 <dl>     <dt>…</dt>     <dd>…</dd> </dl>

去点列表使用类:.list-unstyled

通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。 水平定义列表就像内联列表一样。

Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。

9.三种代码风格:

a、使用<code></code>来显示单行内联代码

b、使用<pre></pre>来显示多行块代码

c、使用<kbd></kbd>来显示用户输入代码

<pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

Bootstrap关于排版的更多相关文章

  1. bootstrap之排版类

    bootstrap之排版类

  2. Bootstrap 一. 排版样式(内联文本元素,对齐,大小写,缩略语,地址文本,引用文本,列表排版 ,代码 )

    第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...

  3. Bootstrap文本排版基础--Bootsrap

    1.排版前的基础 (1)移动设备优先 <meta name="viewport" content="width=device-width, initial-scal ...

  4. bootstrap之排版样式

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

  5. Bootstrap(2) 排版样式

    1.页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 1 ...

  6. 有关bootstrap之排版

    1.标题 HTML中的所有标题标签,从<h1> 到 <h6> 均可用.另外,还提供了.h1 到.h6 class,为的是给inline属性的文本赋予标题的样式. 在标题内还可以 ...

  7. Bootstrap学习-排版

    1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...

  8. bootstrap css排版

    smart-form 单行元素: 一般用div包含,class="row" 列元素:用section包含,class="col col-x"(section带有 ...

  9. Bootstrap学习-排版-表单

    1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...

随机推荐

  1. Skyline V6.6.1安装文件下载及使用

     1.下载地址:http://www.skylineglobe.com/skylineglobe/corporate/download/DownloadCenter.aspx 2.安装指南:   ...

  2. HashMap源代码剖析

    大部分思路都是一样的 .仅仅是一些细节不一样.源代码中都标了出来.jdk容器源代码还是挺简单的. public class HashMap<K,V> extends AbstractMap ...

  3. MapReduce:具体解释Shuffle过程

    Shuffle过程是MapReduce的核心,也被称为奇迹发生的地方.要想理解MapReduce, Shuffle是必需要了解的.我看过非常多相关的资料,但每次看完都云里雾里的绕着,非常难理清大致的逻 ...

  4. 学习笔记——node.js

    node.js的作用在于,号称可以让服务器支持更多的连接.比如说,php + apche可以让服务器支持4000个并发连接,那么node.js + apche可以让服务器支持并发几万个. 为什么这么牛 ...

  5. python mysql数据库 'latin-1' codec can't encode character错误问题解决

    "UnicodeEncodeError:'latin-1' codec can't encode character ..."     This is because MySQLd ...

  6. springboot+webmagic实现java爬虫jdbc及mysql

    前段时间需要爬取网页上的信息,自己对于爬虫没有任何了解,就了解了一下webmagic,写了个简单的爬虫. 一.首先介绍一下webmagic: webmagic采用完全模块化的设计,功能覆盖整个爬虫的生 ...

  7. Rancher 2:添加 NFS client provisioner 动态提供 Kubernetes 后端存储卷

    一.前提说明 1.说明: NFS client provisioner 利用 NFS Server 给 Kubernetes 作为持久存储的后端,并且动态提供PV. 默认 rancher 2 的存储类 ...

  8. JS通过ajax + 多列布局 + 自动加载来实现瀑布流效果

    Ajax 说明:本文效果是无限加载的,意思就是你一直滚动就会一直加载图片出现,通过鼠标滚动距离来判断的,所以不是说的那种加载一次就停了的那种,那种demo下次我会再做一次 css部分用的是html5+ ...

  9. JavaScript 函数 伪数组 arguments

    一.函数 函数:函数就是将一些语言进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 1.将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动 2.简化编程,让变 ...

  10. 总结:Ruby里是值传递还是引用传递

    在ruby中一切都是对象,而你向方法中传递的实质上是对象的引用( object-reference).ruby中变量都是对象的引用. 先来看 def pref2(agr) agr.downcase e ...