第五篇Bootstrap 排版

使用bootstrap的排版特性可以创建标题，段落，列表及其它内联元素。

标题：bootstrap中定义了从h1-h6的六种标题样式。

内联子标题：

如果需要向任意一个标题添加一个子标题，只需要加上<small></small>例如：

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>

<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>

<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>

<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>

<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

显示效果如下所示：

HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。

<small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内，并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p> <p class="text-primary">本行内容带有一个 primary class</p> <p class="text-success">本行内容带有一个 success class</p> <p class="text-info">本行内容带有一个 info class</p> <p class="text-warning">本行内容带有一个 warning class</p> <p class="text-danger">本行内容带有一个 danger class</p>

效果如下:

以上所述是小编给大家介绍的第五篇Bootstrap 排版的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 全面解析Bootstrap排版使用方法（标题）

    全面解析Bootstrap排版使用方法（标题）

    Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: <!--Bootstrap中的标题--> <h1>Bootstrap标题一</h1> <h2>Bootstrap标题二</h2> <h3>Bootstrap标题三</h3> <h4>Bootst

  • Bootstrap3.0建站教程(一)之bootstrap表单元素排版

    Bootstrap3.0建站教程(一)之bootstrap表单元素排版

    1.文字和输入框前后排列: 代码: <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> <h2>条件查找</h2> </div> <div class="panel-body

  • Bootstrap入门书籍之（一）排版

    Bootstrap入门书籍之（一）排版

    推荐阅读:Bootstrap入门书籍之(零)Bootstrap简介 Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 1. 标题 在Bootstrap中使用标题的方式和常规html一样:从 <h1> 到 <h6> 分别从大到小安排标题元素,只不过在Bootstrap中重新设置了其默认样式,从源码中可以看到有如下共

  • Bootstrap3学习笔记(二)之排版

    在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统 对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用small标记 <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2>

  • 学习使用Bootstrap页面排版样式

    Bootstrap之页面排版样式 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC 及移动端设备的 Web 页面需求. 1. Bootstrap 特点 Bootstrap 非常流行,得益于它非常实用的功能和特点.主要核心功能特点如下: (1). 跨设备.跨浏览器,可以兼容所有现代浏览器,包括比较诟病的 IE7.8. (3). 提供的全面的组件

  • 需灵活掌握的Bootstrap预定义排版类 你精通吗?

    需灵活掌握的Bootstrap预定义排版类 你精通吗?

    有了Bootstrap前端框架预处理好的排版类,我们从此不必再为每个排版的标签元素写大量的CSS代码了,可以使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素预定义好的样式,排版出很规范的网页. 那我们接下来一起学习下,bootstrap前端框架到底为我们预定义了那些排版的类呢? 第一:Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈,这些字体都是目前所有网页最经常用的字体了.从此

  • Bootstrap每天必学之基础排版

    Bootstrap每天必学之基础排版

    本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下.主要内容如下: 1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表 一.标题 Html中的所有标题标签,从<h1>到<h6>均可使用.另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式. <div class="container"> <h1 class

  • 第二章之Bootstrap 页面排版样式

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面主体.对齐.列表等常规内容. 一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用. 1.页面主体 Bootstrap 将全局 font-size 设置为 14px,li

  • 全面解析Bootstrap排版使用方法（文字样式）

    全面解析Bootstrap排版使用方法（文字样式）

    一.段落 段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 二.文字样式 在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理.Bootstrap同样对

  • 第一次接触神奇的Bootstrap基础排版

    第一次接触神奇的Bootstrap基础排版

    Bootstrap是Twitter推出的一个简单灵活的,基于HTML5和CSS3的用于搭建WEB前端页面的html.css.javascript工具集.拥有友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等特点.Bootstrap让Web开发更迅速.更简单. 1.Bootstrap下载 官网:http://getbootstrap.com/:新手入门:http://getbootstrap.com/getting-started

随机推荐