3-3 組件
3-4 實做
- 請複製空白架構 存檔 ex_3_1.html
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ex_3_1.html</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 --> <!-- 警告：Respond.js 無法在 file:// 協定下運作 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- jQuery (Bootstrap 所有外掛均需要使用) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 --> <script src="js/bootstrap.min.js"></script> </head> <body> <h1 class="text-center">ex_3_1.html</h1> </body> </html> -
標題
<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>
-
對齊
<div class="container"> <p class="text-left">靠左對齊文字。</p> <p class="text-center">置中對齊文字。</p> <p class="text-right">靠右對齊文字。</p> </div>
-
無序項目
<div class="container"> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </div> <hr>
-
有序項目
<div class="container"> <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> </div> <hr> -
按鈕
<div class="container"> <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> <hr> -
按鈕樣式與顏色
<div class="container"> <!-- Standard button --> <button type= "button" class= "btn btn-default" >（默認樣式）Default </button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type= "button" class= "btn btn-primary" >（首選項）Primary </button> <!-- Indicates a successful or positive action --> <button type= "button" class= "btn btn-success" >（成功）Success </button> <!-- Contextual button for informational alert messages --> <button type= "button" class= "btn btn-info" >（一般信息）Info </button> <!-- Indicates caution should be taken with this action --> <button type= "button" class= "btn btn-warning" >（警告）Warning </button> <!-- Indicates a dangerous or potentially negative action --> <button type= "button" class= "btn btn-danger" >（危險）Danger </button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type= "button" class= "btn btn-link" >（鏈接）Link </button> </div> <hr>
-
按鈕尺寸
<div class="container"> <p> <button type= "button" class= "btn btn-primary btn-lg" >（大按鈕）Large button </button> <button type= "button" class= "btn btn-default btn-lg" >（大按鈕）Large button </button> </p> <p> <button type= "button" class= "btn btn-primary" >（默認尺寸）Default button </button> <button type= "button " class= "btn btn-default" >（默認尺寸）Default button </button> </p> <p> <button type= "button" class= "btn btn-primary btn-sm" >（小按鈕） Small button </button> <button type= "button" class= "btn btn-default btn-sm" >（小按鈕）Small button </button> </p> <p> <button type= "button" class = "btn btn-primary btn-xs" >（超小尺寸）Extra small button </button> <button type= "button" class= "btn btn-default btn-xs" >（超小尺寸）Extra small button </button> </p> </div> <hr>
-
圖標 + 按鈕
<div class="container"> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> </div> <hr>
-