原始碼解www.cppcns.com讀bootstrap排版
粗體可以使用和標籤讓文字直接加粗。
例如：我在學習&iegcwwxflt;strong>bootstrap
原始碼b,
strong
斜體使用標籤或來實現。
例如：我在學bootstrap。
強調相關的類
強調類都是通過顏色來表示強調
.程式設計客棧text-muted：提示，使用淺灰色（#777）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知資訊，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）
例如：.text-primary效果
原始碼.text-muted
.text-primary
a.text-primary:hover
.text-success
a.text-success:hover
.text-info
a.text-info:hover
.text-warning
a.text-warning:hover
.text-danger
a.text-danger:hover
文字對齊風格
.text-left：左對齊
.text-center：居中對齊
.text-right：右對齊
.text-justify：兩端對齊
例如：我居左
原始碼：.text-left
.text-right
.text-center
.text-justify
目前兩端對齊在各瀏覽器下解析各有不同，特別是應用於中文文字的時候。所以專案中慎用。
列表bootstrap對於列表，只是在margin上做了一些調整
原始碼：ul,
ol ul ul,
ol ul,
ul ol,
ol ol
去點列表
給無序列表新增乙個類名「.list-unstyled」,這樣就可以去除預設的列表樣式的風格。
例如：
原始碼：.list-unstyled
內聯列表
通過新增類名「.list-inline」來實現內聯列表，其實就是把垂直列表換成水平列表，而且去掉專案符號，保持水平顯示。可以用來做水平導航。
原始碼：.list-inline
.list-inline > li
定義列表
bootstrap只是調整了行間距，外邊距和字型加粗效果
原始碼：dl
dt,dd
dt dd
水平定義列表
水平定義列表就像內聯列表一樣，新增類名「.dl-horizontal」給定義列表實現水平顯示效果。
原始碼：@media (min-width: 768px)
.dl-horizontal dd
}此處新增了乙個**查詢。也就是說，只有螢幕大於768px的時候，新增類名程式設計客棧「.dl-horizontal」才具有水平定義列表效果。當縮小瀏覽器螢幕時，水平定義列表將回覆到原始的狀態。
**主要提供了三種**風格：
顯示單行內聯**，一般是針對於單個單詞或單個句子的**
來顯示多行塊**，一般是針對於多行**（也就是成塊的**）
來顯示使用者輸入**，一般是表示使用者要通過鍵盤輸入的內容
在pre標籤上新增類名「.pre-scrollable」，就可以控制**塊區域最大高度為340px，一旦超出這個高度，就會在y軸出現滾動條。
原始碼：.pre-scrollable
**bootstrap為**提供了1種基礎樣式和4種附加樣式以及1個支援響應式的**。
.table：基礎**
.table-striped：斑馬線**
.table-bordered：帶邊框的**
.table-hover：滑鼠懸停高亮的**
.table-condensed：緊湊型**
.table-responsive：響應式**
例如要使用斑馬線**並且滑鼠懸停高亮：
程式設計客棧le class="table table-striped table-bordered table-hover">
響應式**的用法和其他幾個不同。
bootstrap提供了乙個容器，並且此容器設定類名「.table-responsive」,此容器就具有響應式效果，然後將
置於這個容器當中，這樣**也就具有響應式效果。
bootstrap中響應式**效果表現為：當你的瀏覽器可視區域小於768px時，**底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，**底部水平滾動條就會消失。示例如下：
…**行的類
tr有五種不同的類名，可以顯示行的不同的顏色
.active 表示當前活動的資訊
.success 表示成功或者正確的行為
.info 表示中立的資訊或行為
.warning 表示警告，需要特別注意
.danger 表示危險或者可能是錯誤的行為
例如：本文系列教程整理到：bootstrap基礎教程 專題中，歡迎點選學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。
本文標題: bootstrap原始碼解讀排版（1）
本文位址:
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
宣告：凡註明"本站原創"的所有文字等資料，版權均屬程式設計客棧所有，歡迎**，但務請註明出處。
標籤：bootstrap 排版
bootstrap css使用方法bootstrap select多選下拉框實現**
您可能感興趣的文章:
廣告贊助
廣告贊助
最新發布
全站最新
廣而告之
© 2018-2021 程式設計客棧 贛icp備17006162號-9
贛公網安備 36110202000251號
top
Bootstrap原始碼解讀下拉列表（4）
原始碼解讀bootstrap下拉列表 基本用法 在使用bootstrap框架的下拉列表時，必須呼叫bootstrap框架提供的bootstrap.js檔案。因為bootstrap的元件互動效果都是依賴於jquery庫寫的外掛程式，所以在使用bootstrap.min.js之前一定要先載入jquery...
openTLD 原始碼解讀
首先是run tld 在其次就是tldexample 最後到了初始化函式tldinit 第乙個比較關鍵的函式 bb scan 將影象網格化，將首先 scale 1.2.10 10 21 個規格 在每個規格上打網格 這個函式有乙個比較重要的方法 ntuples 就是重複 因為網格上的點很多點有相同的x...
thinkphp原始碼解讀
thinkphp原始碼解讀 thinkphp原始碼的根目錄下是 index.php，是系統預設的 主頁，index.php中首先檢測的是 php執行環境，如果php版本小於 5.3.0則退出執行，定義是否為除錯模式，定義應用目錄，引入入口檔案。thinkphp是整個框架的入口檔案，在thinkphp...