bootstrap可編輯表格？

首先,

你要知道一個(gè)基礎(chǔ)table的標(biāo)簽怎么去寫, 只有知道這個(gè)基礎(chǔ), 你才能更好的用bootstrap中的table. html在這不過(guò)多說(shuō)明.

既然看這篇文章, 肯定都能夠理解. 然后現(xiàn)在就把bootstrap中的table來(lái)詳細(xì)說(shuō)明一下. 基礎(chǔ)的table如下:

下面了解一下bootstrap中table, 沒(méi)有什么大道理可以講解. 唯有一點(diǎn), 通過(guò)表格的方式展示頁(yè)面. 首先有必要樣式.table. 和一些選用樣式. 舉例說(shuō)明必要樣式. 首先要搭建一個(gè)基礎(chǔ)框架, 請(qǐng)看系列經(jīng)驗(yàn)第一篇.

在搭建的基礎(chǔ)框架里面的body部分填寫table信息. 然后在table的標(biāo)簽上加上基礎(chǔ)樣式.table的css樣式. 你立刻發(fā)現(xiàn), 界面瞬間好看多了.

說(shuō)明一下除了必要的.table之外, 還有很多可選的class. 不同的可選class. 是可以聯(lián)合使用的.

1.我們常用的就有邊框的table. 只需要使用.table-bordered 查看效果圖.

2.斑馬線, 也就是隔行相同顏色的一個(gè)樣式. 使用.table-striped樣式.

注意點(diǎn)有2個(gè):

(1)斑馬線是對(duì)tbody中的行起作用

(2)斑馬線的實(shí)現(xiàn)方式是通過(guò):nth-child CSS選擇器實(shí)現(xiàn)的, 但是呢, 他不被ie8支持, 你懂我說(shuō)的.

3.鼠標(biāo)懸停在行上, 改變行的背景顏色. 使用.table-hover樣式.

注意: 這個(gè)需要多行的時(shí)候, 這種效果更加明顯.

4.讓表格更加緊湊的樣式.table-condensed, 它是讓表格單元格中的內(nèi)部（padding）減半.展現(xiàn)更多的內(nèi)容, 和更多的顯示內(nèi)容.

其他的提醒說(shuō)明: 在bootstrap中有這樣的幾個(gè)樣式, 可以說(shuō)是提醒樣式. 每個(gè)樣式都是一種提醒方式. 這些方式也可以放到table中. 只需要使用class即可.

上面狀態(tài)的樣式, 可以使用到不同的內(nèi)容中, 比方說(shuō), tr中, td中, 都是可以的. 下面的舉例說(shuō)明.

注意點(diǎn): 在使用這個(gè)樣式的時(shí)候不能使用.table-striped的樣式, 會(huì)出現(xiàn)不能正常顯示的問(wèn)題.

還有就是現(xiàn)在比較流行的響應(yīng)式的table. 只需要在table包含在.table-responsive中即可, 作用為: 當(dāng)屏幕小于768的時(shí)候, 才會(huì)出現(xiàn)滾動(dòng)條, 否則滾動(dòng)條消失.

10

動(dòng)手去嘗試, 你發(fā)現(xiàn)學(xué)習(xí)bootstrap也就是這么簡(jiǎn)單.祝你更快的學(xué)會(huì)這個(gè)框架.