Jumbotron

Jumbotron（超大螢幕）會建立一個大的灰色背景框，裡面可以設定一些特殊的內容和資訊

例項

<div class="jumbotron">1</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">2</div>
</div>
 

警報

關閉警報

在容器中引用 .alert-dismissible

例項

<div class="container-fluid">
<div class="alert alert-success" role="alert">成功</div>
<div class="alert alert-info" role="alert">注意</div>
<div class="alert alert-warning" role="alert">警告</div>
<div class="alert alert-danger" role="alert">失敗</div>
<div class="alert alert-primary" role="alert">重要</div>
<div class="alert alert-secondary" role="alert">次要</div>
<div class="alert alert-light" role="alert">淺灰色</div>
<div class="alert alert-dark" role="alert">深灰色</div>
<div class="alert alert-dark" role="alert">
	<a href="#" class="alert-link">這是個匹配色連結</a>
	<a href="#" >這是個普通連結</a>
</div>

<div class="alert alert-success alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
  	<span aria-hidden="true">&times;</span>
  </button>成功
</div>
 

除此以外可以使用JavaScript行為以解除警報

<script type="text/javascript">
	$(function(){
   		 $("#close").on("click",function(){
              $(this).alert("close");
		});
	});
</script>
<div class="alert alert-success " role="alert" >
警告 <button type="button" class="btn btn-danger" id="close">關閉</button> 
</div>

方法

事件
Bootstrap警報外掛提供額外的事件，可以直接取得呼叫方法和函式。

例

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

按鈕

	<button type="button" class="btn">基本按鈕</button>
	<button type="button" class="btn btn-primary">主要按鈕</button>
	<button type="button" class="btn btn-secondary">次要按鈕</button>
	<button type="button" class="btn btn-success">成功按鈕</button>
	<button type="button" class="btn btn-info">資訊按鈕</button>
	<button type="button" class="btn btn-warning">警告按鈕</button>
	<button type="button" class="btn btn-danger">危險按鈕</button>
	<button type="button" class="btn btn-dark">黑色按鈕</button>
	<button type="button" class="btn btn-light">淺色按鈕</button>
	<button type="button" class="btn btn-link">連結按鈕</button>

按鈕類可用於 <a>, <button>, 或 <input> 元素上:

例

<a href="#" class="btn btn-danger" role="button">按鈕</a>
<input type="button" class="btn btn-info" value="輸入框按鈕">
<input type="submit" class="btn btn-info" value="提交按鈕">

通過在.btn-outline-*類為以實現邊框形式按鈕

例

<button type="button" class="btn btn-outline-danger">危險按鈕</button>

通過在.btn-*類為按鈕設定大小

例

	<button type="button" class="btn btn-danger btn-lg">危險按鈕</button>
	<button type="button" class="btn btn-danger">危險按鈕</button>

通過新增 .btn-block 類可以設定塊級按鈕

例

	<button type="button" class="btn btn-danger btn-block">危險按鈕</button>
	<button type="button" class="btn btn-danger">危險按鈕</button>

通過新增 .active類 與 disabled屬性以啟用和禁用按鈕,<a>元素不支援 disabled 屬性，可以通過新增 .disabled 類來禁止連結的點選。

例

<button type="button" class="btn btn-danger active">危險按鈕</button>
<a href="#" class="btn btn-danger disabled" >危險按鈕</a>
<button type="button" class="btn btn-danger " disabled>危險按鈕</button>
<button type="button" class="btn btn-danger">危險按鈕</button>