<blockquoteclass="blockquote"><pclass="mb-0">霹靂卡霹靂拉拉 波波力那貝貝魯多。</p><footerclass="blockquote-footer">小魔女 <citetitle="Source Title">Do Re Mi</cite></footer></blockquote>
4.列表
列表清單預設會加入樣式,如果不要樣式可以用在很多地方,如 Footer
如果不要前面的點使用list-unstyled
ul為無序列表,ol為有序列表
<ulclass="list-unstyled"><li>Lorem ipsum dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Integer molestie lorem at massa</li><li>Facilisis in pretium nisl aliquet</li><li>Nulla volutpat aliquam velit
<ul><li>Phasellus iaculis neque</li><li>Purus sodales ultricies</li><li>Vestibulum laoreet porttitor sem</li><li>Ac tristique libero volutpat at</li></ul></li><li>Faucibus porta lacus fringilla vel</li><li>Aenean sit amet erat nunc</li><li>Eget porttitor lorem</li></ul>
<dlclass="row"><dtclass="col-sm-3">Description lists</dt><ddclass="col-sm-9">A description list is perfect for defining terms.</dd><dtclass="col-sm-3">Euismod</dt><ddclass="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dtclass="col-sm-3">Malesuada porta</dt><ddclass="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd><dtclass="col-sm-3 text-truncate">Truncated term is truncated</dt><ddclass="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd></dl>
<figureclass="figure text-center"><imgsrc="..."class="figure-img img-fluid rounded"alt="A generic square placeholder image with rounded corners in a figure."><figcaptionclass="figure-caption">A caption for the above image.</figcaption></figure>
<divclass="demo"><divclass="container"><divclass="row"><divclass="col">
1 of 3
</div><divclass="col-10">
2 of 3 (wider)
</div><divclass="col">
3 of 3
</div></div></div></div>
3. col-{size}-auto
能夠使box自己去適應文字寬度
<divclass="demo"><divclass="container"><divclass="row justify-content-md-center"><divclass="col col-lg-2">
1 of 3
</div><divclass="col-sm-auto">
Variable width content
</div><divclass="col col-lg-2">
3 of 3
</div></div><divclass="row"><divclass="col">
1 of 3
</div><divclass="col-md-auto">
Variable width content rfwegrebsvcgbesgzfeagawrb
</div><divclass="col col-lg-2">
3 of 3
</div></div></div></div>
<divclass="demo"><divclass="media"><imgclass="d-flex mr-3"src="http://lorempixel.com/output/people-q-c-64-64-5.jpg"alt="Generic placeholder image"><divclass="media-body"><h5class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<divclass="media mt-3"><aclass="d-flex pr-3"href="#"><imgsrc="http://lorempixel.com/output/people-q-c-64-64-5.jpg"alt="Generic placeholder image"></a><divclass="media-body"><h5class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div></div></div></div></div>
div class="alert alert-目標" role="alert">
This is a primary alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
</div>
二、取消 alert
加上data-dismiss="alert"取消alert
<divclass="demo"><divclass="alert alert-warning alert-dismissible fade show"role="alert"><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button><strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div></div>
<divclass="demo"><divclass="btn-toolbar mb-3"role="toolbar"aria-label="Toolbar with button groups"><divclass="btn-group mr-2"role="group"aria-label="First group"><buttontype="button"class="btn btn-secondary">1</button><buttontype="button"class="btn btn-secondary">2</button><buttontype="button"class="btn btn-secondary">3</button><buttontype="button"class="btn btn-secondary">4</button></div><divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text"id="btnGroupAddon">@</div></div><inputtype="text"class="form-control"placeholder="Input group example"aria-label="Input group example"aria-describedby="btnGroupAddon"></div></div>