前端學習 之 Bootstrap（二）
1、代碼
- 內聯代碼：用
<code>包裹，可是須要用<和>表示尖括號。 - 鍵盤輸入：用
<kbd>包裹表示鍵盤輸入的內容。 - 多行代碼：用
<pre>包裹多行代碼，一樣須要對尖括號作轉義處理。可使用 .pre-scrollable 類，其做用是固定代碼框大小設置 max-height 爲 350px ，並在垂直方向展現滾動條 - 變量：用
<var>表示變量 - 程序輸出：
<smp>表示程序輸出
2、表格
一、基本表格
<table>
<thead>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
</tr>
</thead>
<tbody>
<tr >
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
<td>內容四</td>
</tr>
<tr>
<td>內容一</td>
<td>內容二</td>
<td>內容三</td>
<td>內容四</td>
</tr>
</tbody>
</table>
二、示例：
| 一 | 二 | 三 | 四 |
|---|---|---|---|
| 內容一 | 內容二 | 內容三 | 內容四 |
| 內容一 | 內容二 | 內容三 | 內容四 |
三、Bootsrap表格類
基本表格樣式:css
- 定義表格：
class="table"表示表格，賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線 - 斑馬條紋：經過
.table-striped類能夠給 表格體以內的每一行增長斑馬條紋樣式 - 表格邊框：添加
.table-bordered類爲表格和其中的每一個單元格增長邊框 - 懸停高亮：經過添加
.table-hover類可讓每一行對鼠標懸停狀態做出高亮響應 - 表格緊縮：經過添加
.table-condensed類可讓表格更加緊湊，單元格中的內補（padding）均會減半
特殊狀態：html
- .active 鼠標懸停在行或單元格上時所設置的顏色
- .success 標識成功或積極的動做
- .info 標識普通的提示信息或動做
- .warning 標識警告或須要用戶注意
- .danger 標識危險或潛在的帶來負面影響的動做
3、表單
一、基本表單
<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>
二、Bootstrap表單
注意：
1 全部設置了 .form-control 類的輸入框，文本框 和多選框 元素都將被默認設置寬度屬性爲 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。
2 爲了可讀性和更好的添加各類類屬性，儘可能將每個表單控件都單獨放在一個div中。
3 爲每個input輸入框都要添加label標籤，這是爲了屏幕閱讀器識別表單。即便不想顯示label元素，也可以使用.sr-only 類將其隱藏。
4 作內聯表單，並未input輸入框添加圖標的時候，須要將span和input標籤維持在一個div中，併爲div添加input-group類
5 多選框組的每個多選框都要包裹在一個div中，而且在div添加類checkbox或者radio表示，單選則標籤的name須要保持一致
6 反饋圖標只能做用在具備form-control的input框上，而且須要在div包裹的內聯span和input以外，不然會亂版
正確示例git
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
- 內聯表單： .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件
- 水平排列：爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，能夠將 label 標籤和控件組水平並排佈局。這樣作將改變 .form-group 的行爲，使其表現爲柵格系統中的行（row），所以就無需再額外添加 .row 了
- 控件尺寸：經過 .input-lg 相似的類能夠爲控件設置高度，經過 .col-lg-* 相似的類能夠爲控件設置寬度
- 校驗狀態：爲包裹表單控件的div添加has-success，has-warning，has-error表示不一樣的狀態
4、按鈕
通常可用按鈕的元素bootstrap
<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">
對於a，做爲按鈕添加了role="button"，此時已徹底失去了連接的做用，而在導航的時候，只能使用button做爲按鈕，因此最好使用button用做按鈕api
- 不一樣狀態
- btn-default：默認
- btn-primary：首選項
- btn-success：成功
- btn-info：通常信息
- btn-warning：警告
- btn-danger"：危險
- btn-link：連接
- 不一樣尺寸：使用 .btn-lg、.btn-sm 或 .btn-xs 就能夠得到不一樣尺寸的按鈕
- 塊級按鈕：添加btn-block可使整個按鈕佔據整個控件
5、練習
簡單的登錄頁面樣式ide
一、代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
body{
padding:0;
margin:0;
}
#bg{width:100%;height:100%;position:absolute;z-index:-1;opacity: 0.8}
#login{position:absolute;left:22.5%;top:40%;margin-left:-150px;margin-top:-100px; }
</style>
</head>
<body>
<div class="container" id="login">
<div class="row">
<div class="text-center"><h3> Please Login</h3></div>
</div>
<div class="row table-bordered">
<div class="col-md-6">
<h3 class="text-center text-capitalize"> my blog </h3>
<p>記錄點滴，記錄成長，Adobe LiveCycle Document Security Server提供了在PDF表單和文檔中支持的文檔加密和數字簽名服務。Adobe LiveCycle Document
Security Server provides services for document encryption and digital signature support on PDF forms and
documents</p>
<blockquote class="blockquote-reverse">
<p>stay hungry stay foolish<cite title="lincoln">————Ahrabam Lincoln</cite></p>
</blockquote>
</div>
<div class="col-md-6">
<br>
<form role="form" class=" form-horizontal">
<div class="form-group has-feedback">
<label for="Email" class="control-label col-md-2">Email：</label>
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon" style="BACKGROUND-COLOR: transparent;">@</span>
<input type="email" class="form-control" id="Email" placeholder="Email" style="BACKGROUND-COLOR: transparent;"
aria-describedby="EmailHelp" autofocus required>
</div>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<span class="help-block sr-only" id="EmailHelp">Correct Email</span>
</div>
</div>
<div class="form-group has-feedback">
<label for="password4" class="control-label col-md-2">Password：</label>
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon" style="BACKGROUND-COLOR: transparent;"> = </span>
<input type="password" class="form-control" id="password4"
style="BACKGROUND-COLOR: transparent;" placeholder="Password">
</div>
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="col-md-offset-2">
<label class="radio-inline">
<input type="radio" name="role" value="student" checked> 學生
</label>
<label class="radio-inline">
<input type="radio" name="role" value="teacher"> 老師
</label>
<label class="radio-inline">
<input type="radio" name="role" value="admin" disabled> 管理員
</label>
<br>
<br>
<div class="form-inline">
<button class="btn btn-primary" style="BACKGROUND-COLOR: transparent;">登陸入口</button>
<button class="btn btn-primary" style="BACKGROUND-COLOR: transparent;" disabled>登陸入口2</button>
<button class="btn btn-link">註冊</button>
</div>
</div>
</form>
</div>
</div>
</div>
<img id="bg" src="./img/1.jpg" alt="..." class="img-rounded img-responsive">
</body>
</html>
二、示例
相關文章
- 1. 前端學習 之 Bootstrap （一）
- 2. 前端之Bootstrap(二)
- 3. 前端學習之Bootstrap學習
- 4. 前端學習1 bootstrap
- 5. 前端框架——BootStrap學習
- 6. 前端學習 之 CSS（二）
- 7. My前端bootstrap（二）
- 8. 前端之Bootstrap
- 9. 前端之bootstrap
- 10. 06.前端之BootStrap
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Kotlin學習（二）基本類型
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端學習 之 Bootstrap （一）
- 2. 前端之Bootstrap(二)
- 3. 前端學習之Bootstrap學習
- 4. 前端學習1 bootstrap
- 5. 前端框架——BootStrap學習
- 6. 前端學習 之 CSS（二）
- 7. My前端bootstrap（二）
- 8. 前端之Bootstrap
- 9. 前端之bootstrap
- 10. 06.前端之BootStrap