學習使用bootstarp基本控制項（table、form、button）_javascript技巧
bootstrap為我們定義了簡潔易用的樣式，我們只需要很少的樣式指定，就可以完成簡約優雅的頁面展示。
本篇主要介紹以下幾個基本控制：
1. table
2. form
3. button
1. 表格（table）依舊使用
| 來表示表格。有如下的類別來控制table的屬性， table樣式預設會佔滿父容器
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-bordered table-striped table-hover">
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
</div>
</div>
登入後複製 將任何.table包裹在.table-responsive中即可建立響應式表格，其會在小螢幕裝置上（小於768px）水平捲動。當螢幕大768px寬度時，水平捲軸消失。 2. 表單form, 有如幾種樣式定義
lable與控制項要用form-group類型的div包起來，預設表單如下
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label> <input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
登入後複製 內聯表單，為label指定sr-only類別，可隱藏掉標籤，但必須 不可省略lable.
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1" class="sr-only">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label> <input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
登入後複製 水平類型的表單，要為lable與標籤組指定長度， 採用柵格系統的佈局方式。 label右對齊，標籤組左對齊。
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="exampleInputEmail1" class="col-md-2 control-label">Email
address</label>
<div class="col-md-8">
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter email">
</div>
</div>
<div class="form-group" >
<label for="exampleInputPassword1" class="col-md-2 control-label">Password</label>
<div class="col-md-8">
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="checkbox col-md-offset-2">
<label> <input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default col-md-offset-2">Submit</button>
</form>
</div>
登入後複製 form表單驗證，bootstrap3支援表單的自訂驗證。 加入req uired表示表單必填，node.setCustomValidity可以設定表單的自訂驗證
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="exampleInputEmail1" class="col-md-2 control-label">Email
address</label>
<div class="col-md-8">
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="password1" class="col-md-2 control-label">Password</label>
<div class="col-md-8">
<input type="password" class="form-control"
id="password1" placeholder="Password" required onchange="checkPassword()">
</div>
</div>
<div class="form-group">
<label for="password2" class="col-md-2 control-label" onchange="checkPassword()"> Password2</label>
<div class="col-md-8">
<input type="password" class="form-control"
id="password2" placeholder="Password2" required>
</div>
</div>
<div class="checkbox col-md-offset-2">
<label> <input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default col-md-offset-2">Submit</button>
</form>
</div>
<script>
function checkPassword() {
var pwd1 = $("#password1").val();
var pwd2 = $("#password2").val();
if (pwd1 != pwd2) {
document.getElementById("password1").setCustomValidity("两次输入的密码不一致");
} else {
document.getElementById("password1").setCustomValidity("");
}
}
</script>
登入後複製 3. button的樣式
使用.btn-lg、.btn-sm、.btn-xs可以獲得不同尺寸的按鈕， 給按鈕添加.btn-block可以使其充滿父節點100%的寬度，而且按鈕也變為了塊級（block）元素， 、
<div class="container">
<button type="button" class="btn btn-default btn-block">Default</button>
<button type="button" class="btn btn-primary btn-block">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">链接</button>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
</div>
登入後複製 以上就是本文的全部內容，希望對大家的學習有所幫助。 |
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
html怎麼設定button大小及顏色
Mar 05, 2021 pm 05:16 PM
在html中，可以使用width和height屬性來設定button元素的大小，使用background-color屬性來設定button元素的顏色，具體語法為「button{width:寬度值;height:高度值;background-color: 顏色值;}」。
vue3 table元件怎麼使用
May 12, 2023 pm 09:40 PM
基礎表格先開發table組件之前，先想好要用什麼樣式的api，因為筆者在生產工作中用的都是element，所以前面幾個組件風格和element類似，但是這次不打算用element的風格了，打算換一種，直接展示：我們期望使用者這樣使用：constdataList=[{id:1,name:'《JavaEE企業應用實戰》',author:'dev1ce',price:'10.22',desc:&# 3
BinaryX再次更名FORM，還給社區的FOUR即將暴漲？
Mar 04, 2025 pm 12:00 PM
BinaryX的代幣更名：從BNX到FOUR，再到FORM，戰略調整背後的深層含義BinaryX近期將代幣符號從$FOUR更改為$FORM，引發業界廣泛關注。這並非BinaryX首次更名，其代幣符號曾經歷BNX到FOUR的轉變。本文將深入探討這一系列更名背後的戰略意圖。一、代幣更名歷程與戰略考量BinaryX最初於2021年推出基於BNB鏈的$BNX代幣，用於支持其Play-to-Earn（P2E）遊戲生態。 2024年初，為優化經濟模型，BinaryX對$BNX進行了分割，並逐漸拓展至GameF
html5中可以有多個form嗎
Aug 01, 2022 pm 05:28 PM
html5中可以有多個form。在同一個HTML的頁面中規則上允許可以用到多個form標籤，但是為了防止提交時後台無法識別，需要給表單加上不同的ID或者class，語法「<from action="url" id=" id值1">表單元素</from><from action="url" id="id值2">表單元素</from>.....」。
html5定義表單的標籤是什麼
Jul 26, 2022 pm 04:26 PM
html5定義表單的標籤是「<form>」。 form標籤用於建立供使用者輸入的HTML表單（表單域），以實現使用者資訊的收集和傳遞，form中的所有內容都會提交給伺服器；語法「<form action="提交地址" method="提交方式" name="表單名稱">表單控制項</form>」。 form表單中可包含一個或多個表單元素，例如input、select、textarea。
react中怎麼禁止button渲染
Jan 19, 2023 pm 01:58 PM
react中禁止button渲染的方法：1、開啟對應的js程式碼檔案；2、找到「const flags = true;<Button disabled={flags}/>」並將其中的「true」值修改為「false」即可禁止button。
html中button標籤的用法
Feb 24, 2021 pm 02:16 PM
在html中，button標籤用於定義一個按鈕，在元素內部可以放置內容，例如文字或圖像等；使用語法為“<button type="button" onclick="js程式碼">按鈕</button>”， button標籤的屬性和js程式碼結合可以實現交換效果。
