BootStrap中CSS全局樣式和表格樣式的示例分析-創(chuàng)新互聯(lián)

5、列表樣式：

.list-unstyled(無符號)：去掉前面的符號。
.list-inline(行內(nèi)塊)

普通的列表樣式：首先是前面有一定的空隙，不是和文本同間隔的。
另外的就是有小圓點，當然，你可以改這個符號。

在BootStrap中，我們只需要在ul上加一個class就可以解決這個問題。

在這里，我發(fā)現(xiàn)BootStrap4不支持ul在一行顯示，也就是添加class=”list-inline”是無效的。
所以，我在這里就改用bootstrap3了。

  
HTML
  
Java
  
JavaScript
 
 
  
在一行
  
HTML
  
Java
  
JavaScript

表格樣式

1、.table ：表格全局樣式(少量padding和水平方向的分割線)。

 
 
  編號
  新聞標題
  發(fā)布者
  發(fā)布時間
 
 
  001
  A
 CHX
  2017
 
 
 002
 B
 ANYI
 2017
 

2、.table-striped：有條紋的背景色行(隔行變色)

...

顏色很淺，不知道你們能不能看清。

3、.table-bordered：帶邊框的表格

...

4、.table-hover：鼠標懸停效果(放上變色、離開恢復)

...

5、.table-condensed：緊湊的表格(單元格內(nèi)補會減半)

...

6、行或單元格背景色：

注意：只能給tr或td添加類樣式。

.active：當前樣式
.success
.info
.warning
.danger

     編號
     新聞標題
     發(fā)布者
     發(fā)布時間
    
    
     001
     A
     CHX
     2017
    
    
     002
     B
     ANYI
     2017
    

7、響應式表格：

將.table元素包裹在.table-responsive元素內(nèi)，即可創(chuàng)建響應式表格
當屏幕寬度小于768px時，表格會出現(xiàn)滾動條。
當屏幕寬度大于768px時，表格的滾動條自然消失。

也就是在table標簽外再創(chuàng)一個div標簽，div的class設置為table-responsive即可。

    
     
      編號
      新聞標題
      發(fā)布者
      發(fā)布時間
      發(fā)布者
      發(fā)布時間
      發(fā)布者
      發(fā)布時間
     
     
      001
      A
      CHX
      2017
      CHX
      2017
      CHX
      2017
     
     
      002
      B
      ANYI
      2017
      CHX
      2017
      CHX
      2017
     
    
   

以上是“BootStrap中CSS全局樣式和表格樣式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。