一、段落

  段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):

1、全局文本字号为14px(font-size)

2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。

3、颜色为深灰色(#333)

二、文字样式

  在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

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

1.粗体

  在Bootstrap中,可以使用<b><strong>标签让文本直接加粗。

2.斜体

  在Bootstrap中,可以使用<em><i>来实现文本斜体。

三、强调类

  • .text-muted:提示,使用浅灰色(#999)
  • .text-primary:主要,使用蓝色(#428bca)
  • .text-success:成功,使用浅绿色(#3c763d)
  • .text-info:通知信息,使用浅蓝色(#31708f)
  • .text-warning:警告,使用黄色(#8a6d3b)
  • .text-danger:危险,使用褐色(#a94442)
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

效果如下:

四、文本对齐

  在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格:

☑  左对齐,取值left

☑  居中对齐,取值center

☑  右对齐,取值right

☑  两端对齐,取值justify

  为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格:

☑   .text-left:左对齐

☑   .text-center:居中对齐

☑   .text-right:右对齐

☑   .text-justify:两端对齐

Bootstrap_排版_文字样式的更多相关文章

  1. Bootstrap_排版_标题

    Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规 ...

  2. Bootstrap_排版_列表

    一.基本列表 <h5>普通列表</h5> <ul> <li>列表项目</li> <li>列表项目</li> < ...

  3. Bootstrap_排版_表格

    一.基础表格 <table class="table"> <thead> <tr> <th>表格标题</th> < ...

  4. Bootstrap_排版_代码

    不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代 一.单行内联代码 <code>:一般是针对于单个单词或单个句子 ...

  5. Bootstrap_排版

    标题: Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体 ...

  6. 自定义ActionBar标题与菜单中的文字样式

    自定义标题文字样式 标题样式是ActionBar样式的一部分,所以要先定义ActionBar的样式 <style name="AppTheme" parent="A ...

  7. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  8. UITabBarController 、TabBar背景颜色设置,UITabBarItem的文字样式(颜色和大小)UITabBarItem的位置调整

    改变UITabBarController的颜色 UIView*mView=[[UIView alloc]initWithFrame:CGRectMake(0,0,320,48)];//这是部分tabb ...

  9. 自定义 ActionBar 标题与菜单中的文字样式

    自定义标题文字样式 标题样式是 ActionBar 样式的一部分,所以要先定义 ActionBar 的样式 <style name="AppTheme" parent=&qu ...

随机推荐

  1. 【搜索】【并查集】Codeforces 691D Swaps in Permutation

    题目链接: http://codeforces.com/problemset/problem/691/D 题目大意: 给一个1到N的排列,M个操作(1<=N,M<=106),每个操作可以交 ...

  2. mac下的改装人生——把主硬盘换成ssd

    这两天搞得最多的事情就是我的这两块硬盘,基本上的时间都被他们占用去了,但是最后的结果也是让我很开心--开机瞬秒,程序瞬秒,生活质量瞬间高了很多哈. 关于ssd的各种事情,我的另外一篇博客有讲,算是比较 ...

  3. 60秒找到最对的size?为服饰电商提供尺寸匹配解决方案的True Fit获1500万美元融资 | 36氪

    60秒找到最对的size?为服饰电商提供尺寸匹配解决方案的True Fit获1500万美元融资 | 36氪 60秒找到最对的size?为服饰电商提供尺寸匹配解决方案的True Fit获1500万美元融 ...

  4. Cookie介绍及JavaScript操作Cookie方法详解

    本文主要为大家简单介绍了以下Cookie的用途.运行机制,以及JavaScript操作Cookie的各种方法,总结的比较全面,希望能给大家带来帮助. 什么是 Cookie “cookie 是存储于访问 ...

  5. js日期控件demo

    最近在钻研前端,写了个日期控件,内涵代码注释,希望能帮助到大家~ 1.html代码 <!DOCTYPE html> <html xmlns="http://www.w3.o ...

  6. DateGridew导出Excel表+常见错误提示

    在敲机房收费系统的时候,显示数据的时候需要将DateGridew 中的数据导出进Excel表.DateGridew导出Excel表是比较常见的,当然导出Excel表有很多种方法,下面是个人认为比较容易 ...

  7. hdu 3642 Get The Treasury(扫描线)

    pid=3642" style="">题目链接:hdu 3642 Get The Treasury 题目大意:三维坐标系,给定若干的长方体,问说有多少位置被覆盖3次 ...

  8. Windows Minifilter驱动 - 调式 (4)

    写不论什么程序动态调试是很重要的.驱动开发也不例外. 通常如今写驱动的时候,都是在VM上跑的,调试手段基本也是本地windbg + 虚拟机. 虚拟机配置 我用的是win7, 第一步,看以下.成功运行后 ...

  9. Java 删除当前文件夹及其文件夹下的全部文件

    删除文件夹2以下的全部文件及其文件夹 演示样例文件夹例如以下:D:/test/1/2 1.使用FileUtils类.静默删除 String url = "D:/test/1/2"; ...

  10. 学习《Spring 3.x 企业应用开发实战》Day-1

    Day-1 记录自己学习spring的笔记 提要:根据<Spring 3.x 企业应用开发实战>开头一个用户登录的例子,按照上面敲的. 1.项目分层