真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

BootStrap中表單的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下BootStrap中表單的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專業(yè)提供成都移動機房服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買成都移動機房服務(wù)，并享受7*24小時金牌售后服務(wù)。

1.基本實例

單獨的表單控件會被自動賦予一些全局樣式。所有設(shè)置了 .form-control類的、和 <select> 元素都將被默認設(shè)置寬度屬性為 width: 100%;。將 label 元素和前面提到的控件包裹在 .form-group中可以獲得最好的排列。</p><pre><!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form role="form"><div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label for="inputfile">文件輸入</label> <input type="file" id="inputfile"> <p class="help-block">這里是塊級幫助文本的實例。</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 請打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div> </body> </html></pre><p><img src="/upload/otherpic43/76297.png" alt="BootStrap中表單的示例分析"></p><p>不要將表單組合輸入框組混合使用</p><p>不要將表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。</p><p><strong>2.內(nèi)聯(lián)表單</strong></p><p>為 <form> 元素添加 .form-inline 類可使其內(nèi)容左對齊并且表現(xiàn)為inline-block 級別的控件。只適用于視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。</p><p>可能需要手動設(shè)置寬度</p><p>在 Bootstrap 中，輸入框和單選/多選框控件默認被設(shè)置為 width: 100%; 寬度。在內(nèi)聯(lián)表單，我們將這些元素的寬度設(shè)置為 width: auto;，因此，多個控件可以排列在同一行。根據(jù)你的布局需求，可能需要一些額外的定制化組件。</p><p>一定要添加 label 標簽</p><p>如果你沒有為每個輸入控件設(shè)置 label 標簽，屏幕閱讀器將無法正確識別。對于這些內(nèi)聯(lián)表單，你可以通過為 label 設(shè)置 .sr-only類將其隱藏。還有一些輔助技術(shù)提供label標簽的替代方案，比如aria-label、aria-labelledby 或 title 屬性。如果這些都不存在，屏幕閱讀器可能會采取使用 placeholder 屬性，如果存在的話，使用占位符來替代其他的標記，但要注意，這種方法是不妥當?shù)摹?/p><pre><!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="匯智網(wǎng)"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="service@hubwiz.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> </div> </body> </html></pre><p><img src="/upload/otherpic43/76298.png" alt="BootStrap中表單的示例分析"></p><p><strong>3.水平排列的表單</strong></p><p>通過為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加 .row 了。</p><pre><!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form class="form-horizontal" role="form"><div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="請輸入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="請輸入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 請記住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登錄</button> </div> </div> </form> </div> </body> </html></pre><p><img src="/upload/otherpic43/76299.png" alt="BootStrap中表單的示例分析"></p><p><strong>4.被支持的控件1</strong></p><p>表單布局實例中展示了其所支持的標準表單控件。</p><p>輸入框</p><p>包括大部分表單控件、文本輸入域控件，還支持所有 HTML5 類型的輸入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。</p><p>必須添加類型聲明</p><p>只有正確設(shè)置了 type 屬性的輸入控件才能被賦予正確的樣式。</p><p>輸入控件組</p><p>如需在文本輸入域 <input> 前面或后面添加文本內(nèi)容或按鈕控件，請參考輸入控件組。</p><p>文本域</p><p>支持多行文本的表單控件。可根據(jù)需要改變 rows 屬性。</p><pre><textarea class="form-control" rows="3">

5.被支持的控件2

多選和單選框

多選框（checkbox）用于選擇列表中的一個或多個選項，而單選框（radio）用于從多個選項中只選擇一個。

設(shè)置了 disabled 屬性的單選或多選框都能被賦予合適的樣式。對于和多選或單選框聯(lián)合使用的標簽，如果也希望將懸停于上方的鼠標設(shè)置為“禁止點擊”的樣式，請將 .disabled 類賦予 .radio、.radio-inline、.checkbox、.checkbox-inline 或

Option one is this and that—be sure to include why it's great Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled