三、Bootstrap样式设计
1、Bootstrap排版
Bootstrap排版主要包括标题、强调、缩略语、地址、引用和列表等元素。
标题
在HTML 中所有的标题标签(从<h1>到<h6>)都可以使用标题样式。另外,从Bootstrap 3 还提供了.h1到.h6类,为的是给内联(inline)属性的文本赋予标题的样式。在标题内还可以包含<small>标签或赋予.small类的元素,可以用来标记副标题。
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 标题_副标题</h3> </div> </section> <div class="bs-example bs-example-type"> <table class="table"> <tbody> <tr> <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td> </tr> <tr> <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td> </tr> <tr> <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td> </tr> <tr> <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td> </tr> <tr> <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td> </tr> <tr> <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td> </tr> </tbody> </table> </div> </div>
页面主体
Bootstrap框架默认将全局的字体大小设置为14px,行高度设置为20px,并将这些属性直接赋予<body>中的元素和所有段落元素。此外,段落<p>元素被设置为0.5倍的行高(即10px)的底部外边距(margin);同时,通过添加.lead类可以让段落突出显示。
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 页面主体</h3> </div> </section> <div class="bs-docs-example"> <p>Bootstrap框架默认将全局的字体大小设置为14px,行高度设置为20px,并且这些属性会直接赋予<body>中的元素和所有段落元素。</p> <p>此外,段落元素还被设置了等于0.5倍行高(即10px)的底部外边距(margin);同时,通过添加.lead类可以让段落突出显示。</p> </div> <div class="bs-docs-example"> <p class="lead">通过添加 <code>.lead</code> 让段落突出显示</p> </div> </div>
强调
Bootstrap框架针对页面需要强调的元素,优化设计了加粗、斜体、对齐和颜色强调等样式,直接使用HTML元素标签并辅助一些样式即可。
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 强调样式</h3> </div> </section> <div class="bs-docs-example"> <p><strong>用增加font-weight值的方式加粗强调一段文本</strong>.</p> </div> <div class="bs-docs-example"> <p><em>还可以用斜体字强调一段文本</em>.</p> </div> <div class="bs-docs-example"> <p><small>对于不需要强调的inline或block类型的文本使用small标签</small>.</p> </div> <div class="bs-docs-example"> <p><strong>通过对齐方式也可以强调一段文本</strong>.</p> <p class="text-left">左对齐文字</p> <p class="text-center">中间对齐文字</p> <p class="text-right">右侧对齐文字</p> </div> <div class="bs-docs-example"> <p><strong>通过工具类使用颜色来强调不同类别文本</strong>.</p> <p class="muted">This is muted text by '.muted' class.</p> <p class="text-warning">This is warning text by '.text-warning' class.</p> <p class="text-error">This is error text by '.text-error' class.</p> <p class="text-info">This is info text by '.text-info' class.</p> <p class="text-success">This is success text by '.text-success' class.</p> </div> </div>
缩略语
Bootstrap框架实现了对缩略语<abbr>元素的增强样式,当鼠标悬停在缩写词上会显示出完整的文本内容。缩略语元素带有title属性,外观展现为带有浅色的虚线框,当鼠标移至上面是会变成带有“问号”的指针。
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 缩略语</h3> </div> </section> <div class="bs-docs-example"> <p>当把鼠标悬停在缩略语<abbr title="abbreviation">abbr</abbr>标签上需要看到完整文本内容就要使用title属性.</p> </div> </div>
地址
Bootstrap框架为地址<address>标签设置了增强样式,相关地址信息会以常规的形式呈现在页面上。<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 地址</h3> </div> </section> <div class="bs-docs-example"> <address> <strong>Bootstrap, Inc.</strong><br> ABC Street 688号, 北京, 中国<br> <abbr title="Telphone Number">tel:</abbr> (12)3456-7890 </address> <address> <strong>姓名</strong><br> <a href="mailto:#">[email protected]</a> </address> </div>
引用
Bootstrap框架为地址<blockquotes>标签设置了增强样式,引用学术网站中的文献、论文或文档资源。<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 引用</h3> </div> </section> <div class="bs-docs-example"> <blockquote> <p>在标准的引用里,可以很简单的改变风格和内容.</p> <p>添加small标签来注明引用来源,来源名称可以放在cite标签里面.</p> <small>Cite in <cite title="Bootstrap Inc.">bootstrap.com</cite></small> </blockquote> </div> <div> <blockquote class="pull-right"> <!-- .pull-right类实现了另一种风格的引用--> <p>在标准的引用里,可以很简单的改变风格和内容.</p> <p>添加small标签来注明引用来源,来源名称可以放在cite标签里面.</p> <small>Cite in <cite title="Bootstrap Inc.">bootstrap.com</cite></small> </blockquote> </div> </div>
列表
Bootstrap框架针对列<li>表实现增强样式,包括无序列表<ul>、有序列表<ol>、无样式列表(.unstyled)和内联式列表(.inline)等。
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 列表(无序列表)</h3> </div> </section> <div class="bs-docs-example"> <ul> <li>Tom</li> <li>Jack</li> <li>Sub List <ul> <li>Football</li> <li>NBA</li> <li>Baseball</li> </ul> </li> <li>123.com</li> <li>abc.com</li> </ul> </div> </div>
描述
描述是HTML5新增的功能标签,是对列表标签<dl>-<dt>-<dd>功能延伸,主要包括默认描述样式和水平描述样式两类。
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 默认描述样式</h3> </div> </section> <div class="bs-docs-example"> <dl> <dt>Bootstrap</dt>
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 列表(内联式列表)</h3> </div> </section> <div class="bs-docs-example"> <ul class="inline"> <li>Tom</li> <li>Jack</li> <li>Football</li> <li>NBA</li> <li>Baseball</li> <li>123.com</li> <li>abc.com</li> </ul> </div> </div>
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 水平描述样式</h3> </div> </section> <div class="bs-docs-example"> <dl class="dl-horizontal"> <dt>Bootstrap</dt> <dd>Bootstrap is a CSS framework.</dd> <dt>CSS</dt> <dd>CSS is Cascading Style Sheet.</dd> <dd>CSS 3 is the updated version.</dd> <dt>HTML 5</dt> <dd>HTML 5, CSS & Bootstrap....</dd> </dl> </div> </div>
代码
代码是HTML5新增的功能标签,可以在文本中显示代码样式的内容,主要包括内联式代码<code>和基本代码块<pre>两类。
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 代码(内联式)</h3> </div> </section> <div class="bs-docs-example"> inline code: <code>alert('this is inline code.')</code>. </div> </div>
<div class="container"> <section id="global"> <div class="page-header"> <h3>基本CSS样式 - 基本代码块</h3> </div> </section> <!--<div class="bs-docs-example"> pre code: <pre>var i=1;<br>var j=2;<br>alert(i+j);</pre> </div>--> <div class="bs-docs-example"> <pre class="prettyprint linenums" style="margin-bottom: 4px;">var i=1;<br>var j=2;<br>alert(i+j);</pre> </div> <!--<div class="bs-docs-example"> <pre class="pre-scrollable">var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br>var i=1;<br>var j=2;<br>alert(i+j);<br></pre> </div>--> </div>