[學習筆記] BootStrap(一):排版(主副標題,文字等)

排版

標題

主標題

h1-h6:<h1>一級標題</h1>

副標題

有2中寫法,推薦 <small>

<h1>一級主標題 <small> 一級副標題 </small> </h1>
<h1>一級主標題  <span class='small'>一級副標題</span> </h1>

文字強調

斜體

<em> 哦, 我居然是斜的 </em>

加粗

<strong> I'm very Black? </strong>

變小(85%與父容器)

<small> 還是我small標籤 </small>

文字排版(居中,居左,居右)

<p class='text-left' > 文本居左的默認效果 </p>
<p class='text-center' > 文本居中的樣子,Is't Cool? </p>
<p class='text-right' > 文本居右對齊! </p>

文字顏色強調(p,s,i,w,d,m)

1-6:主要強調,成功提示,一般信息,警告文本,危險提示,減弱文本

<p class='text-primary' > This has primary class Text! </p>
<p class='text-success' > This has success class Text! </p>
<p class='text-info' > This has info class Text ! </p>
<p class='text-warning' > This has warning class Text ! </p>
<p class='text-danger' > This has danger class Text ! </p>
<p class='text-muted' > Thies has muted class Text ! </p>

縮寫

<abbr title='完整文本是我,我很長所以縮寫了,對,就是你要的15字' > HoverHere </abbr><br/>
<abbr title='完整文本是我,我很長所以縮寫了,對,就是你要的15字' class='initialism' > 比上面細 </abbr>

地址標籤address,沒啥用啊…..

<address>
    <strong>Name:Gudqs</strong><br/>
    <em>Address:No Address,no home....</em>
    <abbr title='Phone'>P</abbr>:110119120112114
</address>

引用<blockquote>

1:簡單引用
2.帶原文出處
3.右下角引用

<blockquote>
    我旁邊有個豎線,說明我是引用!
</blockquote>


<blockquote>
    我旁邊有個豎線,說明我是引用!
    <small>沃孜基.碩德</small>
</blockquote>


<blockquote class='pull-right'>
    我旁邊有個豎線,說明我是引用!
    <small>沃孜基.碩德</small>
</blockquote>

列表(ul,ol,dl)

值得一說的是內嵌列表(類似於導航欄的雛形,大概用了浮動)
以及豎向水平的定義列表

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>無序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定義樣式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>內聯列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定義列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定義列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

代碼與代碼

可以與其他標籤放一起內聯的代碼塊

<p>我是<code>內聯塊</code>纔怪嘞!</p>

獲取你需要多行代碼顯示:

<pre>
public void static main(String []args){
    System.out.print('I want to be a Full-statck programer!')!
}
</pre>

上面有啥錯?