Bootstrap全局樣式 - 表單

知識(shí)點(diǎn)

基本表單
<input>、<textarea>、<select>設(shè)置.form-control類，這些元素將會(huì)被設(shè)置為 width:100%;height:34px;；
添加<label>與前面這些控件，一起包裹在.form-group中。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
基本表單

內(nèi)聯(lián)表單
為 <form> 元素添加 .form-inline 類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為 inline-block 級(jí)別的控件。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話就會(huì)使表單折疊）。
內(nèi)聯(lián)表單中的<input>、<textarea>、<select>這些控件的寬度被設(shè)為width:auto;，這個(gè)我們?cè)趯戫撁鏁r(shí)需要去自定義設(shè)置。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
內(nèi)聯(lián)表單
一定要添加 label 標(biāo)簽

如果你沒有為每個(gè)輸入控件設(shè)置 label 標(biāo)簽，屏幕閱讀器將無法正確識(shí)別。對(duì)于這些內(nèi)聯(lián)表單，你可以通過為 label 設(shè)置 .sr-only 類將其隱藏。還有一些輔助技術(shù)提供label標(biāo)簽的替代方案，比如 aria-label、aria-labelledby 或 title 屬性。如果這些都不存在，屏幕閱讀器可能會(huì)采取使用 placeholder 屬性，如果存在的話，使用占位符來替代其他的標(biāo)記，但要注意，這種方法是不妥當(dāng)?shù)摹?/p>

.sr-only
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
input-group-addon與btn-primary

水平排列的表單
通過為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加 .row 了。
<label>需要添加.control-label類來調(diào)整行高位置，與input等控件相對(duì)應(yīng)顯示；

    <form class="form-horizontal">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
    </form>
水平排列的表單

靜態(tài)控件
如果需要在表單中將一行純文本和 label 元素放置于同一行，為 <p> 元素添加 .form-control-static 類即可。具體實(shí)例參照下面的實(shí)踐。

焦點(diǎn)狀態(tài)

focus

.form-control 元素的 :focus 狀態(tài)

校驗(yàn)狀態(tài)
Bootstrap 對(duì)表單控件的校驗(yàn)狀態(tài)，使用時(shí)，添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。任何包含在此元素之內(nèi)的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗(yàn)狀態(tài)的樣式；
還可以針對(duì)校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)；只需設(shè)置相應(yīng)的 .has-feedback 類并添加正確的圖標(biāo)；
反饋圖標(biāo)（feedback icon）只能使用在文本輸入框 <input class="form-control"> 元素上。
實(shí)例：TODO：校驗(yàn)狀態(tài)

控件尺寸
添加 .form-group-lg 或 .form-group-sm 類，為 .form-horizontal 包裹的 label 元素和表單控件快速設(shè)置尺；
用柵格系統(tǒng)中的列（column）包裹輸入框或其任何父元素，都可很容易的為其設(shè)置寬度。

實(shí)踐

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表單</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<div class="container">
    <!--基本表單格式-->
    <p>基本表單</p>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

    <div class="line"></div>
    <!--內(nèi)聯(lián)表單 width:auto; 一定要有l(wèi)abel元素，label元素添加sr-only類，則該元素會(huì)被隱藏-->
    <p>內(nèi)聯(lián)表單</p>
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputName2" class="sr-only">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" value="它之前的label元素被隱藏了">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
    </form>
    <br/>
    <form class="form-inline">
        <div class="form-group">
            <lable>價(jià)格：</lable>
            <div class="input-group">
                <div class="input-group-addon">input-group-addon</div>
                <input type="text" class="form-control" placeholder="" value=""/>
                <div class="input-group-addon">.00</div>
                <div class="input-group-btn">input-group-btn</div>
            </div>
        </div>
    </form>

    <div class="line"></div>
    <!--水平排列的表單-->
    <p>水平排列的表單</p>
    <form class="form-horizontal">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-xs-2 control-label">name</label>
                <div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </form>
    <div class="line"></div>
    <!--textarea-->
    <p>textarea</p>
    <textarea class="form-control" rows="5"></textarea>
    <div class="line"></div>
    <!--單選與復(fù)選-->
    <p>單選與復(fù)選</p>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="" name="checkbox"/>
            復(fù)選框按鈕
        </label>
    </div>
    <div class="checkbox disabled">
        <label>
            <input type="checkbox" value="" name="checkbox" disabled/>
            復(fù)選框按鈕，不可選disabled
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="radio"/>單選框
        </label>
        <label>
            <input type="radio" name="radio"/>單選框
        </label>
    </div>
    <div class="radio disabled">
        <label>
            <input type="radio" name="radio" disabled/>單選框不可選
        </label>
    </div>
    <div class="line"></div>
    <!--下拉列表（select）-->
    <p>下拉列表（select）</p>
    <select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <div class="line"></div>
    <!--靜態(tài)控件-->
    <p>靜態(tài)控件</p>
    <form class="form-horizontal"><!--單行顯示-->
        <div class="form-group">
            <label class="col-sm-2 control-label">Email</label><!--sr-only-->
            <div class="col-sm-10">
                <p class="form-control-static">email@example.com</p><!--添加 form-control-static 類來設(shè)置p元素與label同行顯示-->
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
    </form>
    <form class="form-inline"><!--一行顯示-->
        <div class="form-group">
            <label class="sr-only">Email</label>
            <p class="form-control-static">email@example.com</p>
        </div>
        <div class="form-group">
            <label for="inputPassword2" class="sr-only">Password</label>
            <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-default">Confirm identity</button>
    </form>
    <div class="line"></div>
    <!--校驗(yàn)狀態(tài)-->
    <p>校驗(yàn)狀態(tài)</p>
    <form class="form-horizontal">
        <div class="form-group has-success">
            <label class="col-xs-2 control-label">has-success</label>
            <div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
        </div>
        <div class="form-group has-warning">
            <label class="col-xs-2 control-label">has-warning</label>
            <div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
        </div>
        <div class="form-group has-error">
            <label class="col-xs-2 control-label">has-error</label>
            <div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
        </div>
    </form>
    <div class="line"></div>
    <!--控件尺寸-->
    <p>控件尺寸</p>
    <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">
</div>

</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Bootstrap是什么？ 一套易用、優(yōu)雅、靈活、可擴(kuò)展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,107評(píng)論 3贊 184
  • 【表格】.table 類指定基本樣式，.table-striped 條紋樣式，.table-bordered 類為...
    gtt21閱讀 410評(píng)論 0贊 2
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,074評(píng)論 4贊 61
  • 這是在微博上看到的一篇文章，深有感觸，于是轉(zhuǎn)發(fā)過來。 人生最難跨過的一關(guān)，是自己那一關(guān)。唯一能夠阻...
    小M姑娘閱讀 465評(píng)論 0贊 1
  • 我有一副過得去的容貌，瘦削的身段，重點(diǎn)大學(xué)的綠本本，數(shù)年的財(cái)富管理工作經(jīng)驗(yàn)。在大千世界中，或是一名普普通通的女子，...
    MissBright閱讀 414評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容