Bootstrap3基礎 form-horizontal 表單元素橫向布局 簡單示例
阿新 • • 發佈：2019-03-17
end orm www. frame dia log author otc 圖片
面對開源框架，分析、領悟與應用，能對其進行加減裁化，隨心所欲而不逾矩。
博文的質量普通，僅供參考。盲目復制，處處是坑。Think twice before you act(三思而後行)！
?
| ??OS | ??Windows 10 x64 |
| ??browser | ??Firefox 65.0.2 |
| ??framework?? | ??Bootstrap 3.3.7 |
| ??editor | ??Visual Studio Code 1.32.1?? |
| ??typesetting | ??Markdown |
?
code
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- IE將使用最新的引擎渲染網頁 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 頁面的寬度與設備屏幕的寬度一致 初始縮放比例 1:1 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <meta name="author" content="www.cnblogs.com/kemingli"> <!-- 引入外部bootstrap的css文件(壓縮版)，版本是3.3.7 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --> <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script> <![endif]--> </head> <body> <!-- start : demo --> <div class="container" style="background-color:gray"> <form class="form-horizontal"> <div class="form-group"> <!-- 屬性值col-xs-3中，這個數字3是根據實踐經驗而來的 --> <label class="col-md-2 col-sm-2 col-xs-3 text-right" for="username"> 用戶名 </label> <!-- 為什麽要用div把input包裹起來呢？ 因為輸入框不能使用柵格系統，也就是說 input不能加 col-xx-xx。 --> <div class="col-md-10 col-sm-8 col-xs-6"> <input type="text" name="username" id="username" class="form-control" /> </div> </div> </form> </div> <!-- 輸入框大小會隨著瀏覽器大小的變化而變化，自己也可以試一試，挺好玩的。 --> <!-- end : demo --> <!-- NO.1 加載框架依賴的jQuery文件(壓縮版)，版本是1.12.4 --> <script src="bootstrap/js/jquery.min.js"></script> <!-- NO.2 加載Bootstrap的所有JS插件，版本是3.3.7 --> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
?
result
?
resource
- [ 文檔 ] getbootstrap.com/docs/3.3
- [ 源碼 ] github.com/twbs/bootstrap
- [ 源碼 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
- [ 平臺 ] www.cnblogs.com
- [ 平臺 ] github.com
- [ 擴展 - 平臺] www.bootcss.com
- [ 擴展 - 瀏覽器 ] www.mozilla.org/zh-CN/firefox/developer
?
Bootstrap是前端開源框架，優秀，值得學習。
博文講述的是V3版本，更為先進的是V4版本。學有余力的話，可作簡單地了解。
面對開源框架，分析、領悟與應用，能對其進行加減裁化，隨心所欲而不逾矩。
博文的質量普通，僅供參考。盲目復制，處處是坑。Think twice before you act(三思而後行)！
Bootstrap3基礎 form-horizontal 表單元素橫向布局 簡單示例