bootstrap佈局之排版樣式、列表樣式、表格樣式介紹

本篇文章就跟大家介紹bootstrap佈局之排版樣式、列表樣式、表格樣式。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。如果大家想要學習和獲取更多的bootstrap相關影片教學也可以訪問：bootstrap教學！

佈局容器

#bootstrap 它認為每個網頁都應該會擁有固定的寬度，它會在容器裡面水平垂直居中或是佔滿容器的100% 的寬度。

Bootstrap 將全域font-size 設定為14px ，行高為1.428（20px），

段落行高設定為等於1/2（10px），顏色為# 333

1） 固定的寬度

.container 類別用於固定寬度並支援響應式佈局的容器（水平居中）。

2） 百分比寬度

.container-fluid 為100% 寬度，佔據全部視覺化視窗的容器。

排版樣式

#.text-center 居中對齊

.text-right 居右對齊

.text-left 居左對齊

.text-uppercase 用來將小寫字母轉換為大寫字母

.text-lowercase 用於將大寫字母轉換為小寫字母

#.text-capitalize 用於實作首字母大寫

#  標籤指示簡稱或縮寫，例如"WWW" 或"NATO"(有利於搜尋引擎搜尋)

## 反白文字（加底紋）

以下是bootstrap複寫過樣式的標籤

 用來表示電腦原始碼或其他機器可以閱讀的文字內容。 （加底紋）

 <span style="color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;text-align:left;background-color:rgb(253,252,248);">常見應用表示電腦的原始程式碼（加底紋和邊框）</span></span></span></p>
<p><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;">#列表樣式</span></strong></span><br></p>
<p><span style="font-size:14px;color:#000000;"><strong>#列表：有序列表，無序列表，定義列表。 </strong></span></p>
<p><span style="font-size:14px;color:#000000;"><em>.sr-only </em>隱藏一個元素，可以是行可以是列，也可以是整個 table</span></p>#<p><span style="font-size:14px;color:#000000;"><em>.list-unstyled</em> 用來將清單前面的項目符號去掉，同時移除清單預設的margin 值</span></p>
<p><span style="font-size:14px;color:#000000;">.list-inline 將列表中的內容排列成同一行，並且增加少量的padding 值</span></p>
<p><span style="font-size:14px;color:#000000;">.dl-horizo​​ntal</span><span style="font-size:14px;color:#ff6666;"> 給定義列表來使用</span><span style="font-size:14px;color:#000000;">，將定義標題與定義描述資訊排列在同一行，將dt 標記與dd 標記裡面的內容排列在同一行</span></p>
<p><span style="color:rgb(0,0,0);"><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;">表格樣式</span> </strong></span><br></span></p>
<p><span style="font-size:14px;color:#000000;"><em>.table</em> 為任意<table> 標籤新增.table 類別可以為其賦予基本的樣式，少量的padding 和水平方向的分割線。 </span></p>
<p><span style="font-size:14px;color:#000000;"><em>.table-bordered</em> 為表格和其中的每個儲存格增加邊框線</span></p>
<p><span style="font-size:14px;color:#000000;">##. table-striped <em>實現各行變色的效果（</em></span>IE8不支援<span style="font-size:14px;color:#ff6666;"></span>#）<span style="font-size:14px;color:#000000;"></span></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

登入後複製

.table-hover #實作滑鼠放上的效果

		 table.table-hover tr:hover{
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

.table-condensed 緊湊型的表格，將padding 值減半

.table-responsive 為表格父元素設定響應式，當畫面小於768px 時，四周出現邊框

狀態類別

只能給tr 或td 或th 來設置，不能給table 標記來設定

透過這些狀態類可以為行或單元格設定顏色

將懸停的顏色套用在行或單元格上嘗試

類別	#描述	實例
.active
		################## #######.success##################表示成功的動作##################嘗試一下######
.info	#表示訊息變化的動作	#試試看
#.warning	表示一個警告的操作	嘗試
	.danger	表示一個危險的動作

######嘗試一下##################

For details, please see:

##Product nameProduct priceProduct statussuccess colorXiaomi mobile phone1499 Deliveryactive colorXiaomi mobile phone1499 DeliveryinfoColorXiaomi mobile phone1499DeliverywarningColorXiaomi mobile phone1499Delivery

			danger color

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

以上是bootstrap佈局之排版樣式、列表樣式、表格樣式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！