1. 程式人生 > >Bootstrap學習筆記(二) table表格&表單

Bootstrap學習筆記(二) table表格&表單

1.表格

標準格式:


<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>

為任意 <table> 標籤新增 .table 類可以為其賦予基本的樣式 — 少量的內補(padding)和水平方向的分隔線

條紋狀表格

通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式

<table class="table table-striped">
  ...
</table>

帶邊框的表格

新增 .table-bordered 類為表格和其中的每個單元格增加邊框

<table class="table table-bordered">
  ...
</table>

滑鼠懸停

通過新增 .table-hover 類可以讓 <tbody> 中的每一行對滑鼠懸停狀態作出響應

<table class="table table-hover">
  ...
</table>

緊縮表格

通過新增 .table-condensed 類可以讓表格更加緊湊,單元格中的內補(padding)均會減半

<table class="table table-condensed">
  ...
</table>

狀態類

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

Class 描述
.active 滑鼠懸停在行或單元格上時所設定的顏色
.success 標識成功或積極的動作
.info 標識普通的提示資訊或動作
.warning 標識警告或需要使用者注意
.danger 標識危險或潛在的帶來負面影響的動作

例如:

<tr class="success">
      <td>2</td>
      <td>18</td>
      <td></td>
      <td>20</td>
</tr>

2.表單

內聯表單

<form> 元素新增 .form-inline 類可使其內容左對齊並且表現為 inline-block 級別的控制元件。只適用於視口(viewport)至少在 768px寬度時(視口寬度再小的話就會使表單摺疊)。

水平排列的表單

通過為表單新增 .form-horizontal 類,並聯合使用 Bootstrap 預置的柵格類,可以將 label 標籤和控制元件組水平並排佈局

單獨的表單控制元件會被自動賦予一些全域性樣式。所有設定了 .form-control 類的 <input><textarea><select> 元素都將被預設設定寬度屬性為 width: 100%;。 將 label 元素和前面提到的控制元件包裹在 .form-group 中可以獲得最好的排列

<form action="#" class="form-horizontal">
    <div class="form-group">
        <input type="text" placeholder="請輸入你的帳號" class="form-control">
    </div>
    <div class="form-group">
        <input type="password" placeholder="請輸入你的密碼" class="form-control">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox">記住我
        </label>
        </div>
    <div class="radio">
        <label for="man">
            <input type="radio" id="man" name="sex">man
        </label>
        <label for="woman">
            <input type="radio" id="woman" name="sex">woman
        </label>
        <label for="secret">
            <input type="radio" id="secret" name="sex" disabled>secret
        </label>
    </div>
    <div class="form-group">
        <select name="select" class="form-control">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
</form>

相關推薦

Bootstrap學習筆記 table表格&

1.表格 標準格式: <table> <caption>...</caption> <thead> <tr>

MySQL高效程式設計學習筆記--多個的連線

關係型資料庫為了減少資料佔用有限的儲存空間,都會進行資料分割到幾個表的規範化處理,將這幾個分割管理的資料重新結合到一起就是表連線處理。 1.內連線 內連線就是表間的主鍵和外來鍵相連,只取得鍵值一致的資料的連線方式。具體語法: Select 列

html5學習筆記增強的

color 這是HTML5新增的; 可以建立一個顏色的選擇輸入框 瀏覽器版本比較低的話有可能不支援,不同的瀏覽器支援程度不同  <input type=”color” >    <formaction="" method="" target=""> 顏色:<input t

學習筆記tidyverse之readxl包------表格資料讀取

1、readxl概況 readxl包是tidyverse中的一員,是匯入Excel表格資料的一個R包,由Hadley Wickham開發的。與其他已經存在的包(例如:gdata包、xlsx包…)最大的區別是不依賴其他外部程式,能夠在所有作業系統中都方便使用; 主要功能是匯入

php laravel框架學習筆記 數據庫操作

true 數據 mar sql show top 一行 ati del 原博客鏈接:http://www.cnblogs.com/bitch1319453/p/6810492.html mysql基本配置 你可用通過配置環境變量,使用cmd進入mysql,當然還有一種東

java學習筆記圖形用戶接口

star strong per getwidth cep runnable graphics s2d gb2 這個學期主要放在ACM比賽上去了,比賽結束了。不知不覺就15周了,這周就要java考試了,復習一下java吧。java的學習的目的還是讓我們學以致用,讓我們可以

數據結構學習筆記 線性的順序存儲和鏈式存儲

出錯 初始化 node != test span 輸入 des val 線性表:由同類型數據元素構成有序序列的線性結構  --》表中元素的個數稱為線性表的長度  --》沒有元素時,成為空表  --》表起始位置稱表頭,表結束位置稱表尾 順序存儲:    1 package

Memcache 學習筆記---- PHP 腳本操作 Memcache 服務器

ext status ram var_dump 介紹 修改 memcache local dbn    PHP 腳本操作 Memcache 服務器 一、PHP腳本操作Memcache方法     使用 PHP 腳本操作 Memcache,在 PHP 手冊中有詳細的介紹,我們

javascript學習筆記:定義函數、調用函數、參數、返回值、局部和全局變量

兩個 cnblogs bsp 結果 value ava ase com 調用 定義函數、調用函數、參數、返回值 關鍵字function定義函數,格式如下: function 函數名(){ 函數體 } 調用函數、參數、返回值的規則和c語言規則類似。 1 <!DOC

神箭手爬蟲學習筆記

暫存 自動 表達 eve doc 常用 學習 數據 .sh 一,可以使用神劍手已經做好的爬蟲市場直接跑,不需要自己定義爬取規則 二,爬蟲市場裏沒有的網站,需要自己去定義規則來爬數據。 三,爬取的數據可以先存放在神劍手,也可以放到七牛暫存。(提醒下,網站需要數據備份如果數量不

thinkphp5.0學習筆記API後臺處理與命名空間

mac code 輸入 -1 pub 基礎 select() color 第一個 命名空間 先來看命名空間吧; 命名空間是學習TP的基礎, <?php namespace app\lian\c1; class yi{ public $obj = "這是第一個

bootstrap 學習筆記1---介紹bootstrap和柵格系統

優先 cal 圖片 應用 尺寸 文件中 lin png ice   學習前端許久,對於布置框架和響應瀏覽器用html 和javascript 寫的有點繁瑣,無意間看到這個框架,覺得挺好用的就開始學習了,但是這個框架上面有很多知識,不是所有的都要學的,故將學習筆記和覺得重點的

bootstrap 學習筆記2---- 排版

-i 排列 分段函數 class 總結 capital src 設置 per 安裝和柵格系統學完,這篇寫的是排版手冊中排版的目錄如下圖 《標題,頁面主題,內聯文本元素,對齊,改變大小寫,縮略語,地址,引用,列表》手冊中介紹那麽多,其實並不是所有的都要去看看。很多都是沒有必

MongoDB學習筆記

.get 條件過濾 條件 $set system.in ins version tle 不存在 一、Mongodb命令 說明:Mongodb命令是區分大小寫的,使用的命名規則是駝峰命名法。 對於database和collection無需主動創建,在插入數據時,如果dat

bootstrap 學習筆記5---- 圖片和響應式工具

-h thumb ima ble resp 圓角 rim ucc spl (一)響應式圖片: 在 Bootstrap 版本 3 中,通過為圖片添加 .img-responsive 類可以讓圖片支持響應式布局。其實質是為圖片設置了 max-width: 100%;、 heig

設計模式學習筆記 設計基本原則之【單一職責原則】

code 分享 開發者 實際應用 需要 ret ext file類 tor 單一職責原則(SRP: Single Responsibility Principle) 名詞解釋: 1) 職責:是指類變化的原因。 2) 職責擴散:就是因為某種原因,職責P被分化為粒度更細的職責P

CSS學習筆記:特性

code 背景色 左移 line tex lin 安裝 其中 cas 一、顏色特性 1. 前景色:color 用種方式指定前景色,3種方式分別是rgb顏色,#16進制編碼,顏色名稱: color: rgb(100,100,100); color: #ee3e80; col

tensorflow學習筆記

example initial turn rate mnist pac rac test mode import tensorflow as tfimport numpy as npimport mathimport tensorflow.examples.tutorial

SSH學習筆記

via linu inf 一段時間 isp x-window window max tcl 1 # 1. 關於 SSH Server 的整體設定,包含使用的 port 啦,以及使用的密碼演算方式 2 Port 22          # SSH 預設使用 22 這

Git學習筆記

== 我們 ash 發出 效率 媳婦兒 src 每天 apply 一、分支管理 1、什麽是分支   分支就相當於我們看科幻片裏的平行宇宙,如果兩個平行宇宙互不幹擾,那鐵定是啥事兒沒有。不過,在某個時間點,兩個平行宇宙合並了呢?假如兩個宇宙中都有你的影子, 合並之後相當於你們