DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 第三章之Bootstrap 表格與按鈕功能
第三章之Bootstrap 表格與按鈕功能
編輯:關於JavaScript     

Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。

學習要點:

1.表格

2.按鈕

本節課我們主要學習一下 Bootstrap 表格和按鈕功能,通過內置的 CSS 定義,顯示各種豐富的效果。

一.表格

Bootstrap 提供了一些豐富的表格樣式供開發者使用。

1.基本格式

//實現基本的表格樣式
<table class="table"> 

注:我們可以通過 Firebug 查看相應的 CSS。

2.條紋狀表格

//讓<tbody>裡的行產生一行隔一行加單色背景效果
<table class="table table-striped"> 

注:表格效果需要基於基本格式.table

3.帶邊框的表格

//給表格增加邊框
<table class="table table-bordered"> 

4.懸停鼠標

//讓<tbody>下的表格懸停鼠標實現背景效果
<table class="table table-hover"> 

5.狀態類

//可以單獨設置每一行的背景樣式
<tr class="success"> 

注:一共五種不同的樣式可供選擇。

樣式說明:

  active鼠標懸停在行或單元格上
  success標識成功或積極的動作
  info標識普通的提示信息或動作
  warning標識警告或需要用戶注意
  danger表示危險或潛在的帶來負面影響的動作

6.隱藏某一行

//隱藏行
<tr class="sr-only"> 

7.響應式表格

//表格父元素設置響應式,小於 768px 出現邊框
<body class="table-responsive"> 

二.按鈕

Bootstrap 提供了很多豐富按鈕供開發者使用。

1.可作為按鈕使用的標簽或元素

//轉化成普通按鈕
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input"> 

注意事項有三點:

(1).針對組件的注意事項

雖然按鈕類可以應用到 <a> 和 <button> 元素上,但是,導航和導航條組件只支持<button> 元素。

(2).鏈接被作為按鈕使用時的注意事項

如果 <a> 元素被作為按鈕使用 -- 並用於在當前頁面觸發某些功能 -- 而不是用於鏈接其他頁面或鏈接當前頁面中的其他部分,那麼,務必為其設置 role="button" 屬性。

(3).跨浏覽器展現

我們總結的最佳實踐是:強烈建議盡可能使用 <button> 元素來獲得在各個浏覽器上獲得相匹配的繪制效果。

另外,我們還發現了 Firefox <30 版本的浏覽器上出現的一個 bug,其表現是:阻止我們為基於 <input> 元素所創建的按鈕設置 line-height 屬性,這就導致在Firefox 浏覽器上不能完全和其他按鈕保持一致的高度。

2.預定義樣式

//一般信息
<button class="btn btn-info">Button</button> 

樣式說明

  btn-default默認樣式
  btn-success成功樣式
  btn-info一般信息樣式
  btn-warning警告樣式
  btn-danger危險樣式
  btn-primary首選項樣式
  btn-link鏈接樣式

3.尺寸大小

//從大到小的尺寸
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button> 

4.塊級按鈕

//塊級換行
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button> 

5.激活狀態

//激活按鈕
<button class="btn active">Button</button> 

6.禁用狀態

//禁用按鈕
<button class="btn active disabled">Button</button>

以上所述是小編給大家介紹的Bootstrap 表格與按鈕功能,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved