Bootstrap學習之三：使用排版

時間 2019-11-13

原文原文鏈接

@(Bootstrap)[網頁] ##導言本篇文章中將會學習bootstrap中用於排版的元素 （因爲用的MarkDown編輯器toc生成的目錄，把標題下的幾個演示標題也生成了，真的是呵呵噠）css

[toc]html

##1.標題前端

HTML 中的全部標題標籤，h1到h6都可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式。包含small標籤，用來標記副標題。下面咱們來看下實例，部分源碼以下bootstrap

<div class="col-md-12">
				<h1>1.我是浩子<small>hehe</small></h1>
				<h2>2.我是肚子<small>hehe</small></h2>
				<h3>3.我是小胖<small>hehe</small></h3>
				<h4>4.我是呵呵<small>hehe</small></h4>
				<h5>5.我是彬哥<small>hehe</small></h5>
				<h6>6.我是泡泡<small>hehe</small></h6>
			</div>

顯示結果以下編輯器

<div class="col-md-12"> <h1>1.我是浩子<small>hehe</small></h1> <h2>2.我是肚子<small>hehe</small></h2> <h3>3.我是小胖<small>hehe</small></h3> <h4>4.我是呵呵<small>hehe</small></h4> <h5>5.我是彬哥<small>hehe</small></h5> <h6>6.我是泡泡<small>hehe</small></h6> </div>佈局

##2.頁面主題 Bootstrap 將全局 font-size 設置爲 14px，line-height 設置爲 1.428。這些屬性直接賦予 <body> 元素和全部段落元素。另外，p元素（段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。部分源碼學習

<div class="col-md-12">
	<h1  class="page-header">頁面主體</h1>
	<div>
 	<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p">

	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
					
	<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
	</div>
</div>

網頁顯示結果以下ui

<div class="col-md-12"> <h1 class="page-header">頁面主體</h1> <div> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p">指針

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
				
				<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
				</div>

</div> ##2.強調 **a.經過添加 .lead 類可讓段落突出顯示。**code

<p class="lead">...</p>

b.着重經過增長 font-weight 值強調一段文本。

<strong>rendered as bold text</strong>

c.用斜體強調一段文本。

<em>rendered as italicized text</em>

##3.對齊經過文本對齊 class，能夠簡單方便的將文字從新對齊。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p>

##4.強調 class

這些 class 經過顏色來表示強調。也能夠應用於連接，當鼠標盤旋於連接上時，其顏色會變深，就像默認的連接樣式。

<h1>強調 Class</h1>
<p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<h1></h1>

<h1>強調 Class</h1> <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <h1></h1> ##5.縮略語當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容，Bootstrap 實現了對 HTML 的 <abbr> 元素的加強樣式。縮略語元素帶有 title 屬性，外觀表現爲帶有較淺的虛線框，鼠標移至上面時會變成帶有「問號」的指針。如想看完整的內容可把鼠標懸停在縮略語上（對使用輔助技術的用戶也可見）, 但須要包含 title 屬性。

<abbr title="attribute">attr</abbr>

##6.地址讓聯繫信息以最接近平常使用的格式呈現。在每行結尾添加 <br> 能夠保留須要的樣式。

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address>

<address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> ##7.引用將任何 HTML 元素包裹在 blockquote 中便可表現爲引用樣式。對於直接引用，咱們建議用 p>標籤。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> 添加 footer用於標明引用來源。來源的名稱能夠包裹進 <cite>標籤中。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> 經過賦予 .blockquote-reverse 類可讓引用呈現內容右對齊的效果。 <blockquote class="blockquote-reverse"> ... </blockquote> ##8.列表 **無序列表用ul-li** **有序列表用ol-li** **無樣式列表** 移除了默認的 list-style 樣式和左側外邊距的一組元素（只針對直接子元素）。這這是針對直接子元素，也就是說，你須要對全部嵌套的列表都添加此 class 才能具備一樣的樣式。

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

內聯列表.list-inline 除了去點列表以外，Bootstrap還能夠經過添加類名「.list-inline」來實現內聯列表，簡單點說就是把垂直列表換成水平列表，並且去掉項目符號（編號），保持水平顯示。也能夠說內聯列表就是爲製做水平導航而生。 水平定義列表 .dl-horizontal

<dl class="dl-horizontal">
    <dt>標題一：</dt>
    <dd>描述內容，我很喜歡前端，也很喜歡響應式佈局，它能在個不一樣大小的屏幕下提供很好的體驗，我如今是初學者，可是我會越來強的</dd>
    <dt>標題二：標題二：標題二：標題二：</dt>
    <dd>描述內容</dd>
</dl>

<dl class="dl-horizontal"> <dt>標題一：</dt> <dd>描述內容，我很喜歡前端，也很喜歡響應式佈局，它能在個不一樣大小的屏幕下提供很好的體驗，我如今是初學者，可是我會越來強的</dd> <dt>標題二：標題二：標題二：標題二：</dt> <dd>描述內容</dd> </dl>

參考文檔 Bootstrap官方文檔推庫文章