排版
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>排版</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<h1>標題</h1><hr>
<p>前兩種方式等價，第三種可以讓標題更大、更鮮明</p>
<div class="row">
<div class="col">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</div>
<div class="col">
<p class="h1">h1</p>
<p class="h2">h2</p>
<p class="h3">h3</p>
<p class="h4">h4</p>
<p class="h5">h5</p>
<p class="h6">h6</p>
</div>
<div class="col">
<h1 class="display-1">display-1</h1>
<h1 class="display-2">display-2</h1>
<h1 class="display-3">display-3</h1>
<h1 class="display-4">display-4</h1>
</div>
</div>
<h1>Leader中心內容</h1><hr>
<p class="lead">通過應用 .lead樣式，可以定義一箇中心段落，用於提示這是中心內容或重要內容。</p>
<h1>列表並排</h1><hr>
<p>使用.list-inline 、 .list-inline-item結合，可以實現列表逐行顯示（默認不引用且無父元素影響也是逐行顯示）、或單行並多列並排（遵循從左對右的原則、並清除margin方法）。</p>
<ul class="list-inline">
<li class="list-inline">三樓（list-inline）</li>
<li class="list-inline">二樓（list-inline）</li>
<li class="list-inline">一樓（list-inline）</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">一單元（list-inline-item）</li>
<li class="list-inline-item">二單元（list-inline-item）</li>
<li class="list-inline-item">三單元（list-inline-item）</li>
</ul>
<h1>dl表格式水平描述</h1><hr>
<p>使用BootStrap柵格系統的預定義類（或者說語義化mixins），可以水平對齊條目和描述。對於較長的條目，你可以視情況添加一個.text-truncate類，從而用省略號截斷文本。</p>
<dl class="row">
<dt class="col-sm-3">描述列表</dt>
<dd class="col-sm-9">一個關於描述列表的兩端對齊</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
</body>
</html>
圖片
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>圖片</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<p>給圖片添加.img-fluid樣式，或定義max-width: 100%、height:auto;樣式，即可賦得響應式特性，圖片大小會隨着父元素大小同步縮放。</p>
<p>使用.img-thumbnail屬性來使圖片自動被加上一個帶圓角且1px邊界的外框縮略圖樣式</p>
<img src="Desert.jpg" class="img-fluid img-thumbnail" alt="圖片加載失敗">
<hr>
<div>
<p>使用rounded將圖片變成圓角，使用float-left和float-right分別設置圖片左右浮動</p>
<img src="Jellyfish.jpg" class="rounded float-left" style="width: auto;height: auto;max-width: 10%;max-height: 10%;" alt="圖片加載失敗">
<img src="Koala.jpg" class="rounded float-right" style="width: auto;height: auto;max-width: 10%;max-height: 10%;" alt="圖片加載失敗">
</div>
<p>pictrue元素可實現圖片在不同屏幕下的針對性響應式，但兼容性實在不敢恭維，不建議用</p>
<picture>
<source srcset="Jellyfish.jpg.jpg" media="(min-width: 800px)">
<source srcset="Koala.jpg.jpg" media="(min-width: 600px)">
<source srcset="Lighthouse.jpg">
<img src="Penguins.jpg" alt="這是當瀏覽器不支持picture標籤時顯示的圖片">
</picture>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
</body>
</html>
表格
<table class="table">
<table class="table table-dark">
<table class="table">
<thead class="thead-dark">
<table class="table">
<thead class="thead-light">
<table class="table table-striped">
<table class="table table-striped table-dark">
<table class="table table-bordered">
<table class="table table-bordered table-dark">
<table class="table table-borderless">
<table class="table table-borderless table-dark">
<table class="table table-hover">行懸停
暗效果略；
<table class="table table-sm">行緊湊
暗效果略；
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
