zoukankan      html  css  js  c++  java
  • Bootstrap 排版

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

    1、标题

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练作品</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    </head>
    <body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
    <script src="Css/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

    内联子标题

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练作品</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

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

    </head>
    <body>
    <h1>这是标题 1.<small>这是副标题1</small></h1>
    <h2>这是标题 2.<small>这是副标题2</small></h2>
    <h3>这是标题 3.<small>这是副标题3</small></h3>
    <h4>这是标题 4.<small>这是副标题4</small></h4>
    <h5>这是标题 5.<small>这是副标题5</small></h5>
    <h6>这是标题 6.<small>这是副标题6</small></h6>
    <script src="Css/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

    强调

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=decive-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
    </head>
    <body>
    <small>本行内容是在标签内的,大小为父元素的85%</small><br />
    <strong>本行内容是在标签内的,强调的文本</strong><br />
    <em>本行内容是在标签内的,以斜体表示文本</em><br />
    <p class="text-primary">这是一个带有text-primary类的段落</p>
    <p class="text-success">这是一个带有text-success类的段落</p>
    <p class="text-muted">这是一个带有text-muted类的段落</p>
    <p class="text-warning">这是一个带有text-warning类的段落</p>
    <p class="text-danger">这是一个带有text-danger类的段落</p>
    <script src="Css/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

    列表

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

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


    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练作品:列表</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    </head>
    <body>
    <div class="container">
    <h2>有序列表</h2>
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    </ol>
    <br />
    <h2>无序列表</h2>
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    </ul>
    <br />
    <h2>未定义样式列表</h2>
    <ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    </ul>
    <br />
    <h2>内联列表</h2>
    <ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    </ul>
    <br />
    <h2>自定义列表列表</h2>
    <dl>
    <dt>Bootstrap</dt>
    <dd>Bootstrap是目前最受欢迎的前端框架</dd>
    <dt>HTML5</dt>
    <dd>HTML5是下一代HTML标签语言,现在有很多主流的浏览器都进行支持,作为一个web前端开发端,必须要掌握好HTML5.</dd>
    </dl>
    <br />
    <h2>自定义列表列表</h2>
    <dl class="dl-horizontal">
    <dt>Bootstrap</dt>
    <dd>Bootstrap是目前最受欢迎的前端框架</dd>
    <dt>HTML5</dt>
    <dd>HTML5是下一代HTML标签语言,现在有很多主流的浏览器都进行支持,作为一个web前端开发端,必须要掌握好HTML5.</dd>
    </dl>
    </div>
    <script src="Css/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    Ubuntu adb device
    ubuntu系统下创建软件桌面快捷方式
    Ubuntu 配置java环境变量
    Ubuntu 12.04 安装Chrome步骤
    java和php中static+final+synchronized 总结
    Sensor Hub 初探
    Ionic+PhoneGap+ Cordova
    Ionic初探 + 混合app的尝试
    ubuntu+dpkg+apt-get+aptitude 区别
    ubuntu下桌面系统及切换gdm+kdm+lightdm
  • 原文地址:https://www.cnblogs.com/melao2006/p/4986054.html
Copyright © 2011-2022 走看看