Bootstrap能全然友好的支持html5的文本元素，这里不再赘述，详细可參考我还有一篇文章《html的文本元素总结》，这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。

.small——当前元素字体大小的 85%，经常使用作副标题时，也可用<small>来取代；

.lead——让段落突出显示;

.text-left、.text-center、.text-right——将文字于左、居中、于右对齐；

.text-lowercase、.text-uppercase、.text-capitalize——分别相应：全部字母大写、全部字母小写、首字母大写。

.blockquote-reverse——让引用呈现内容右对齐；

.list-unstyled——设置列表为无样式。

.list-inline——设置列表元素放置于同一行。并加入少量的内补（padding）；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>CSS全局样式排版</title>

    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">

</head>

<body>

<div class="container">

    <h1>欢迎訪问远地资产</h1>

    <h2>欢迎訪问远地资产</h2>

    <h3>欢迎訪问远地资产</h3>

    <h4>欢迎訪问远地资产<small>你可信赖的理財伙伴</small></h4>

    <p>宏运球迷赛后狂骂郜林及其太太 <abbr title="广州恒大前锋">郜林</abbr>扔鞋反击</p>

    <p class="lead">宏运球迷赛后狂骂郜林及其太太 郜林扔鞋反击</p>

    <p>宏运球迷赛后狂骂郜林及其太太 <mark>郜林</mark>扔鞋反击</p>

    <p class="text-left">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>

    <p class="text-center">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>

    <p class="text-right">力帆备战:申花有了登巴巴 力帆酝酿摆大巴</p>

    <p class="text-lowercase">AHALjjls</p>

    <p class="text-uppercase">AHALjjls</p>

    <p class="text-capitalize">fkdla</p>

    <address>

        <strong>远地资产</strong><br/>

        上海市，黄浦区<br/>

        西藏中路725弄12号3楼<br/>

        <abbr title="电话">P:</abbr>(021) 6553 2332

    </address>

    <blockquote class="blockquote-reverse">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>

    </blockquote>

    <ul class="list-unstyled">

        <li>鲁媒：上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>

        <li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>

        <li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>

    </ul>

    <ul class="list-inline">

        <li>鲁媒：上港登顶鲁能落后已4分 BIG4鲁能最先掉队</li>

        <li>西索科将出国疗伤缺席两轮 莫雷诺间歇期将同去治疗</li>

        <li>力帆备战:申花有了登巴巴 力帆酝酿摆大巴</li>

    </ul>

</div>

</body>

</html>

Bootstrap全局CSS样式之排版的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  3. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  5. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  6. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  7. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  8. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  9. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

随机推荐

  1. 腾讯Java程序员第二轮面试11个问题，你会几个？

    此前,分享了阿里巴巴.网易.百度等多家名企的JAVA面试题. 这也引来了不少程序员网友们的围观. 其中,也有相当一部分网友是已经从事Java开发好多年的程序员,当他们阅读完JAVA面试题的反应是:一个 ...

  2. 用Nodejs+Express搭建web，nodejs路由和Ajax传数据并返回状态，nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  3. Python 面向对象基础知识

    面向对象基础知识 1.什么是面向对象编程? - 以前使用函数 - 类 + 对象 2.什么是类什么是对象,又有什么关系? class 类: def 函数1(): pass def 函数2(): pass ...

  4. Asp.Net MVC 中的 Cookie（译）

    Asp.Net MVC 中的 Cookie(译) Cookie Cookie是请求服务器或访问Web页面时携带的一个小的文本信息. Cookie为Web应用程序中提供了一种存储特定用户信息的方法.Co ...

  5. Mac上配置不同版本的JDK

    Mac上JDK的版本为1.8,编译AOSP时发现需要JDK 1.7.想找一种比较容易切换JDK版本的方式,经过一番Google发现Jenv比较合适. 安装Jenv至少有三种方式: - $ git cl ...

  6. [转载] MapReduce工作原理讲解

    转载自http://www.aboutyun.com/thread-6723-1-1.html 有时候我们在用,但是却不知道为什么.就像苹果砸到我们头上,这或许已经是很自然的事情了,但是牛顿却发现了地 ...

  7. Python之uuid模块

    UUID是128位的全局唯一标识符,通常由32字节的字符串表示. 它可以保证时间和空间的唯一性,也称为GUID,全称为: UUID —— Universally Unique IDentifier P ...

  8. axios跨域

    参考:http://www.ruanyifeng.com/blog/2016/04/cors.html 遇到前后分离情况 前端 a.com 后端 server.a.com 环境 vue全家桶前端 ph ...

  9. Java学习笔记12---向上转型-父类的对象引用指向子类对象

    当父类的对象引用没有指向父类的对象,而是指向了子类的对象时,调用方法或访问变量时会怎样呢? 假设父类为Person,子类为Student,有下面的两行定义: Student sTest = new S ...

  10. kafka原理和实践（一）原理：10分钟入门

    系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...