Bootstrap-代碼、表格、表單

一:
代碼顯示方式:
第一種是“內(nèi)聯(lián)“標(biāo)簽 <code>。
第二種是 ”塊級“<pre> 標(biāo)簽。
【注意】當(dāng)您使用 <pre> 和 <code> 標(biāo)簽時,開始和結(jié)束標(biāo)簽使用了 unicode 變體: < 和 >。

1)<pre>標(biāo)簽:多行代碼
<pre>如果需要把代碼顯示為一個獨(dú)立的塊元素,請使用 <pre> 標(biāo)簽:</pre>


image.png

2)<code>標(biāo)簽:
<p><code><header></code> 作為內(nèi)聯(lián)元素被包圍。</p>
3)<var>標(biāo)簽:變量賦值
<p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
==> x = ab + y
4)<kbd>標(biāo)簽:
<p>使用 <kbd>ctrl + p</kbd> 來打開打印窗口。</p>


image.png

二:表格
<table><thead><tbody><tr><td><th><caption>
1)用于table上的相關(guān)樣式類:
<table class="table"> 任意表格添加基本樣式 (只有橫向分隔線);
<table class="table table-striped">在 tbody 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持)
<table class="table table-bordered">為所有表格的單元格添加邊框;
<table class="table table-hover">啟用表格中 tbody 上的行的懸停效果;
<table class="table table-condensed">讓表格更加緊湊;
<table class="table table-striped table-bordered table-hover table-condensed">聯(lián)合使用所有表格類
2)可用于表格的行或者單元格
<tr class="active">類將懸停的顏色應(yīng)用在行或者單元格上
<tr class="success">類表示執(zhí)行成功的操作(綠色)


image.png

<tr class="info">表示信息變化的操作(藍(lán)色)
<tr class="warning">表示一個警告操作(黃色)
<tr class="danger">表示一個危險的操作(紅色)
3)響應(yīng)式表格:把任意的 .table 包在 .table-responsive class 內(nèi)
<div class="table-responsive"><table class="table"></table></div>


三:表單
1)布局:
1、基本布局:
創(chuàng)建基本表單的步驟:向父 <form> 元素添加 role="form" ==》把標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的==》向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"
<form role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" >
<p class="help-block">這是塊級幫助文本的實(shí)例--解釋的灰色文本。</p>
</div>
</form>


2、內(nèi)聯(lián)布局:文本標(biāo)簽按鈕都在一行內(nèi)顯示,向 <form> 標(biāo)簽添加 class .form-inline;
默認(rèn)情況下,Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時,您需要在表單控件上設(shè)置一個寬度。
使用 class .sr-only,您可以隱藏內(nèi)聯(lián)表單的標(biāo)簽。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
</form>


3、水平表單:
創(chuàng)建步驟:向父 <form> 元素添加 class .form-horizontal ==》把標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中 ==》向標(biāo)簽添加 class .control-label
例如:<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">名字</label>
<div class="col-sm-10"><input type="text" class="form-control"></div>
</div>
</form>


Bootstrap 支持最常見的表單控件,主要是 input、textarea、checkbox、radio 和 select。

  • 輸入框(Input)適當(dāng)?shù)?type 聲明是必需的,這樣才能讓 input 獲得完整的樣式。
    文本框(Textarea)進(jìn)行多行輸入的時候,必要時可以改變 rows 屬性行<textarea class="form-control" rows="3"></textarea>
  • 復(fù)選框(Checkbox)和單選框(Radio)對一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline,控制它們顯示在同一行上。<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1</label>
  • 選擇框(Select):使用 multiple="multiple" 允許用戶選擇多個選項(xiàng)。<select multiple class="form-control"></select>
  • 靜態(tài)控件:當(dāng)您需要在一個水平表單內(nèi)的表單標(biāo)簽后放置純文本時使用form-control-static;<p class="form-control-static">email@example.com</p>
    image.png

表單控件狀態(tài):

  • 輸入框焦點(diǎn)
  • 禁用輸入框input:只需要簡單地添加 disabled 屬性<input disabled>
  • 禁用fieldset:<fieldset disabled></fieldset>
  • 驗(yàn)證狀態(tài):<div class="form-group has-success"></div> 成功綠色 / .has-warning警告黃 / .has-error錯誤紅

表單控件大小:可以分別使用 class .input-lg 和 .col-lg-* 來設(shè)置表單的高度和寬度
<input class="form-control input-lg" type="text" > / .input-sm input-lg
<select class="form-control input-lg"></select>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • Bootstrap是什么? 一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,918評論 3 184
  • 關(guān)鍵詞: 二郎巷 二郎廟 同慶庵 二郎巷,位于東街東側(cè),通相公巷、莊厝埕。 巷因境廟——二郎廟而名,廟祀清源妙...
    小浣熊你好閱讀 829評論 0 1
  • 昨天,跟男朋友打電話,他對我說:“最近換了一份工作,感覺你對工作十分上心,激情滿滿,看來去上海工作,你是去對地方了...
    十七碎碎念閱讀 1,011評論 0 10
  • 最近在等澳洲的簽證,等的心力憔悴,姐姐說:好事要多磨。我只希望不要像李白那樣,把鐵杵磨成針就好。 最近還干的一件事...
    Toby馮閱讀 315評論 0 0