Bootstrap學(xué)習(xí)筆記(3)--表格\表單\圖片

Bootstrap表格

?表格類:

? ?.table只會(huì)在表行之間增加橫線;

? ?.table-striped會(huì)在表格行之間增減斑馬線;

? ?.table-hover會(huì)給表設(shè)置鼠標(biāo)懸停狀態(tài);

? ?.table-border會(huì)為所有的表格添加邊框;

? ?.table-condensed讓表格更加緊湊;

?tr,td,th類

? ?.active讓某一行單元格或者行處于激活狀態(tài);

? ?.success表示成功的樣式;

? ?.warning表示警告的樣式;

? ?.danger表示危險(xiǎn)的樣式;

? ?.info表示信息的樣式;

? 表單類:

??創(chuàng)建表單的基本步驟

?(1)首先向form元素添加role="form";

?(2)把標(biāo)簽和控件放在一個(gè)帶有class .form-group的<div>中,這是獲取最佳間距鎖必須的;

?(3)向所有的文本元素<intput><textarea>和<select>添加class .form-control;

? 幾種表單格式;

??垂直表單-采用以上樣式創(chuàng)建的普通表單;

? 水平表單-在form中增加class .form-horizontal靶累;

? 內(nèi)聯(lián)表單-在form中增加class .form-inline,對(duì)于標(biāo)簽元素可以使用.sr-only來(lái)隱藏該標(biāo)簽元素(label)

? 支持的表單控件:

? input,textarea,checkbox,radio,select(可以增加multiple實(shí)現(xiàn)多選)

? 這里特別說(shuō)明一點(diǎn),實(shí)現(xiàn)內(nèi)聯(lián)的復(fù)選框或者單選按鈕使用checkbox-line屬性.

? 如果想在想放置純文本那么可以對(duì)<p>元素使用.form-control-static

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

? 可以對(duì)div設(shè)置has-warning,has-error,has-success來(lái)顯示內(nèi)部控件的狀態(tài).

? 可以設(shè)置.input-large或者.input-sm來(lái)顯示控件的大小,或者使用col-lg-*來(lái)顯示控件占的列數(shù).

? 可以使用.class-bloc來(lái)顯示一段內(nèi)容的解釋.

圖片:

.img-rounded

:添加

border-radius:6px

來(lái)獲得圖片圓角碍彭。

.img-circle

:添加

border-radius:50%

來(lái)讓整個(gè)圖片變成圓形。

  • .img-thumbnail:添加一些內(nèi)邊距(padding)和一個(gè)灰色的邊框摸袁。
  • .img-responsive 圖片響應(yīng)式 (將很好地?cái)U(kuò)展到父元素)
  • 最后編輯于
    ?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
    • 序言:七十年代末钥顽,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子靠汁,更是在濱河造成了極大的恐慌蜂大,老刑警劉巖,帶你破解...
      沈念sama閱讀 210,914評(píng)論 6 490
    • 序言:濱河連續(xù)發(fā)生了三起死亡事件蝶怔,死亡現(xiàn)場(chǎng)離奇詭異奶浦,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)踢星,發(fā)現(xiàn)死者居然都...
      沈念sama閱讀 89,935評(píng)論 2 383
    • 文/潘曉璐 我一進(jìn)店門(mén)澳叉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事成洗∥宥剑” “怎么了?”我有些...
      開(kāi)封第一講書(shū)人閱讀 156,531評(píng)論 0 345
    • 文/不壞的土叔 我叫張陵瓶殃,是天一觀的道長(zhǎng)充包。 經(jīng)常有香客問(wèn)我,道長(zhǎng)碌燕,這世上最難降的妖魔是什么误证? 我笑而不...
      開(kāi)封第一講書(shū)人閱讀 56,309評(píng)論 1 282
    • 正文 為了忘掉前任,我火速辦了婚禮修壕,結(jié)果婚禮上愈捅,老公的妹妹穿的比我還像新娘。我一直安慰自己慈鸠,他們只是感情好蓝谨,可當(dāng)我...
      茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
    • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著青团,像睡著了一般譬巫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上督笆,一...
      開(kāi)封第一講書(shū)人閱讀 49,730評(píng)論 1 289
    • 那天芦昔,我揣著相機(jī)與錄音,去河邊找鬼娃肿。 笑死咕缎,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的料扰。 我是一名探鬼主播凭豪,決...
      沈念sama閱讀 38,882評(píng)論 3 404
    • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼晒杈!你這毒婦竟也來(lái)了嫂伞?” 一聲冷哼從身側(cè)響起,我...
      開(kāi)封第一講書(shū)人閱讀 37,643評(píng)論 0 266
    • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拯钻,失蹤者是張志新(化名)和其女友劉穎帖努,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體粪般,經(jīng)...
      沈念sama閱讀 44,095評(píng)論 1 303
    • 正文 獨(dú)居荒郊野嶺守林人離奇死亡然磷,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
      茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
    • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了刊驴。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片姿搜。...
      茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
    • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡寡润,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出舅柜,到底是詐尸還是另有隱情梭纹,我是刑警寧澤,帶...
      沈念sama閱讀 34,253評(píng)論 4 328
    • 正文 年R本政府宣布致份,位于F島的核電站变抽,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏氮块。R本人自食惡果不足惜绍载,卻給世界環(huán)境...
      茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
    • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望滔蝉。 院中可真熱鬧击儡,春花似錦、人聲如沸蝠引。這莊子的主人今日做“春日...
      開(kāi)封第一講書(shū)人閱讀 30,715評(píng)論 0 21
    • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)螃概。三九已至矫夯,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吊洼,已是汗流浹背训貌。 一陣腳步聲響...
      開(kāi)封第一講書(shū)人閱讀 31,945評(píng)論 1 264
    • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留冒窍,地道東北人旺订。 一個(gè)月前我還...
      沈念sama閱讀 46,248評(píng)論 2 360
    • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像超燃,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子拘领,可洞房花燭夜當(dāng)晚...
      茶點(diǎn)故事閱讀 43,440評(píng)論 2 348

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

    • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案意乓? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
      _Yfling閱讀 13,734評(píng)論 1 92
    • Bootstrap是什么? 一套易用约素、優(yōu)雅届良、靈活、可擴(kuò)展的前端工具集--BootStrap圣猎。GitHub上介紹 的...
      凜0_0閱讀 10,855評(píng)論 3 184
    • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
      程序員poetry閱讀 16,524評(píng)論 32 459
    • 本課來(lái)自http://www.imooc.com/learn/9請(qǐng)不要用作商業(yè)用途士葫。 HTML5 HTML介紹 H...
      PYLON閱讀 3,210評(píng)論 0 5
    • 風(fēng)境羽閱讀 286評(píng)論 0 1