-
當然表單除了這幾個元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過定制了一個類名`form-control`，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定制效果。 1、寬度變成了100% 2、設置了一個淺灰色（#ccc）的邊框 3、具有4px的圓角 4、設置陰影效果，并且元素得到焦點之時，陰影和邊框效果會有所變化 5、設置了placeholder的顏色為#999查看全部
-
表格--響應式表格 隨著各種手持設備的出現，要想讓你的Web頁面適合千羅萬像的設備瀏覽，響應式設計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果，將其稱為響應式表格。 Bootstrap提供了一個容器，并且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然后將<table class="table">置于這個容器當中，這樣表格也就具有響應式效果。 Bootstrap中響應式表格效果表現為：當你的瀏覽器可視區域小于768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時，表格底部水平滾動條就會消失。查看全部
-
表格--緊湊型表格 何謂緊湊型表格，簡單理解，就是單元格沒內距或者內距較其他表格的內距更小。換句話說，要實現緊湊型表格只需要重置表格單元格的內距padding的值。那么在Bootstrap中，通過類名“table-condensed”重置了單元格內距值。 緊湊型表格的運用，也只是需要在<table class="table">基礎上添加類名“table-condensed”： <table class="table table-condensed"> … </table>查看全部
-
表格--鼠標懸浮高亮的表格 當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數據。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現這種表格效果。 鼠標懸停高亮的表格使用也簡單，僅需要<table class="table">元素上添加類名“table-hover”即可： <table class="table table-hover"> … </table>查看全部
-
表格--帶邊框的表格 基礎表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。 Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎表格<table class="table">基礎上添加一個“.table-bordered”類名即可： <table class="table table-bordered"> … </table>查看全部
-
表格--斑馬線表格 在Bootstrap中實現這種表格效果并不困難，只需要在<table class="table">的基礎上增加類名“.table-striped”即可： <table class="table table-striped"> … </table> 其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現原理也非常的簡單，利用CSS3的結構性選擇器“:nth-child”來實現，所以對于IE8以及其以下瀏覽器，沒有背景條紋效果。查看全部
-
“.table”主要有三個作用： ? 給表格設置了margin-bottom:20px以及設置單元內距 ? 在thead底部設置了一個2px的淺灰實線 ? 每個單元格頂部設置了一個1px的淺灰實線查看全部
-
表格--表格行的類 Bootstrap還為表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示： http://img1.sycdn.imooc.com//53ad213f0001b08807340508.jpg查看全部
-
表格 Bootstrap為表格不同的樣式風格提供了不同的類名，主要包括： ? .table：基礎表格 ? .table-striped：斑馬線表格 ? .table-bordered：帶邊框的表格 ? .table-hover：鼠標懸停高亮的表格 ? .table-condensed：緊湊型表格 ? .table-responsive：響應式表格查看全部
-
Bootstrap也考慮到這一點，你只需要在pre標簽上添加類名“.pre-scrollable”，就可以控制代碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條。查看全部
-
代碼（一） 本節內容相對來說比較簡單，一般在個人博客上使用的較為頻繁，用于顯示代碼的風格。在Bootstrap主要提供了三種代碼風格： 1、使用<code></code>來顯示單行內聯代碼 2、使用<pre></pre>來顯示多行塊代碼 3、使用<kbd></kbd>來顯示用戶輸入代碼查看全部
-
列表--水平定義列表 水平定義列表就像內聯列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現水平顯示效果。查看全部
-
列表--簡介 在HTML文檔中，列表結構主要有三種：有序列表、無序列表和定義列表。具體使用的標簽說明如下： 無序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定義列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootstrap根據平時的使用情形提供了六種形式的列表： ? 普通列表 ? 有序列表 ? 去點列表 ? 內聯列表 ? 描述列表 ? 水平描述列表查看全部
-
文本對齊風格 ? 左對齊，取值left ? 居中對齊，取值center ? 右對齊，取值right ? 兩端對齊，取值justify Bootstrap通過定義四個類名來控制文本的對齊風格： ? .text-left：左對齊 ? .text-center：居中對齊 ? .text-right：右對齊 ? .text-justify：兩端對齊查看全部
-
強調文字 .text-muted：提示，使用淺灰色（#999） .text-primary：主要，使用藍色（#428bca） .text-success：成功，使用淺綠色(#3c763d) .text-info：通知信息，使用淺藍色（#31708f） .text-warning：警告，使用黃色（#8a6d3b） .text-danger：危險，使用褐色（##a94442）查看全部
舉報
0/150
提交
取消