bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名
表格：
bootstrap中用類定義了幾個風格的表格，使用時給table標簽加上類名即可，具體如下：
| .table | 基礎表格：標題加粗，只有水平的淡灰色邊框線條，沒有垂直方向的線條 |
| .table-striped | 條紋表格：標題加粗，隔行交替灰白兩色，沒有邊框線 |
| .table-bordered | 邊框表格：具有水平方向和垂直方向的淡灰色邊框線，標題加粗 |
| .table-hover | 鼠標懸停表格：加載完是一個基礎沒有邊框的表格，當鼠標經過某行時背景顏色變淡灰色 |
| . table-dark | 背景黑色表格：背景為黑色，字體為白色沒有邊框的表格 |
| 組合型 | 將上面的類名進行組合可以出現互相搭配的樣式 |
除以上給table標簽加類名的表格風格樣式外，bootstrap還給tr標簽提供了具有特殊意義的類名，這些類名具有不同的背景顏色（給table標簽加此類類名整個表格會是一個背景色，當然這類類名給其他容器同樣有背景色），具體如下：
| .table-primary | 藍色背景：表示重要 |
| .table-success | 綠色背景：表示可執行的 |
| .table-danger | 淺紅色背景：表示危險 |
| .table-info | 淡藍色背景：表示變更 |
| .table-warning | 淡黃色背景：表示需要注意 |
| .table-active | 淡灰色背景：表示將要操作 |
| .table-secondary | 灰色背景：表示內容不重要 |
| .table-light | 灰白色背景：可用于主體背景，比純白色較暗點 |
| .table-dark | 深灰色背景：可用于表格行的背景，類似灰色鉛筆色 |
除上面修飾表格的樣式類名外，bootstrap還提供了修飾表頭的樣式類名，使用時給thead標簽添加此類類名即可，具體如下：
| .thead-dark | 給表頭添加黑色背景（表頭字體顏色變白色） |
| .thead-light | 給表頭添加灰色背景（表頭字體顏色為黑色） |
小表格：如果是移動端開發，或者需要較小的表格風格，可以給table標簽加table-sm類名。
響應式表格：bootstrap提供了響應式表格，使用時給table的父級容器加table-responsive類名即可，當屏幕寬度尺寸大于992px時，不會出現滾動條，也是響應式表格，寬度小于992px時，會出現橫向滾動條，除此之外，bootstrap還提供了更精準的響應式尺寸類名，這里類名不僅可以用于表格，而且可以用于 子元素寬度大于父容器時，（實際上bootstrap中的很多類樣式可以用于不同的標簽，但是為了具有語義化，開發中建議根據前綴對類名合理使用），其它尺寸類名如下：
| .table-responsive-sm | 屏幕寬度 < 576px時出現滾動條 |
| .table-responsive-md | 屏幕寬度 < 768px時出現滾動條 |
| .table-responsive-lg | 屏幕寬度 < 992px時出現滾動條 |
| .table-responsive-xl | 屏幕寬度 < 1200px時出現滾動條 |
修飾圖片：
bootstrap提供了修飾img中圖片的樣式類名，使用時給img標簽添加此類類名即可，具體如下：
| .rounded | 圖片圓角：使img四角有很小的圓角 |
| .rounded-circle | 圖片橢圓：使img成橢圓形 |
| .img-thumbnail | 縮略圖：使img有邊框，圖片類似縮小 |
| .img-fluid | 響應式圖片：使圖片稱為響應式的，隨著屏幕尺寸變化而變化大小 |
浮動：
bootstrap中定義了float類，使用時直接給元素加此類類名即可，具體如：
| .float-right | 使元素向右浮動（右對齊） |
| .float-left | 使元素向左浮動（左對齊） |
| .clearfix | 清除浮動 |
| .float-S-P | 響應式浮動，其中S的值有：sm, md, lg ，xl；P的值有：left,rigth |
| float-none | 沒有浮動 |
背景框：
bootstrap提供了一類會創建大號背景框的樣式類，在這類背景框中可以繼續開發內容，可以理解為一個有樣式的div盒子，其具體如下：
| .jumbotron | 定義一個響應式灰色背景的框框，有默認高度，但是高度會隨著內容撐開 |
| .jumbotron-fluid | 定義一個全屏白色背景框框 |
提示框：
bootstrap提供了具有特殊意義的信息提示框，提示框可以使用alert類名實現，使用時給容器添加類名即可，其具體如下：
| .alert | 定義一個有默認高度無色的響應式容器 |
| .alert-success | 定義一個淺綠色背景通欄，高度由內容撐開，表示成功 |
| .alert-info | 定義一個淺藍色背景通欄，高度由內容撐開，表示注意 |
| .alert-warning | 定義一個淺黃色背景通欄，高度由內容撐開，表示警告 |
| .alert-danger | 定義一個淺紅色背景通欄，高度由內容撐開，表示錯誤 |
| .alert-primary | 定義一個淡藍色背景通欄，高度由內容撐開，表示首選的 |
| .alert-secondary | 定義一個淡灰色背景通欄，高度由內容撐開，表示次要的 |
| .alert-dark | 定義一個深灰色背景通欄，高度由內容撐開 |
| .alert-light | 定義暗白色背景通欄，高度由內容撐開 |
| .alert A | 實際開發中會將alert類名和具有特殊意義的alert-類名結合使用 |
提示框中的鏈接：bootstrap提供了a標簽的類樣式類名：alert-link，給a標簽添加此類后，默認沒有下劃線，當鼠標經過時會出現下劃線且顏色會改變（當a標簽在父級為提示框的容器中，鼠標經過時顏色是不會改變的)。
關閉提示框：
bootstrap中提供了關閉提示框功能的自定義屬性：data-dismiss=“alert”，（想要實現關閉提示框的功能，父級容器必須是類名為alert的提示框，另外給input按鈕加data-dismiss="alert"就可以實現功能層面；但是外觀是比較丑的，此時可以繼續給button按鈕加close類名，此類名可將按鈕文本浮動到父級容器右邊且修改默認樣式）如下：
<!-- 特別提醒：在本地引入的jQuery文件在測試時會有錯誤：fn找不到的情況，由于對jQuery文件結構及依賴不是很清楚，這里可以采用cdn網絡資源 --> <div class="alert alert-success"><!--關閉提示框功能必須有alert屬性，后面屬性為修飾性屬性，官方文檔中還有alert-dismissible屬性（設置padding-right: 4rem）--><button type="button" class="close" data-dismiss="alert">關閉</button><!-- type建議給button值，當然不給值也沒問題；后面一個是修飾樣式的類名，另一個是實現功能的自定義屬性 --><span>提示信息！</span><!--此塊區域可以繼續開發其他 --> </div>元素淡出淡入效果：
bootstrap中提供了元素淡入淡出功能的類名show和fade，常配合操作類樣式的API使用，如：
<body><div class="box"><p>測試bootstrap中fade和show類及jQuery中操作類樣式API</p></div><button>顯示</button><button>關閉</button><button>顯示/關閉</button><script>var $box = $(document.querySelector('.box'));var $button = $(document.querySelectorAll('button')[0]);var $button1 = $(document.querySelectorAll('button')[1]);var $button2 = $(document.querySelectorAll('button')[2]);$button.on('click', function() {$box.removeClass('fade');$box.addClass('show');});$button1.on('click', function() {$box.removeClass('show');$box.addClass('fade');});$button2.on('click', function() {$box.toggleClass('fade');});</script> </body>提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海
總結
以上是生活随笔為你收集整理的bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： node中操作MySQL
- 下一篇： android开发ui插件下载,TKUI