Bootstrap- HTML清單與按鈕樣式

by vivid 26. 八月 2015 05:25

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N150816202
出刊日期:2015/08/26
開發工具:Visual Studio 2013 Ultimate Update 4
版本:bootstrap 3.3.4

在這一篇文章中,我們將介紹在Bootstrap中,針對HTML<ol>與<ul>清單,與按鈕的常用樣式。

清單樣式

在HTML之中,可以使用<ul>(無序清單)與<ol>(有序清單)標籤來顯示清單內容。Bootstrap為它們重新設計樣式,若有HTML程式碼如下:

<div class="container">
  <ol>
    <li> 項目 1 </li>
    <li> 項目 2 </li>
    <li> 項目 3 </li>
    <li> 項目 4 </li>
  </ol>

  <ul>
    <li> 項目 1 </li>
    <li> 項目 2 </li>
    <li> 項目 3 </li>
    <li> 項目 4 </li>
  </ul>

</div>

預設在網頁執行的結果如下圖所示,<ol>(有序清單)的清單項目前方會有數字編號;<ul>(無序清單)的清單項目前方會出現清單符號:

clip_image002

圖 1

若你不想要顯示每一個項目前方的編號或清單項目符號,可以在<ul>或<ol>標籤套用「list-unstyled」樣式,參考以下範例程式碼:

<ol class="list-unstyled">
  <li> 項目 1 </li>
  <li> 項目 2 </li>
  <li> 項目 3 </li>
  <li> 項目 4 </li>
</ol>

<ul class="list-unstyled">
  <li> 項目 1 </li>
  <li> 項目 2 </li>
  <li> 項目 3 </li>
  <li> 項目 4 </li>
</ul>

 

在網頁執行的結果如下圖所示:

clip_image004

圖 2

讓我們再來美化一下它,在<ul>或<ol>標籤套用「list-inline」樣式則可以使用水平方向排列清單中的項目,參考以下範例程式碼:

<div class="container">
  <ol class="list-inline">
    <li>項目 1</li>
    <li>項目 2</li>
    <li>項目 3</li>
    <li>項目 4</li>
  </ol>

  <ul class="list-inline">
    <li>項目 1</li>
    <li>項目 2</li>
    <li>項目 3</li>
    <li>項目 4</li>
  </ul>
</div>


 

在網頁執行的結果如下圖所示:

clip_image006

圖 3

清單項目分組

在<ul>或<ol>標籤套用「list-group」樣式可以讓清單項目在外觀上看起來像一個群組,參考以下範例程式碼:

<ol class="list-group">
  <li class="list-group-item" >項目 1</li>
  <li class="list-group-item" >項目 2</li>
  <li class="list-group-item" >項目 3</li>
  <li class="list-group-item" >項目 4</li>
</ol>

<ul class="list-group">
  <li class="list-group-item">項目 1</li>
  <li class="list-group-item">項目 2</li>
  <li class="list-group-item">項目 3</li>
  <li class="list-group-item">項目 4</li>
</ul>

 

在網頁執行的結果如下圖所示,群組的四個邊角採用圓角方式呈現:

clip_image008

圖 4

清單項目前景、背景顏色

預設清單項目可以套用「list-group-item-danger」、「list-group-item-info」、「list-group-item-success」與「list-group-item-warning」等四種樣式來決定前景、背景顏色,參考以下範例程式碼:

<ol class="list-group">     
  <li class="list-group-item list-group-item-danger"> danger </li>     
  <li class="list-group-item list-group-item-info"> info </li>
  <li class="list-group-item list-group-item-success"> success </li>   
  <li class="list-group-item list-group-item-warning"> warning </li>   
</ol>

<ul class="list-group">     
  <li class="list-group-item list-group-item-danger"> danger </li>     
  <li class="list-group-item list-group-item-info"> info </li>
  <li class="list-group-item list-group-item-success"> success </li>   
  <li class="list-group-item list-group-item-warning"> warning </li>   
</ul>

 

在網頁執行的結果如下圖所示:

clip_image010

圖 5

自訂樣式

若<li>清單項目中的內容不只是一個單純的文字,可能包含其它的HTML標籤,則你可以使用「list-group-item-heading」與「list-group-item-text」樣式來自定清單中的標題與內容。例如以下範例程式碼,使用<h3>標籤當作清單項目的標題,<p>標籤顯示描述文字:

<ol class="list-group">
  <li class="list-group-item">
        <h3 class="list-group-item-heading">
          項目 1
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
  <li class="list-group-item">
        <h3 class="list-group-item-heading">
          項目 2
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
  <li class="list-group-item">
        <h3 class="list-group-item-heading">
          項目 3
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
  <li class="list-group-item">
        <h3 class="list-group-item-heading">
          項目 4
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
</ol>

<ul class="list-group">
  <li class="list-group-item">
        <h3 class="list-group-item-heading">
          項目 1
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
  <li class="list-group-item">
        <h3 class="list-group-item-heading">
          項目 2
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
  <li class="list-group-item">
        <h3 class="list-group-item-heading">
          項目 3
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
  <li class="list-group-item">
        <h3 class="list-group-item-heading">
          項目 4
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
</ul>

 

不管是用的是<ul>或<ol>標籤定義的清單群組,它們在瀏覽器中看起來的樣子都一樣,請參考下圖所示:

clip_image012

圖 6

使用Badge

「badge」樣式可以在<li>清單項目的右上方,顯示一些額外的資訊,通常顯示統計或彙總的數值,參考以下範例程式碼:

<ol class="list-group">
  <li class="list-group-item"><span class="badge">1</span>項目 1</li>
  <li class="list-group-item"><span class="badge">2</span>項目 2</li>
  <li class="list-group-item"><span class="badge">3</span>項目 3</li>
  <li class="list-group-item"><span class="badge">4</span>項目 4</li>
</ol>

<ul class="list-group">
  <li class="list-group-item"><span class="badge">1</span>項目 1</li>
  <li class="list-group-item"><span class="badge">2</span>項目 2</li>
  <li class="list-group-item"><span class="badge">3</span>項目 3</li>
  <li class="list-group-item"><span class="badge">4</span>項目 4</li>
</ul>

 

在網頁執行的結果如下圖所示:

clip_image014

圖 7

在自訂樣式的情況下,也可以搭配badge使用,參考以下範例程式碼:

<ol class="list-group">
      <li class="list-group-item">
        <span class="badge">100</span>
        <h3 class="list-group-item-heading">
          項目 1
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
      <li class="list-group-item">
        <span class="badge">80</span>
        <h3 class="list-group-item-heading">
          項目 2
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
      <li class="list-group-item">
        <span class="badge">60</span>
        <h3 class="list-group-item-heading">
          項目 3
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
      <li class="list-group-item">
        <span class="badge">40</span>
        <h3 class="list-group-item-heading">
          項目 4
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
    </ol>

    <ul class="list-group">
      <li class="list-group-item">
        <span class="badge">100</span>
        <h3 class="list-group-item-heading">
          項目 1
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
      <li class="list-group-item">
        <span class="badge">80</span>
        <h3 class="list-group-item-heading">
          項目 2
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
      <li class="list-group-item">
        <span class="badge">60</span>
        <h3 class="list-group-item-heading">
          項目 3
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
      <li class="list-group-item">
        <span class="badge">40</span>
        <h3 class="list-group-item-heading">
          項目 4
        </h3>
        <div class="list-group-item-text">
          Consectetur adipiscing elit fusce vel.
        </div>
      </li>
    </ul>

 

在網頁執行的結果如下圖所示:

clip_image016

圖 8

使用超連結代替清單項目

<ul>或<ol>標籤中的<li>項目,可以直接使用超連結(<a>標籤)來取代之,參考以下範例程式碼:

 

<ol class="list-group ">
  <a class="list-group-item"href="#">項目 1</a>
  <a class="list-group-item"href="#">項目 2</a>
  <a class="list-group-item"href="#">項目 3</a>
  <a class="list-group-item"href="#">項目 4</a>
</ol>

<ul class="list-group " >
  <a class="list-group-item" href="#">項目 1</a>
  <a class="list-group-item" href="#">項目 2</a>
  <a class="list-group-item" href="#">項目 3</a>
  <a class="list-group-item" href="#">項目 4</a>
</ul>


則在網頁檢視時,當滑鼠移動到<a>項目上方,會自動將此項目的背景顏色設定比較醒目的灰色。當你選取其中的項目時,此項目的背景顏色就會被設定為灰色:

clip_image018

圖 9

使用超連結與按鈕

在Bootstrap的設計中,超連結(<a>)與按鈕(button)、Input按鈕(Input(type=button))的外觀可以完全相同長的像按鈕,也可以反過來,讓它們長的像超連結。例如以下程式碼使用了<a>、<button>與<Input > (type=button)三種標籤,它們皆套用「btn btn-primary」樣式,「btn」樣式會讓他們看起來像按鈕,而「btn-primary」樣式則讓背景變成藍色:

<a href="#" class="btn btn-primary" role="button"> Anchor </a>
<button class="btn btn-primary"> Button </button>
<input type="button" class="btn btn-primary" value="Input Button" />

為了遵循ARIA (Accessible Rich Internet Applications)的定義,<a>標籤設定「role="button"」attribute,以便於讓螢幕助讀程式能夠提供正確的資訊給使用者。這三個標籤套用樣式之後,在瀏覽器中看起來如下圖所示:

clip_image020

圖 10

若要讓它們看起來像超連結,則可以套用「btn-link」樣式,參考以下程式碼片段:

<a href="#" class="btn btn-link" > Anchor </a>
<button class="btn btn-link" role="link"> Button </button>
<input type="button" class="btn btn-link" role="link" value="Input Button" />

在瀏覽器中看起來如下圖所示:

clip_image022

圖 11

同樣的道理,「role="link"」也是為了螢幕助讀程式才添加的。

 

按鈕顏色

在上個例子中,我們使用「btn-primary」樣式,讓按鈕有藍色的背景顏色,此外,你還有其它選擇,參考以下程式碼範例:

<button class="btn btn-default"> default </button>
<button class="btn btn-primary"> primary </button>
<button class="btn btn-success"> success </button>
<button class="btn btn-info"> info </button>
<button class="btn btn-warning"> warning </button>
<button class="btn btn-danger"> danger </button>

在瀏覽器中看起來如下圖所示:

clip_image024

圖 12

按鈕尺寸

按鈕具備多種尺寸可供選擇,不需再額外撰寫CSS處理,你可以套用「btn-xs」、「btn-sm」、「btn-md」、「btn-lg」來決定他們的大小:

<button class="btn btn-primary btn-xs"> btn-xs </button>
<button class="btn btn-primary btn-sm"> btn-sm </button>
<button class="btn btn-primary btn-md"> btn-md </button>
<button class="btn btn-primary btn-lg"> btn-lg </button>
<br />
<br />
<button class="btn btn-primary btn-lg btn-block"> block </button>

若設定「btn-block」樣式,則按鈕將與隨著瀏覽器寬度改變大小,這個範例在瀏覽器中看起來如下圖所示:

clip_image026

圖 13

按鈕狀態

按鈕可以是active與disabled兩種狀態:

<button class="btn btn-primary"> Button </button>
<button class="btn btn-primary active"> active </button>
<button class="btn btn-primary disabled"> disabled </button>

第一個按鈕套用「btn-primary」樣式,背景為藍色;第二個按鈕套用「active」樣式,代表按鈕被選取,會套用較深的背景顏色;而第三個按鈕套用「disabled」樣式,代表不能選取,背景顏色較淺。

clip_image028

圖 14

Tags:

.NET Magazine國際中文電子雜誌 | Bootstrap | 許薰尹Vivid Hsu

評論 (60) -

cours de theatre
cours de theatre United States
2017/10/1 上午 02:39:18 #

I really like and appreciate your article post.Really looking forward to read more.

回覆

can ho dic phoenix
can ho dic phoenix United States
2017/10/6 下午 11:31:43 #

Fantastic blog post.Thanks Again. Cool.

回覆

Google cheat 2017
Google cheat 2017 United States
2017/10/9 下午 01:26:47 #

Very informative article post.Thanks Again. Keep writing.

回覆

sklep z lekami na potencje
sklep z lekami na potencje United States
2017/10/9 下午 03:04:32 #

Im grateful for the article.Much thanks again. Really Cool.

回覆

can ho bien vung tau
can ho bien vung tau United States
2017/10/9 下午 05:21:16 #

I truly appreciate this article.Really looking forward to read more. Really Great.

回覆

solarmovie
solarmovie United States
2017/10/10 下午 07:09:30 #

Thanks for sharing, this is a fantastic post.Really thank you! Keep writing.

回覆

Sterling Businesses Ltd
Sterling Businesses Ltd United States
2017/10/10 下午 09:16:08 #

Great blog post.Really thank you! Cool.

回覆

buy hacklinks
buy hacklinks United States
2017/10/12 下午 07:59:18 #

Appreciate you sharing, great article. Cool.

回覆

i thought about this
i thought about this United States
2017/10/14 下午 02:40:23 #

Major thanks for the article.Really thank you! Will read on...

回覆

dragon city hacks
dragon city hacks United States
2017/10/15 下午 02:42:00 #

wow, awesome article post.Thanks Again. Really Great.

回覆

omega xl review
omega xl review United States
2017/10/15 下午 07:24:13 #

Major thanks for the blog post.Much thanks again. Cool.

回覆

i loved this
i loved this United States
2017/10/17 下午 01:59:30 #

Really informative article post.

回覆

sletrokor review
sletrokor review United States
2017/10/17 下午 07:32:08 #

Very good post.Thanks Again. Much obliged.

回覆

The Avila 2
The Avila 2 United States
2017/10/19 上午 04:54:16 #

Hey, thanks for the post.Really thank you! Great.

回覆

VigRx Plus Reviews
VigRx Plus Reviews United States
2017/10/19 上午 06:36:11 #

Thank you ever so for you article post.

回覆

weblink
weblink United States
2017/10/19 下午 05:25:01 #

Thank you ever so for you blog article.Really thank you! Want more.

回覆

pure slim 1000 review
pure slim 1000 review United States
2017/10/20 上午 02:55:40 #

I really enjoy the blog post.Really looking forward to read more. Really Cool.

回覆

DIC Phoenix
DIC Phoenix United States
2017/10/21 上午 02:38:10 #

Muchos Gracias for your article.Really looking forward to read more.

回覆

carte grise en ligne
carte grise en ligne United States
2017/10/21 上午 06:15:59 #

Hey, thanks for the article post.Really thank you! Awesome.

回覆

elakekassa suomi
elakekassa suomi United States
2017/10/21 下午 04:40:41 #

Great, thanks for sharing this blog article.Really thank you! Will read on...

回覆

du an osimi
du an osimi United States
2017/10/28 上午 09:26:53 #

I truly appreciate this blog post.Thanks Again. Keep writing.

回覆

EZ Battery Reconditioning Review
EZ Battery Reconditioning Review United States
2017/10/30 上午 08:19:08 #

I appreciate you sharing this post.Really looking forward to read more. Really Great.

回覆

plock wiadomosci
plock wiadomosci United States
2017/10/30 下午 04:04:49 #

Very informative article post.Thanks Again. Great.

回覆

phentaslim review
phentaslim review United States
2017/11/3 上午 10:54:00 #

Thanks for the post.Really looking forward to read more. Will read on...

回覆

avocat criminel quebec
avocat criminel quebec United States
2017/11/16 下午 08:42:28 #

A round of applause for your post.Much thanks again. Really Cool.

回覆

Great, thanks for sharing this post.Really thank you! Fantastic.

回覆

bikinis
bikinis United States
2017/11/24 上午 12:15:47 #

Thanks for sharing, this is a fantastic blog.Thanks Again. Fantastic.

回覆

Chad Boonswang and Jeffrey Goodman
Chad Boonswang and Jeffrey Goodman United States
2017/11/26 下午 08:20:07 #

Thank you for your blog post. Awesome.

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/27 上午 02:31:07 #

Great blog article.Thanks Again. Want more.

回覆

cash for cars
cash for cars United States
2017/11/29 下午 06:53:58 #

Wow, great blog.Really thank you! Much obliged.

回覆

porno
porno United States
2017/12/1 下午 07:00:19 #

I appreciate you sharing this blog.Really thank you!

回覆

Get Business Credit
Get Business Credit United States
2017/12/3 上午 07:11:53 #

Great article.Really thank you! Cool.

回覆

mobil porn
mobil porn United States
2017/12/5 下午 12:02:39 #

A round of applause for your blog post.Really thank you!

回覆

I truly appreciate this post.Much thanks again. Fantastic.

回覆

Thanks-a-mundo for the blog.Really thank you! Much obliged.

回覆

Linh Madray
Linh Madray United States
2017/12/14 上午 11:41:53 #

Thanks again for the article post.Much thanks again.

回覆

Your Domain Name
Your Domain Name United States
2017/12/14 下午 06:37:49 #

Muchos Gracias for your blog.Much thanks again. Fantastic.

回覆

Hanukkah
Hanukkah United States
2017/12/15 上午 01:11:55 #

Awesome blog.Thanks Again. Will read on...

回覆

canon drivers
canon drivers United States
2017/12/16 下午 08:15:38 #

Fantastic article post.Much thanks again. Want more.

回覆

I am so grateful for your blog post.Really looking forward to read more. Keep writing.

回覆

Very good blog post.Much thanks again. Want more.

回覆

Strategic
Strategic United States
2017/12/17 下午 07:51:27 #

A big thank you for your article.Really looking forward to read more. Much obliged.

回覆

jobs at home
jobs at home United States
2017/12/20 下午 09:14:13 #

Very neat blog post.Really thank you! Will read on...

回覆

canon drivers
canon drivers United States
2017/12/23 上午 07:06:52 #

A big thank you for your blog article.Much thanks again. Really Cool.

回覆

Darwin Horan
Darwin Horan United States
2017/12/23 下午 05:35:08 #

Im thankful for the post.Really looking forward to read more. Really Cool.

回覆

Thanks a lot for the blog post.Really looking forward to read more. Want more.

回覆

hp driver
hp driver United States
2017/12/25 下午 07:07:39 #

I appreciate you sharing this article post.Thanks Again. Fantastic.

回覆

Very informative blog article.Really thank you! Much obliged.

回覆

I appreciate you sharing this blog article. Awesome.

回覆

canon printer series
canon printer series United States
2017/12/27 下午 04:50:00 #

Enjoyed every bit of your blog post.Really looking forward to read more. Awesome.

回覆

hp drivers
hp drivers United States
2018/1/2 上午 07:34:13 #

Major thanks for the article post.

回覆

click now
click now United States
2018/1/2 下午 03:33:20 #

Thank you for your post.Thanks Again. Really Great.

回覆

Say, you got a nice post.Thanks Again. Will read on...

回覆

printer driver
printer driver United States
2018/1/3 上午 06:53:41 #

Appreciate you sharing, great article.Thanks Again. Keep writing.

回覆

bitcoin casino usa
bitcoin casino usa United States
2018/1/4 下午 05:28:06 #

Fantastic blog article. Cool.

回覆

hp driver
hp driver United States
2018/1/5 下午 04:25:53 #

A big thank you for your blog.Thanks Again. Awesome.

回覆

FBA
FBA United States
2018/1/6 上午 08:30:39 #

Looking forward to reading more. Great blog article.Really looking forward to read more. Really Cool.

回覆

colocation miami
colocation miami United States
2018/1/10 下午 03:04:53 #

Really informative post.Really looking forward to read more. Awesome.

回覆

xwJFMewf5hB
xwJFMewf5hB United States
2020/9/17 下午 09:57:37 #

803523 160553I  truly   treasure your  piece of function, Wonderful post. CHECK ME OUT BY CLICKING MY NAME!!! 92202

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List