Bootstrap 學習筆記 by 黃禹翔

Bootstrap 學習筆記
奮鬥豬科技黃禹翔
line id:0978643940
版權所有請註名出處歡迎分享 ~
在學習上有遇到問題，也歡迎隨時與我聊聊交流交流
奮鬥豬科技網址 https://goo.gl/H4s2EA

大綱
• 下載
• 基本元素
• Grid System(xs,sm,md,lg)
• 字型
• Alert
• confirm
• 圖片
• 在div中的圖片置中
• 按鈕
• 分頁
• Form與icon
• Tables
• 基本程式與glyphicons icon
• Panel
• 表單布局
• Block, inline, inline-block差別
• Form-inline與input-group一行
• Input元素
– Input
– Input group
– textarea
– checkbox
– radio
– Select 與 multi select
• Carousel 跑馬燈使用
• 輪播元件如何全版
• 調整 input-group 高度
• NavBar 永遠在螢幕上方
• 拖拉捲軸換背景

大綱 2
• 滑動頁面動畫AOS
• jQuery block UI
• 手機版左選單
• 讓圖片自動縮放
• Css選擇器
• 遇到的問題
• 測試自已的網站速度

延伸套件
• 使用 sweetalert 元件
• 引入使用的方法
• 常用語法
• 選擇性語法
• 一秒沒按就消失視窗
• confirm

延伸套件
• Affix
• Alert
• Button
• Carousel
• Collapse
• Dropdown
• Modal
• Popover
• Scrollspy內容出處
Tab
• Tooltip
• 套件總整理
• AOS滑動頁面動態效果

遇到的問題
• Input與button被斷行

相關參考網址
• http://getbootstrap.com/
• https://www.w3schools.com/bootstrap/
• http://www.runoob.com/bootstrap

基本程式 ( 含有 glyphicons)
<!DOCTYPE html>
<html lang="en">
<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>Bootstrap 101 Template</title>

<link href="css/bootstrap.css" rel="stylesheet">



<style>
.glyphicon {
font-size: 30px;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<div style="height:100px;width:100px;">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/bootstrap.js"></script>
</body>
</html>

基本內容
<div class="container theme-showcase" role="main">
<div class="jumbotron">
<h1> 標題 1</h1>
<p> 內容內容內容 </p>
</div>
</div>

Grid System 允許一頁有 12 欄位
(D:wwwrootbs)
Grid 類別有 4 種 (xs,sm,md,lg)
• xs ( 針對手機 ) < 768
• sm( 針對平板 ) < 992
• md( 針對桌機 ) < 1200
• lg ( 針對大尺寸桌機 ) >1200

col-xs-12, col-sm-12, col-md-12, col-lg-12
• xs 768( 內容寬度自動 )( 欄寬自動 )( 排水溝 30 每邊 15)
• sm 992( 內容寬度 750)( 欄寬 <62)( 排水溝 30 每邊 15)
• md 1200( 內容寬度 970)( 欄寬 <81)( 排水溝 30 每邊 15)
• lg 1200( 內容寬度 1170)( 欄寬 <97)( 排水溝 30 每邊 15)

Grid System Rules
• 為了讓可以對齊與 padding ， Rows 必需被放在 .container(fixed-
width 大尺寸下沒填滿畫面 ) 或 .container-fluid(full-width 大尺寸下填
滿畫面 )
• 使用 rows 來建立欄位的水平群組
• 預先定義的類別如 .row 和 .col-sm-4 ，可以快速製作 grid 佈局
• 透過 padding 來建立欄位的排水構。
• 透過 rows 類別的負邊距 (negative margin) 在第一或最後欄位偏移
padding
• Rows must be placed within a .container (fixed-width) or .container-
fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be
immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly
making grid layouts
• Columns create gutters (gaps between column content) via padding.
That padding is offset in rows for the first and last column via
negative margin on .rows
• Grid columns are created by specifying the number of 12 available
columns you wish to span. For example, three equal columns would

col-xs-12, col-sm-12, col-md-12, col-lg-12
<div class=“container">
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...<div class=“panel”></div>
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
...
</div>

字型 (bootstrap.min.css )
<style>
body,input,button,select,textarea{
font-family:
"Helvetica Neue",
Helvetica,
Arial,
" 微軟正黑體 ",
" 微 ? 雅黑 ",
"????",
"?? ??",
sans-serif;
/*font-size:108%;*/
}
/* h1,h2,h3,h4,h5,h6{ font-weight:normal; } */
h1,h2,h3,h4,h5,h6{
font-family:
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
}
.glyphicon {
font-size: 30px;
}
</style>

body {
font-family: "Helvetica Neue", Helvetica, Arial, " 微軟正黑體 ",
"Microsoft Jhenghei", " 微软雅黑 ", " メイリオ ", " 맑은 고딕 ", sans-
serif;
}
body,input,button,select,textarea{
font-family: "Helvetica Neue", Helvetica, Arial, " 微軟正黑體 ", " 微软
雅黑 ", " メイリオ ", " 맑은 고딕 ", sans-serif;
}
h1,h2,h3,h4,h5,h6{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Tables
<div class="table-responsive">
<table class="table table-bordered table-hover ">
<tr>
<td> </td>
</tr>
</table>
</div>

Alert
• <div class="alert alert-success">
• <strong>Success!</strong> Indicates a successful or positive action.
• </div>
• <div class="alert alert-info">
• <strong>Info!</strong> Indicates a neutral informative change or action.
• </div>
• <div class="alert alert-warning">
• <strong>Warning!</strong> Indicates a warning that might need attention.
• </div>
• <div class="alert alert-danger">
• <strong>Danger!</strong> Indicates a dangerous or potentially negative
action.
• </div>

• <div class="alert alert-danger">
• <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
• ( 加入上面這段，可以按 x 關閉 )
• <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
• </div>

confirm• function ConfirmDialog(message){
• $('<div></div>').appendTo('body')
• .html('<div><h6>'+message+'?</h6></div>')
• .dialog({
• modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
• width: 'auto', resizable: false,
• buttons: {
• Yes: function () {
• // $(obj).removeAttr('onclick');
• // $(obj).parents('.Parent').remove();
• $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
• $(this).dialog("close");
• },
• No: function () {
• $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
• $(this).dialog("close");
• }
• },
• close: function (event, ui) {
• $(this).remove();
• }
• });
• };
• ConfirmDialog('Are you sure');

圖片
• 圖片自適化加類別 class=‘img-responsive’
• <img src=“x.jpg"
– class=“img-rounded” 或 img-circle, img-thumbnial
– alt="Cinque Terre"
– width="304" height="236">

在 div 中的圖片置中
• 給 img style 屬性，並設定
• display: block /*for the img inside your div
*/ margin-left: auto margin-right: auto
• 或
• display: block /*for the img inside your div
*/ margin: 0 auto

btn-block
( 按鈕占滿畫面寬度 )
• <span class="btn-group inline">
• <button type="button" class="btn btn-lg btn-default btn-block"> 商店設定 </button>
• <button type="button" class="btn btn-lg btn-default" btn-block> 快建菜單 </button>
• <button type="button" class="btn btn-lg btn-default" btn-block> 升級商店 </button>
• </span>

btn-group inline
• <span class="btn-group inline">
• <button type="button" class="btn btn-lg btn-default"> 商店設定 </button>
• <button type="button" class="btn btn-lg btn-default"> 快建菜單 </button>
• <button type="button" class="btn btn-lg btn-default"> 升級商店 </button>
• </span>

Form-inline 無法讓輸入框滿頁
<form runat="server" id="form1" class="form-inline">
<div class="form-group">
<asp:TextBox runat="server" ID="keys" CssClass="form-control input-lg" />
</div>
<asp:Button runat="server" ID="btn_qry" CssClass="btn btn-lg btn-default"
Text=" 查詢 " />
</div>
</form>
解法
<div class="input-group input-group-lg">
<input type="text" class="form-control input-lg" id="search-church" >
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit">Search</button>
</span>
</div>

分頁
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>

前後翻頁
• <ul class="pagination">
• <li><a href="#">1</a></li>
• <li><a href="#">2</a></li>
• <li><a href="#">3</a></li>
• <li><a href="#">4</a></li>
• <li><a href="#">5</a></li>
• </ul>

改變 icon 大小
<style>
.glyphicon {
font-size: 30px;
}
</style>

• <div class="panel panel-primary">
• <div class="panel-heading">
• <h3 class="panel-title"> 軟體類研究 </h3>
• </div>
• <div class="panel-body">
• <h3> 人工智慧、大數據、物聯網、生活應用 </h3>
• <a href="DocsSoftware.aspx"><img
src="Imageshisresearch1711231226.jpg" border="0"
class="img-responsive" /></a>
•
• </div>
• </div>

紅 panel
/* 紅 panel */
.panel-store {
border-color: #a90017;
}
.panel-store > .panel-heading {
color: #fff;
background-color: #a90017;
border-color: #a90017;
}
.panel-store > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #a90017;
}
.panel-store > .panel-heading .badge {
color: #a90017;
background-color: #fff;
}
.panel-store > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #a90017;
}

表單佈局
• 垂直表單 Vertical form (this is default)
• 水平表單 Horizontal form
• 同行表單 Inline form

常用方式
• 基本
– <form>
– <div class="form-group">
– <label for="email_id">Email</label>
– <input type="email" class="form-control" id="email_id" placeholder="Email">
– </div>
– <button type="submit" class="btn btn-default"> 送出 </button>
– </form>
• 單行表單
– <form class="form-inline">
– <label>Name</label>
– <input type="text" class="form-control" id="aa">
– </div>
– <label>Email</label>
– <input type="email" class="form-control" id="bb">
– </div>
– <button type="submit" class="btn btn-default"> 送出 </button>
– </form>

• 水平表單
– <form class="form-horizontal">
– <div class=“form-group”>
– <label class="col-sm-2 control-label">Email</label>
– <div class="col-sm-10">
– <input type="email" class="form-control" id="aa">
– </div>
– </div>
– <label class=" col-sm-2 control-label ">Password</label>
– <div class="col-sm-10">
– <input type="password" class="form-control" id="bb" >
– </div>
– </div>
– </form>

• <div class="input-group input-group-lg">
• <span class="input-group-addon"> 使用者名稱 </span>
• <input type="text" id="aa" class="form-control" />
• </div>
• <span data-val-controltovalidate="aa"
• data-val-errormessage="* 必填 "
• id="MainContent_MyLogin_ctl01"
• class="field-validation-error"
• data-val="true"
• data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
• data-val-initialvalue=""
• style="visibility:hidden;">* 填 </span>
• <div class="input-group input-group-lg">
• <span class="input-group-addon"> 密碼 </span>
• <input type="password" id="bb" class="form-control" />
• <span class="input-group-btn">
• <input type="submit" value=" 登入 "
• class="btn btn-success btn-lg" />
• </span>
• </div>
• <span data-val-controltovalidate="MainContent_MyLogin_Password"
• data-val-errormessage="* 密碼欄位是必要欄位。 "
• id="MainContent_MyLogin_ctl03"
• class="field-validation-error"
• data-val="true"
• data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
• data-val-initialvalue=""
• style="visibility:hidden;">* 密碼欄位是必要欄位。 </span>

注意事項
• 在類別中不要把 form groups 與 input
groups 放在一起，而要把 input group 插在
form group 裡
• form-group
– input-group
• form-group-*
– form-control

.form-group
把此段 css 套用到
所有在 form-group-sm 下的 form-control 元素

• form-inline
– form-group
– form-control
– form-control-static

. form-control
• .form-control {
• display: block;
• width: 100%;
• height: 34px;
• padding: 6px 12px;
• font-size: 14px;
• line-height: 1.42857143;
• color: #555;
• background-color: #fff;
• background-image: none;
• border: 1px solid #ccc;
• border-radius: 4px;
• }

預設下
D:bexamples
• <input>
• <textarea>
• <select>
• 元素，都會直接被套用
– .form-control 類別

• <form method="post" action=""
– class="email-form"
– data="instapage-form" //
– novalidate="novalidate“ // 不驗證就送出表單
• >

Input 元件加大字型
• 網頁中使用的表單元件， class 都需要加 form-control
• 在元件的 class 屬性增加 input-lg
• .input-lg {
• height: 60px;
• line-height: 1.3333333;
• }
• <input id="usr" name="usr" type="text"
• class="form-control input-lg"
• placeholder=" 您的名字 ">

• 2751 .input-lg {
• font-size: 50px; /* 加這行 */
• 2766 .form-group-lg .form-control
• font-size: 18px; /* 會以 18 取代，而不是 50*/
• <div class="form-group-lg"
• <input id="usr" name="usr" type="text" class="input-lg
form-control"
• 如果有多個類別都有 font-size 屬性，會以行號最大的取
代

• form-group
– 的目的是為了要讓欄位間保留適當間距，設定
的方式為將欄位名稱和輸入項目的外面再加一
個 <div> 。
• form-control
– 的目的是讓輸入項目的寬度變成 100% 之外，
還會美化輸入項的外觀，使用方式是直接在輸
入項目設定，但這時候的欄位名稱和輸入項的
排列方式，會變成由上至下以垂直的方式排列
。

Input 元件加大字型
• .form-group-lg .form-control {
• height: 46px;
• line-height: 1.3333333;
• margin:10px 4px; /* 加這行 */
• }
• form class="form-horizontal"
• <div class="form-group-lg"
• <input class="form-control input-lg

• padding: 上右下左 ; // (4 個值 )
• Padding: ( 上下 ) ( 左右 ); // (2 個值 )
• padding: 上 ( 左右 ) 下 ; // (3 個值 )
• line-height: 行高

重要的使用概念
行數愈大的會蓋掉行數較小的
• 1616 .row { // 使用 row 會滿版
• margin-right: -15px;
• margin-left: -15px;
• 2556 .form-control {
• 2638 .form-group {
• margin-bottom: 15px; // 元件下面有 15px 的間距
• 2751 .input-lg {
• 2766 .form-group-lg .form-control {
• font-size: 30px; // 原本 18px
• margin:10px 4px; /* 翔加這行，覺得可以取代掉 */
• 2985 .form-horizontal .form-group {// 使用 .form-horizontal .form-group 會滿版
• margin-right: -15px;
• margin-left: -15px;

Inline 同行佈局
• 在 <form> 增加 form-inline 類別
• 在 <div> 增加 form-group 類別
• 若不要標籤的話，要增加 sr-only 類別

標準的表單佈局
• Wrap labels and form controls
– <div class=“form-group”> 能自動換行所有的
標籤與表單控制項
• 要對 <input>,<textarea>,<select> 控制元
素增加” .form-control “ 類別

水平佈局
• 在 <form> 增加 form-horizontal 類別
• 在 <label> 增加 control-label 類別

預設佈局
• 網格佈局 Grid classes
• 在水平佈局中，置中對齊標籤與表單元件
align labels and groups of form controls in
a horizontal layout

Input 支援五種元件
• input
• textarea
• checkbox
• radio
• select

input
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control"
id="pwd">
</div>
email
number
password
tel
url
text

textarea
<label for="comment">Comment:</label>
<textarea class="form-control"
rows="5"
Id="comment"></textarea>
</div>

checkbox
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
-----
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>

radio
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
--------
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>

select
• <div class="form-group">
• <label for="sel1">Select list:</label>
• <select class="form-control" id="sel1">
• <option>1</option>
• </select>
• </div>

Multi select
<label for="sel2">Mutiple select list (hold shift to select
more than one):</label>
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>

Static Control
如果要在水平表單的 label 後面增加說明的話，寫法如下
<form class="form-horizontal">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">someone@example.com</p>
</div>
</div>
</form>

Input Sizing in Forms
• 設定 input 元素的高度 .input-lg 與 .input-
sm
• 設定元素的寬度 .col-lg-* 與 col-sm-*

Input Groups
• .input-group 類別能幫 input 的前面或後面增
加 icon 或文字或按鈕 ( 放大鏡查詢 )
• <div class="input-group">
• <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
• <input id="email" type="text" class="form-control" name="email" placeholder="Email">
• </div>

input-group-addon
• input-group-addon 類別幫 input 的前面或後面
增加 icon 或文字
<input id="password" type="password"
• class="form-control" name="password" placeholder="Password">
• <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
• </div>

input-group-btn
• input-group-btn 類別幫 input 增加按鈕，
如查詢放大鏡
• <input type="text" class="form-control" placeholder="Search">
• <div class="input-group-btn">
• <button class="btn btn-default" type="submit">
• <i class="glyphicon glyphicon-search"></i>
• </button>
• </div>

Bootstrap Form Control States
INPUT FOCUS
DISABLED INPUTS
DISABLED FIELDSETS
READONLY INPUTS
VALIDATION STATES
ICONS
HIDDEN LABELS

增加 disabled 或 readonly 屬性
• INPUT FOCUS 增加陰影
• DISABLED INPUTS
• <label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
• <div class="col-sm-10">
• <input class="form-control" id=“aa" type="text"
• placeholder="Disabled input here..."
• disabled>
• </div>
• </div>
• 元件加 readonly 屬性控制無法輸入

DISABLED FIELDSETS
( 把群組下的元件 diable)
• 把 fieldset 下的元件都 diabled ，含 input 與 select 元件
• <fieldset disabled>
• <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
• <input type="text" id="disabledTextInput" class="form-control">
• </div>
• </div>
• <label for="disabledSelect" class="col-sm-2 control-label"></label>
• <select id="disabledSelect" class="form-control">
• <option>Disabled select</option>
• </select>
• </div>
• </div>
• </fieldset>

控制 input 裡面的小圖示
• 有加小圖示的話，一定要加 feedback
• <div class="form-group has-feedback has-success ">
• <label class=“col-sm-2 control-label” for=“inputSuccess”> 加入小圖 </label>
• <input type="text" class="form-control" id="inputSuccess">
• <span class="glyphicon glyphicon-ok form-control-feedback"></span>
• </div>
• </div> 會跑掉
控制外框前景顏色
會跑掉

控制 input 裡面的前景外框顏色
• .has-warning
• .has-error
• .has-success

隱藏 label( 不留空間 ) 使用 .sr-only 類
別

Carousel 跑馬燈使用
http://paladinprogram.blogspot.tw/2016/06/bootstrap-carousel.html

• Carousel 輪播元件的使用，只要在 div 將 class 指定為
carousel slide 就可以了。 data-ride="carousel" ，則是
讓 Carousel 在頁面上一載入就開始執行輪播。 data-
interval="3000" 則是設定每 3 秒換一張圖片。
• 《瀏覽控制器》，這指的是圖片上會出現的小白點、小圈
圈，如果你有四張圖片要輪播，就會有四個小白點。他是
透過 <ol> 、 <li> 來完成的。 ol 頁籤需要加上
carousel-indicators 樣式類別，而 li 頁籤，則是需要指
出 Carousel 元件 ID ： data-
target="#photoCarousel" ，輪播順序： data-slide-
to="0" ... ，而第一個 li 頁籤還需加上 class="active" ，
表示是從這裡開始的。

• 《建立相片清單》，則是實際用來定義照片來源集合的地方。他是由
兩層 div 來完成。第一層是容器，第二層則是個別每一張圖片的定
義。首先看第一層，僅需加上樣式類別 carousel-inner 即可。接著
看第二層，則是加上樣式類別 item ，不過，第一個圖片需額外多加
一個 active 的樣式類別。
• 在第二層的 div 裡，可以看到 <img> 頁籤，他的 src 屬性，就是
用來指出照片來源 URL 。如果還需要對照片加上說明的話，可以在
此多加一個具有樣式類別 carousel-caption 的 div ： <div
class="carousel-caption"> ，在這 div 裡，可以顯示照片說明。
• 《上下一張控制》，則是在照片的左右邊各產生一個按鈕，讓你可以
操作上一頁、下一頁的動作。 data-slide="prev" 、 data-slide="next"
分別指出了動作行為，而按鈕的形狀，則是用 <span> 以樣式類別
glyphicon glyphicon-chevron-left 、 glyphicon glyphicon-chevron-
right 所產生的圖形來表示。

<div id="carousel-example-generic"
class="carousel slide" <%-- 指定為輪播元件 --%>
data-ride="carousel" <%-- 指定載入就輪播 --%>
data-interval="1000" <%-- 指定 1 秒換一次 --%>
>
<ol class="carousel-indicators" <%-- ol 頁籤需要加上 carousel-indicators 樣式類別 --%>>
<li
data-target="#carousel-example-generic" <%-- 輪播元件的 ID ，例如 #id 的話，會去找下面
a class href="#id" --%>
data-slide-to="0" <%-- 輪播順序 --%>
class="active" <%-- 從這裡開始 --%>
></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div
class="carousel-inner" <%-- 定義照片來源集合的地方 , 由兩層 div 來完成。第一層是容器，第二層則是個別每一張
圖片的定義 --%>
role="listbox"
>
<div class="item active">
<a href="Maps.aspx"><img src="Images/calendars.jpg" alt="First slide"></a>

<div class="carousel-caption">
<h3> 照片說明 </h3>
<p> 說明內容 </p>
</div>

</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>

第一層
• <div id="carousel-example-generic"
• class="carousel slide" <%-- 指定為輪播元件 --%>
• data-ride="carousel" <%-- 指定載入就輪播 --%>
• data-interval="1000" <%-- 指定 1 秒換一次 --%>
• >
• 內包 <ol><li> 畫面上的小白圓點與
• <div class="carousel-inner" role="listbox">
• </div>

第二層 (ol 與 li)
• <ol class="carousel-indicators" <%-- ol 頁籤需要加上 carousel-indicators 樣式類別 --%>>
• <li
• data-target="#carousel-example-generic"
• <%-- 輪播元件的 ID ，例如 #id 的話，會去找下面 a class href="#id" --%>
• data-slide-to="0" <%-- 輪播順序 --%>
• class="active" <%-- 從這裡開始 --%>
• ></li>
• <li data-target="#carousel-example-generic" data-slide-to="1"></li>
• <li data-target="#carousel-example-generic" data-slide-to="2"></li>
• </ol>

第二層 (div class="carousel-inner")
<div
class="carousel-inner" <%-- 定義照片來源集合的地方 , 由兩層 div 來完成。第一層是容器，第二層
則是個別每一張圖片的定義 --%>
role="listbox"
>
<div class="item active">
<a href="Maps.aspx"><img src="Images/calendars.jpg" alt="First slide"></a>

<div class="carousel-caption">
<h3> 照片說明 </h3>
<p> 說明內容 </p>
</div>

</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>

上下頁切換

<a class="left carousel-control" href="#carousel-example-
generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-
hidden="true"></span>
<span class="sr-only"> 上一張 </span>
</a>
<a class="right carousel-control" href="#carousel-example-
generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-
hidden="true"></span>
<span class="sr-only"> 下一張 </span>
</a>

調整 input-group 高度
http://paladinprogram.blogspot.tw/2017/07/bootstrap-input-group.html

NavBar 永遠在螢幕上方
http://paladinprogram.blogspot.tw/2016/06/bootstrap-navbar_2.html

拖拉捲軸換背景
https://www.w3schools.com/howto/howto_css_parallax.asp
• <style>
• body, html {
• height: 100%;
• margin: 0;
• font: 400 15px/1.8 "Lato", sans-serif;
• color: #777;
• }
• .bgimg-1, .bgimg-2, .bgimg-3 {
• position: relative;
• opacity: 0.65;
• background-attachment: fixed;
• background-position: center;
• background-repeat: no-repeat;
• background-size: cover;
• }

• .bgimg-1 {
• background-image: url("img_parallax.jpg");
• min-height: 100%;
• }
• .bgimg-2 {
• background-image: url("img_parallax2.jpg");
• min-height: 400px;
• }
• .bgimg-3 {
• background-image: url("img_parallax3.jpg");
• min-height: 400px;
• }

• .caption {
• position: absolute;
• left: 0;
• top: 50%;
• width: 100%;
• text-align: center;
• color: #000;
• }
• .caption span.border {
• background-color: #111;
• color: #fff;
• padding: 18px;
• letter-spacing: 10px;
• }
• h3 {
• letter-spacing: 5px;
• text-transform: uppercase;
• font: 20px "Lato", sans-serif;
• color: #111;
• }
• /* Turn off parallax scrolling for tablets and phones */
• @media only screen and (max-device-width: 1024px) {
• .bgimg-1, .bgimg-2, .bgimg-3 {
• background-attachment: scroll;
• }
• }
• </style>

• <div class="bgimg-1">
• <div class="caption">
• <span class="border">SCROLL DOWN</span>
• </div>
• </div>
• <div style="color: #777;background-color:white;text-
align:center;padding:50px 80px;text-align: justify;">
• <h3 style="text-align:center;">Parallax Demo</h3>
• <p> 內文內文… </p>
• </div>

• <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
• </div>
• </div>
• <div style="position:relative;">
• <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
• <p> 內文內文 123</p>
• </div>
• </div>
• <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
• </div>
• </div>
• <div style="position:relative;">
• <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
• <p> 內文內文 456</p>
• </div>
• </div>
• <span class="border">COOL!</span>
• </div>
• </div>

• <img src="Images/adv/adv_0001.jpg" clas
s="img-responsive" border="0"/>

• 實際是被 input 的 class 的 width=100% 撐
掉了

被 class=‘form-control’ 蓋掉了

Input 與 btn 的高度不一樣

Bootstrap 學習筆記 by 黃禹翔

Recommended

Recommended

More Related Content

Similar to Bootstrap 學習筆記 by 黃禹翔

Similar to Bootstrap 學習筆記 by 黃禹翔 (20)

Recently uploaded

Recently uploaded (10)

Bootstrap 學習筆記 by 黃禹翔