一、超大屏
通过引用.jumbotron方法,实现构建超大的Hreo界面,醒目的在网站上展示关键的营销信息,轻量、灵活。
1.基础
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a href="#" class="btn btn-primary btn-lg">Learn more</a>
</div>
</div>
</div>
</div>
2.全屏
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
二、列表
1.基本
添加 .active 到 .list-group-item 下的其中一行或多行,以指示当前有效的选择状态。
添加 .disabled 到 .list-group-item 下的其中一行或多行,以显示出 禁用 状态。
<div class="col">
<ul class="list-group">
<li class="list-group-item">red</li>
<li class="list-group-item active">green</li>
<li class="list-group-item">blue</li>
<li class="list-group-item disabled">yellow</li>
<li class="list-group-item">pink</li>
</ul>
</div>
2.链接和按钮
使用 <a>
或 <button>
来创建具有 hover、禁用、悬停和活动状态的列表组.list-group-item-action
<div class="col">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">red</a>
<a href="#" class="list-group-item list-group-item-action active">green</a>
<a href="#" class="list-group-item list-group-item-action">blue</a>
<button class="list-group-item list-group-item-action" disabled>yellow</button>
<button class="list-group-item list-group-item-action">pink</button>
</div>
</div>
3.Flush紧致贴齐
加入.list-group-flush选择器,可以实现移除部分边框以及圆角,从而产生边缘贴齐的列表组,这在诸如Card卡片等容器中很实用(达成更好的呈现效果)。
<div class="col">
<ul class="list-group list-group-flush">
<li class="list-group-item">red</li>
<li class="list-group-item">green</li>
<li class="list-group-item">blue</li>
<li class="list-group-item">yellow</li>
<li class="list-group-item">pink</li>
</ul>
</div>
4.背景色
<div class="col">
<ul class="list-group">
<li class="list-group-item list-group-item-action list-group-item-primary">有hover状态的</li>
<li class="list-group-item list-group-item-action list-group-item-secondary">有hover状态的</li>
<li class="list-group-item list-group-item-action list-group-item-success">有hover状态的</li>
<li class="list-group-item list-group-item-action list-group-item-danger">有hover状态的</li>
<li class="list-group-item list-group-item-action list-group-item-warning">有hover状态的</li>
<li class="list-group-item list-group-item-action list-group-item-info">有hover状态的</li>
<li class="list-group-item list-group-item-action list-group-item-light">有hover状态的</li>
<li class="list-group-item list-group-item-action list-group-item-dark">有hover状态的</li>
</ul>
</div>
5.配合徽章
<div class="row mt-5">
<div class="col">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
red
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
green
<span class="badge badge-success badge-pill">5</span>
</li>
</ul>
</div>
</div>
6.自定义内容
<div class="row mt-5">
<div class="col">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
</div>
</div>
</div>
7.选项卡
<div class="row mt-5">
<div class="col-4">
<div class="list-group">
<a href="#list-home" class="list-group-item list-group-item-action active" data-toggle="list">Home</a>
<a href="#list-profile" class="list-group-item list-group-item-action" data-toggle="list">Profile</a>
<span data-target="#list-settings" class="list-group-item list-group-item-action" data-toggle="list">Settings</span>
</div>
</div>
<div class="col-8">
<div class="tab-content">
<div class="tab-pane fade show active" id="list-home">
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
</div>
<div class="tab-pane fade" id="list-profile">
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
</div>
<div class="tab-pane fade" id="list-settings">
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
</div>
</div>
</div>
</div>
8.方法与事件
<div class="row mt-5">
<div class="col-4">
<div class="list-group" id="myList">
<a href="#list-home1" class="list-group-item list-group-item-action">Home</a>
<a href="#list-profile1" class="list-group-item list-group-item-action" >Profile</a>
<a href="#list-messages1" class="list-group-item list-group-item-action">Messages</a>
</div>
</div>
<div class="col-8">
<div class="tab-content">
<div class="tab-pane fade show active" id="list-home1">
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
</div>
<div class="tab-pane fade" id="list-profile1">
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
</div>
<div class="tab-pane fade" id="list-messages1">
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
</div>
</div>
</div>
</div>
<script>
//方法
$('#myList a:first-child').tab('show'); //修改当前选中项
$('#myList a').on('click',function(){
$(this).tab('show');
});
//事件
$('#myList a:nth-child(2)').on('show.bs.tab', function (e) {
console.log('该内容要显示了'); //显示前的事件
});
$('#myList a:nth-child(2)').on('shown.bs.tab', function (e) {
console.log('该内容已经显示了'); //显示后的事件
});
$('#myList a:nth-child(2)').on('hide.bs.tab', function (e) {
console.log('该内容要隐藏了'); //隐藏前的事件
});
$('#myList a:nth-child(2)').on('hidden.bs.tab', function (e) {
console.log('该内容已经隐藏了'); //隐藏后的事件
});
</script>