bootstrap

時間 2019-11-21

原文原文鏈接

全局CSS樣式 1、概覽須要將頁面設置爲 HTML5 文檔類型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> .container 類用於固定寬度並支持響應式佈局的容器。 <div class="container"> ... </div> .container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。 <div class="container-fluid"> ... </div> 2、柵格系統 .container 最大寬度 None （自動） 750px 970px 1170px 類前綴 .col-xs- .col-sm- .col-md- .col-lg- 移動設備和桌面屏幕 .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 手機、平板、桌面 .col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 列偏移 .col-md-4 .col-md-4 .col-md-offset-4 3、排版在標題內還能夠包含 <small> 標籤或賦予 .small 類的元素，能夠用來標記副標題。 <h1>h1. Bootstrap heading <small>Secondary text</small></h1> 經過添加 .lead 類可讓段落突出顯示。 <p class="lead">...</p> 高亮文本 You can use the mark tag to <mark>highlight</mark> text. 被刪除的文本 <del>This line of text is meant to be treated as deleted text.</del> 等同於無用文本 <s>This line of text is meant to be treated as no longer accurate.</s> 插入文本 <ins>This line of text is meant to be treated as an addition to the document.</ins> 等同於帶下劃線的文本 <u>This line of text will render as underlined</u> 着重 <strong>rendered as bold text</strong> 斜體 <em>rendered as italicized text</em> 對齊 <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p> 改變大小寫 <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p> //首字母大寫縮略語 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> //.initialism讓字體變得更小地址 <address> <strong>Twitter, Inc.</strong><br> //須要<br>換行 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> 引用 <blockquote class="blockquote-reverse"> //默認是靠左對其，加上.blockquote-reverse後靠右 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> //添加引用出處 </blockquote> 無樣式列表 <ul class="list-unstyled"> <li>...</li> </ul> 內聯列表，將全部元素放置於同一行。 <ul class="list-inline"> <li>...</li> </ul> 水平排列的描述 <dl class="dl-horizontal"> //默認是豎直方向排列dt與dd <dt>...</dt> <dd>...</dd> </dl> 4、代碼內聯代碼 For example, <code><section></code> should be wrapped as inline. 用戶輸入 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 代碼塊 <pre><p>Sample text here...</p></pre> 變量 <var>y</var> = <var>m</var><var>x</var> + <var>b</var> 程序輸出 <samp>This text is meant to be treated as sample output from a computer program.</samp> 5、表格基本爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。 <table class="table"> ... </table> 條紋狀表格 <table class="table table-striped"> ... </table> 帶邊框的表格 <table class="table table-bordered"> ... </table> 鼠標懸停 <table class="table table-hover"> ... </table> 緊縮表格 <table class="table table-condensed"> ... </table> 狀態類能夠爲行或單元格設置顏色。  <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr>  <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr> 響應式表格將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格 <div class="table-responsive"> <table class="table"> ... </table> </div> 6、表單基本實例 .form .form-group .sr-only .form-control p.help-block .radio .checkbox .btn .btn-default .btn-success .etc 全部設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;。 .sr-only可將該類隱藏 <form role="form"> <div class="form-group"> <label class="sr-only" for="userName">User Name</label> <input id="userName" class="form-control" placeholder="username..." type="text"> </div> <div class="form-group"> <label for="pwd">Password</label> <input id="pwd" class="form-control" placeholder="password..." type="password"> </div> <div class="form-group"> <label for="file">File Input</label> <input id="file" type="file" value="search..."> <p class="help-block">for .txt only</p> </div> <div class="form-group radio"> <label for="male"><input type="radio" id="male" name="sex" class="radio">male</label> <label for="female"><input type="radio" id="female" name="sex" class="radio">female</label> </div> <div class="form-group checkbox"> <label><input type="checkbox">select me</label> </div> <button type="button" class="btn btn-success">Submit</button> </form> 內聯表單只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。必定要添加 label 標籤 <form class="form-inline" role="form"> ... </form> 水平排列的表單爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，將改變 .form-group 的行爲當作.row功能 <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> 支持的控件輸入框 text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。文本域 <textarea class="form-control" rows="3"></textarea> 多選和單選框 .disabled禁用 <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> Option two is disabled </label> </div> .checkbox-inline 或 .radio-inline 類可使這些控件排列在一行。 <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 </label> 下拉列表 multiple屬性可多選 <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 靜態控件在表單中將一行純文本和 label 元素放置於同一行，爲 <p> 元素添加 .form-control-static 類便可。 <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> ... </form> .disabled禁用 <fieldset> 設置 disabled 屬性,能夠禁用 <fieldset> 中包含的全部控件。注意此時<a> 標籤的連接功能不受影響，需手動經過js代碼禁用校驗狀態，展示顯著顏色添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素便可。任何包含在此元素以內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。 <form class="form-horizontal" role="form"> <div class="form-group has-success has-feedback"> //設置.has-feedback類，並結合適當的字體圖標，給輸入框添加額外的圖標 <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label> <div class="col-sm-9"> <input type="text" class="form-control" id="inputSuccess3"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> //額外的圖標所需的span </div> </div> </form> 控件尺寸基本的豎直方向的表單經過.input-lg或.input-sm來設置控件高度 <input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select> 當水平排列時.form-horizontal，給外層.form-group添加.form-group-lg 或 .form-group-sm 類，以保證label框與放大的input等控件框水平對齊 <form class="form-horizontal" role="form"> <div class="form-group form-group-lg"> ... 7、按鈕預約義樣式  <button type="button" class="btn btn-default">Default</button> //灰  <button type="button" class="btn btn-primary">Primary</button> //深藍  <button type="button" class="btn btn-success">Success</button> //綠  <button type="button" class="btn btn-info">Info</button> //淺藍  <button type="button" class="btn btn-warning">Warning</button> //黃  <button type="button" class="btn btn-danger">Danger</button> //紅  <button type="button" class="btn btn-link">Link</button> //透明尺寸 .btn-lg、.btn-sm 或 .btn-xs 能夠得到不一樣尺寸的按鈕。 .btn-block 類能夠將其拉伸至父元素100%的寬度 <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> 激活與禁用狀態 <button type="button" class="btn btn-primary btn-lg active">Primary button</button> <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> //用超連接模擬button按鈕樣式 <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> //一樣禁用後仍可連接，需經過js禁用功能 8、圖片響應式圖片 .img-responsive <img src="..." class="img-responsive" alt="Responsive image"> 圖片形狀 <img src="..." alt="..." class="img-rounded"> //圓角矩形 <img src="..." alt="..." class="img-circle"> //圓形 <img src="..." alt="..." class="img-thumbnail"> //帶邊框的縮略圖 9、輔助類文本顏色 <p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p> 背景底色 <p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p> 關閉按鈕 <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 三角符號 <span class="caret"></span> 快速浮動 <div class="pull-left">...</div> <div class="pull-right">...</div> block居中 <div class="center-block">...</div>html

1. bootstrap + bootstrap-table + jquery + bootstrap-paginator
2. Bootstrap（一）認識Bootstrap
3. 【Bootstrap】1.初識Bootstrap
4. Bootstrap
5. bootstrap
6. BootStrap
更多相關文章...
• Lua 數據庫訪問 - Lua 教程
• R 包 - R 語言教程
• Github 簡明教程

相關標籤/搜索

bootstrap

bootstrap+bootstrap+scss

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。