bootstrap的排版

1.标题

Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式

2.代码如下:

<div class="container">
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
</div>

3.内联子标签

如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本

4.代码如下:

<div class="container">
<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>
</div>

5.引导主题副本

为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本

6.代码如下:

 <div class="container">
<h2>引导主题副本</h2>
<p >
这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实
</p>
<p class="lead">
这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实
</p>
</div>

7.强调

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

8.代码如下:

<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>

9.缩写

HTML 元素提供了用于缩写的标记,比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,

当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 <abbr>。

10.代码如下:

<div class="container">
<abbr title="world wide web">www</abbr><br/>
<abbr title="Real Simple Ayndication">Rss</abbr>
</div>

11.地址(address)

使用 <address> 标签,您可以在网页上显示联系信息。由于 <address> 默认为 display:block;,您需要使用
标签来为封闭的地址文本添加换行。

12.代码如下:

 <div class="container">
<address>
<strong>Some Company, Inc.</strong><br/>
007 street<br/>
Some City, State XXXXX<br>
<abbr title="phone">P:</abbr>
</address>
</div>

13.引用(blockquote)

可以在任意的 HTML 文本旁使用默认的 <blockquote>。其他选项包括,添加一个 <small> 标签来标识引用的来源,使用 class .pull-right 向右对齐引用

14.代码如下:

<div class="container">
<blockquote>
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例
</blockquote> <blockquote>
这是一个默认的引用实例。<cite title="Source Title">这是一个默认的引用实例。</cite>这是一个默认的引用实例。这是一个默认的引用实例
</blockquote> <blockquote class="pull-right">
这是一个默认的引用实例。<small><cite title="Source Title">这是一个默认的引用实例。</cite></small>这是一个默认的引用实例。这是一个默认的引用实例
</blockquote>
</div>

15.列表

Bootstrap 支持有序列表、无序列表和定义列表。

  • 有序列表:有序列表是指以数字或其他有序字符开头的列表。
  • 无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。
  • 如果您不想显示这些着重号,您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
  • 定义列表:在这种类型的列表中,每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语,就像字典,这是被定义的属于(或短语)。
  • 接着,<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。

16.代码如下:

 <div class="container">
<h3>有序列表</h3>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<h3>无序列表</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<h3>未定义样式列表</h3>
<ul class="list-unstyled">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<h3>内联列表</h3>
<ul class="list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

17.更多的排版类:

下表提供了 Bootstrap 更多排版类的实例:
类 描述
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例
.pre-scrollable 使 <pre> 元素可滚动 scrollable

bootstrap基础学习三篇的更多相关文章

  1. bootstrap基础学习七篇

    bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...

  2. bootstrap基础学习二篇

    这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: ...

  3. bootstrap基础学习五篇

    bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...

  4. bootstrap基础学习八篇

    bootstrap辅助类 a.对于文本颜色 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-muted" ...

  5. bootstrap基础学习六篇

    bootstrap按钮 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 ...

  6. bootstrap基础学习四篇

    bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...

  7. bootstrap基础学习一篇

    官网:http://www.bootcss.com/ 这里,主要讲解bootstrap3.关于他的介绍就不用复述了. 1.示例 <!doctype html> <html lang= ...

  8. bootstrap基础学习十一篇

    bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...

  9. bootstrap基础学习十篇

    bootstrap字体图标(Glyphicons) a.什么是字体图标 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...

随机推荐

  1. 有关索引的DMV(转)

    转自:http://www.cnblogs.com/CareySon/archive/2012/05/17/2505981.html 1.查看那些被大量更新,却很少被使用的索引 SET TRANSAC ...

  2. Java之开发工具(1) - Eclipse 如何设置注释的模板

    最常用的注释就是对类的说明和方法的说明,关于这类代码的注释方式,在Eclipse中可以这样进行设置: windows---preferences...---java--code style--code ...

  3. oracle 查询本周数据生成下周数据

      CreateTime--2018年1月4日16:38:01 Author:Marydon oracle 查询本周数据生成下周数据 第一步:查询指定区间数据 第二步:改变查询结果的值 查询日期字段+ ...

  4. Python 小程序,对文件操作及其它

    以下是自己写的几个对文件操作的小程序,里面涉及到文件操作,列表(集合,字典)的运用等.比方说,从文件里读取一行数据.分别存放于列表中,再对列表进行操作.如去掉里面的反复项.排序等操作. 常见对文件里行 ...

  5. 使用samba实现linux与windows文件共享

                       1,安装samba                              sudo apt-get install samba                 ...

  6. WebSocket的几个模块(node.js)(未完)

    1.ws模块 npm install ws 2.nodejs-websocket npm nodejs-websocket 3.socket.io模块 npm install socket.io

  7. blender, 创建多边形面片

    按a键清除所有选择,进入Edit Mode,选vertex select方式.然后按住control,使用MLB连续画多个顶点,形成一个多边形,如图所示: 然后同时选中两个端点,点Make Edge/ ...

  8. redis五种基本数据类型

    1.string类:一个key对应一个value(key:value).string类是二进制安全,可以包含任何数据(例如:图片.音乐). 2.hash类:string类型field和value的映射 ...

  9. Linux 硬链接和软链接

    硬链接:ln 源文件 新建名 指向同一个文件,并独立存在.当源文件删除不会影响硬链接文件的读取.不能跨文件系统和目录建连接. 例:新建一个文件吧!名字test 硬链接为t1. 查看文件,发现2个文件最 ...

  10. Path相关方法解说(二)

    今天咱们一起来看看Path里 XXXTo 相关的一类方法. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/4 ...