第五篇Bootstrap 排版

 更新时间:2016年06月21日 14:58:06   作者:-夏昊-  
使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素。本文重点给大家介绍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 排版的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript html5实现表单验证

    javascript html5实现表单验证

    这篇文章主要为大家详细介绍了javascript html5实现表单验证的具体代码,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Typescript 函数重载的实现

    Typescript 函数重载的实现

    本文主要介绍了Typescript 函数重载的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • JavaScript中ES6规范中let和const的用法和区别

    JavaScript中ES6规范中let和const的用法和区别

    这篇文章主要介绍了JavaScript中ES6规范中let和const的用法和区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • javascript 动态生成css代码的两种方法

    javascript 动态生成css代码的两种方法

    这篇文章主要介绍了javascript 动态生成css代码的两种方法,有时候我们需要利用js来动态生成页面上style标签中的css代码,下面就给大家介绍两种方法,需要的朋友可以参考下
    2017-03-03
  • javascript根据像素点取位置示例

    javascript根据像素点取位置示例

    这篇文章主要介绍了javascript根据像素点取位置的示例,大家参考使用吧
    2014-01-01
  • js 根据对象数组中的属性进行排序实现代码

    js 根据对象数组中的属性进行排序实现代码

    这篇文章主要介绍了js 根据对象数组中的属性进行排序实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS实现判断对象是否为空对象的5种方法

    JS实现判断对象是否为空对象的5种方法

    这篇文章主要介绍了JS实现判断对象是否为空对象的5种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • JavaScript使用html2canvas实现截取HTML并生成图片

    JavaScript使用html2canvas实现截取HTML并生成图片

    在前端开发中,有时我们需要将网页的一部分或整个页面截取并保存为图片,这在生成报告、分享内容或保存用户界面状态等场景中非常有用,本文将介绍如何使用 JavaScript 库 html2canvas 来实现这一功能,并提供一个完整的示例,需要的朋友可以参考下
    2024-10-10
  • 浅谈es6中export和export default的作用及区别

    浅谈es6中export和export default的作用及区别

    下面小编就为大家分享一篇浅谈es6中export和export default的作用及区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 前端常用6种数据加密方式的使用详细讲解

    前端常用6种数据加密方式的使用详细讲解

    在前端开发中,常用的数据加密技术包括Base64编码、MD5哈希、SHA-256哈希、AES对称加密、RSA非对称加密和HMAC消息认证码,这些加密方式提供了不同层次的数据安全保护,适用于不同的安全需求和场景,需要的朋友可以参考下
    2024-09-09

最新评论