練習 bootstrap

看書看到講解 bootstrap 的部分
每次到這種章節都會疑問
該背嗎?
還是有印象就好
可是有印象就是要背阿
所以打算練習並且記錄一下
忘記了還可以到這邊來看XD

因為是按照書上給的範例練習
所以可能並不是所有的都有

Bootstrap 官網
https://getbootstrap.com/docs/

更多的 Components
https://getbootstrap.com/docs/3.3/components/

Panel 面板

1
<div class="panel panel-primary">
2
<div class="panel-heading"><h4 class="text-center">heading</h4></div>
3
<div class="panel-body">body</div>
4
<div class="panel-footer">footer</div>
5
</div>>

heading

body
footer

Button 按鈕

1
<div class="container">
2
<button type="button" class="btn">Button</button>
3
<button type="button" class="btn btn-default">Default</button>
4
<button type="button" class="btn btn-primary">Primary</button>
5
<button type="button" class="btn btn-success">Success</button>
6
<button type="button" class="btn btn-info">Info</button>
7
<button type="button" class="btn btn-warning">Warning</button>
8
<button type="button" class="btn btn-danger">Danger</button>
9
<button type="button" calss="btn btn-link">Link</button>
10
</div>

Jumbotron 超大螢幕

1
<div class="jumbotron">
2
<h1>Jumbotron 超大螢幕</h1>
3
<p class="text-success">Bootstrap 基本語法解說，包括 Bootstrap 樣式及元件的應用</p>
4
<p><a class="btn btn-primary btn-lg" href="http://getbootstrap.com/" role="button" >Bootstrap 官網</a></p>
5
</div>

Jumbotron 超大螢幕

Bootstrap 基本語法解說，包括 Bootstrap 樣式及元件的應用

Bootstrap 官網

Glyphicons 字型圖示

1
<span class="glyphicon glyphicon-home"></span>
2
<span class="glyphicon glyphicon-user"></span>
3
<span class="glyphicon glyphicon-search"></span>
4
<span class="glyphicon glyphicon-envelope"></span>
5
<span class="glyphicon glyphicon-info-sign"></span>
6
<span class="glyphicon glyphicon-cog"></span>

Label 標籤

1
<div>
2
<span class="label label-danger">New</span>
3
<span class="label label-success">Stable</span>
4
<span class="label label-primary">Coming soon</span>
5
<span class="label label-info">Ready</span>
6
<span class="label label-default">Ready</span>
7
<span class="label label-warning">ReadY</span>
8
</div>
New Stable Coming soon Ready Ready Ready

Input groups

1
<div class="input-group">
2
	<span class="input-group-addon">
3
		<span class="glyphicon glyphicon-user"></span>
4
	</span>	
5
	<input type="text" class="form-control" placeholder="Your Name.">
6
	<span class="input-group-addon">姓名</span>
7
</div>
姓名

Badge 徽章標誌

1
<span class="badge">Badge</span>
2
<a href="#">未讀郵件<span class="badge">10</span></a>
3
<button class="btn btn-danger" type="button">
4
新訊息<span class="badge">5</span>
5
</button>
Badge 未讀郵件10

文字顏色

1
<b class="text-primary">text-primary</b>
2
<b class="text-muted">text-muted</b>
3
<b class="text-success">text-success</b>
4
<b class="text-info">text-info</b>
5
<b class="text-warning">text-warning</b>
6
<b class="text-danger">text-danger</b>
7
</div>
text-primary text-muted text-success text-info text-warning text-danger

背景顏色

1
<div>
2
<b class="bg-primary">bg-primary</b>
3
<b class="bg-success">bg-success</b>
4
<b class="bg-info">bg-info</b>
5
<b class="bg-warning">bg-warning</b>
6
<b class="bg-danger">bg-danger</b>
7
</div>
bg-primary bg-success bg-info bg-warning bg-danger

文字對齊

1
<p class="text-left">文字靠左對齊</p>
2
<p class="text-center">文字置中對齊</p>
3
<p class="text-right">文字靠右對齊</p>

文字靠左對齊

文字置中對齊

文字靠右對齊

Table 表格

1
<table class="table table-bordered table-striped">
2
<thead class="bg-primary">
3
<tr>
4
<th>ID</th>
5
<th>Name</th>
6
<th>Phone</th>
7
<th>Mail</th>
8
</thead>
9
</table>
ID Name Phone Mail

Navbar 導航列

1
<div class="navbar navbar-inverse">
2
	<div class="container">
3
		<div class="navbar-header row">
4
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
5
			<span class="icon-bar"></span>
6
			<span class="icon-bar"></span>
7
			<span class="icon-bar"></span>
8
			</button>
9
			<a class="navbar-brand" href="#">
10
				Bootstrap 語法
11
			</a>
12
		</div>
13
		<div class="navbar-collapse collapse">
14
			<ul class="nav navbar-nav">
15
				<li><a href="#">產品</a></li>
16
				<li><a href="#">關於</a></li>
17
				<li><a href="#">客服</a></li>
18
			</ul>
19
		</div>
20
	</div>
21
</div>
Bootstrap 語法

Dropdown 

1
<div class="dropdown">
2
	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenu1" aria-haspopup="true" aria-expanded="true">
3
	下拉選單
4
	<span class="caret></span>
5
	</button>
6
	<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
7
		<li><a href="#">1</a></li>
8
		<li><a href="#">2</a></li>
9
		<li><a href="#">3</a></li>
10
		<li role="separator" calss="divider"></li>
11
		<li><a href="#">4</a></li>
12
		<li><a href="#">5</a></li>
13
	</ul>
14
</div>

List group

1
<ul class="list-group">
2
	<li class="list-group-item list-group-item-info">
3
		<span class="badge">3</span>
4
		攜帶物品
5
	</li>
6
		<li class="list-group-item list-group-item-info">
7
		<span class="badge">16</span>
8
		代辦事項
9
	</li>
10
		<li class="list-group-item list-group-item-info">
11
		<span class="badge">1</span>
12
		未聯絡人
13
	</li>
14
</ul>
  • 3 攜帶物品
  • 16 代辦事項
  • 1 未聯絡人

還有更多的用法可以到官網去查哦~

在文章開頭有連結 點我跳過去