Bootstrap基本樣式學(xué)習(xí)筆記之表單(3)
更新時(shí)間：2016年12月07日 11:45:44 作者：kikay
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之表單基本樣式的相關(guān)資料,為大家分享了三種表單樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Bootstrap 通過(guò)一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。
0x01 樣式1
一個(gè)登錄界面：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>用戶登錄</title>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="UserName">用戶名</label>
<input type="text" class="form-control" id="UserName" placeholder="用戶名">
</div>
<div class="form-group">
<label for="PassWord">密 碼</label>
<input type="password" class="form-control" id="PassWord" placeholder="密碼">
</div>
<div class="form-group">
<label>
<input type="checkbox">記住我嗎？
</label>
</div>
<div class="form-group">
<input type="button" class="btn btn-default" id="Submit" value="登 錄">
</div>
</form>
</div>
</body>
</html>
效果如下：
0x02 樣式2
如果要將label與文本框在同一行顯示，修改如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>用戶登錄</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-3 col-xs-3"></div>
<div class="col-lg-6 col-md-6 col-xs-6">
<div class="page-header">
<h1>用戶登錄</h1>
</div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-2 col-sm-2 col-xs-2">
<label for="UserName" class="control-label">用戶名:</label>
</div>
<div class="col-lg-10 col-sm-10 col-xs-10">
<input type="text" class="form-control" id="UserName" placeholder="用戶名">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-sm-2 col-xs-2">
<label for="PassWord" class="control-label">密 碼:</label>
</div>
<div class="col-lg-10 col-sm-10 col-xs-10">
<input type="password" class="form-control" id="PassWord" placeholder="密碼">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-sm-2 col-xs-2"></div>
<div class="col-lg-10 col-sm-10 col-xs-10">
<div class="checkbox">
<label>
<input type="checkbox">記住我嗎？
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-sm-2 col-xs-2"></div>
<div class="col-lg-10 col-sm-10 col-xs-10">
<input type="button" class="btn btn-default" id="Submit" value="登 錄">
</div>
</div>
</form>
</div>
<div class="col-lg-3 col-md-3 col-xs-3"></div>
</div>
</body>
</html>
效果如下：
0x03 樣式3
如果將文本框放在同一行，修改如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>用戶登錄</title>
</head>
<body>
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="control-label" for="UserName">用戶名:</label>
<input type="text" class="form-control" id="UserName" placeholder="用戶名">
</div>
<div class="form-group">
<label class="control-label" for="PassWord">密 碼:</label>
<input type="password" class="form-control" id="PassWord" placeholder="密碼">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">記住我嗎?
</label>
</div>
</div>
<div class="form-group">
<input type="button" class="btn btn-default" id="Submit" value="登 錄">
</div>
</form>
</div>
</body>
</html>
效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 全面解析Bootstrap表單使用方法（表單按鈕）
- Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
- 全面解析Bootstrap表單使用方法（表單樣式）
- 詳解Bootstrap創(chuàng)建表單的三種格式（一）
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- 基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單
- Bootstrap每天必學(xué)之表單
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
相關(guān)文章
下面小編就為大家分享一篇switchery按鈕的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)涂鴉筆功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
js實(shí)現(xiàn)隨機(jī)數(shù)字字母驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了js隨機(jī)驗(yàn)證碼的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
下面小編就為大家?guī)?lái)一篇JS函數(shù)的定義與調(diào)用方法推薦。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
本文主要介紹了JavaScript數(shù)組方法reduce的概述、語(yǔ)法、參數(shù)、工作原理等，由淺入深，便于理解。需要的朋友可以看下2016-12-12
提升PHP安全：8個(gè)必須修改的PHP默認(rèn)配置
這篇文章主要介紹了提升PHP安全：8個(gè)必須修改的PHP默認(rèn)配置,PHP.ini中的默認(rèn)配置是面向開發(fā)者的,如果是生產(chǎn)環(huán)境是必須要修改一些配置的,需要的朋友可以參考下2014-11-11
使用ECharts進(jìn)行數(shù)據(jù)可視化的代碼詳解
ECharts 是一個(gè)由百度開源的強(qiáng)大、靈活的 JavaScript 圖表庫(kù),用于在 Web 頁(yè)面上創(chuàng)建各種類型的數(shù)據(jù)可視化圖表,它具有豐富的圖表類型、強(qiáng)大的配置選項(xiàng)和良好的跨平臺(tái)兼容性,本文介紹了如何使用ECharts進(jìn)行數(shù)據(jù)可視化,需要的朋友可以參考下2024-08-08
對(duì)TypeScript庫(kù)進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了對(duì)TypeScript庫(kù)進(jìn)行單元測(cè)試的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
關(guān)于JSON解析的實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了關(guān)于JSON解析的實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
理解JavaScript中的適配器模式Adapter?Pattern
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter?Pattern，是作為兩個(gè)不兼容的接口之間的橋梁。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-04-04