一.组件 1.导航 Bootstrap提供了三种形式的导航：水平导航，选项卡导航，胶囊导航 (1)水平导航 创建一个简单的水平导航，可以在ul元素上添加.nav类，在每个li选项上添加一个.nav-item类，在每个链接上添加.nav-link类。
内容 通过设置ul的justify-content-*来控制导航的对齐方式。 设置ul的flex-column类用于创建垂直导航。 .nav-justified类可以设置导航项等宽显示。 (2)选项卡导航 使用.nav-tabs类可以将导航转换为选项卡 如果要设置选项卡是动态可切换的，可以在每个链接上添加data-toggle="tab"属性，然后在每个选项对应的内容上添加.tab-pane类。 ex: 具体内容1 (3)胶囊导航 .nav-pills类可以将导航设置成胶囊效果。 要实现胶囊导航的动态切换需要设置data-toggle属性值为pill 2.导航栏 使用.navbar类创建导航栏，后面紧跟.navbar-expand-xl/lg/md/sm类来创建响应式导航栏（大屏幕下水平铺开，小屏幕下垂直堆叠）。 导航栏上的选项可以使用ul元素并添加navbar-nav类。然后在li元素上添加.nav-item类，a元素上使用.nav-link类。 ex: 导航内容 3.折叠 控制内容的隐藏和显示，在a标记或button元素上添加data-toggle=“collapse"属性，data-target=”#id"属性是对应着是折叠的内容。 ex: 折叠 <div id="demo" class="collapse">具体内容</div>4.折叠导航栏 要创建折叠导航栏，需要在按钮上添加.navbar-toggler类，并设置data-toggle=“collapse"与data-target=”#id"。然后在设置了class="collapse navbar-collapse"类的div上包裹导航内容（链接），内容所在的div元素的id应匹配在按钮的data-target属性上。 5.卡片 通过.card与.card-body类创建一个卡片 .card-header类用于创建卡片的头部 .card-footer类用于创建卡片的底部 ex:
头部 内容 底部 注意：使用data-parent属性来确保所有的折叠元素在指定的父元素下，这样才能实现在一个折叠选项显示时其它选项隐藏。 练习：卡片+折叠=手风琴效果 6.媒体对象 处理图片或视频等内容的布局，应用场景有博客，评论，商品列表等。 创建媒体对象在容器上添加.media类，然后将多媒体内容放在子容器上，子容器上需要添加.media-body类，可以使用align-self-*相关类设置多媒体对象的图片显示位置（上中下） <div class="media"> <img src="a.jpg"> <div class="media-body">内容</div> </div>7.轮播 创建轮播：.carousel 为轮播添加指示符：.carousel-indicators 添加要切换的内容：.carousel-inner 指定每个图片的样式：.carousel-item
… 放图片的位置8.模态框 模态框是覆盖在父窗体上的子窗体，模态框可以在不离开父窗体的情况下有一些互动，提供信息交换等。
<div class="modal" id="main"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">...</div> <div calss="modal-body">...</div> <div calss="modal-footer">...</div> </div> </div> </div>9.其它小组件 (1)徽章 .badge-* (2)巨幕 .jumbotron (3)分页 可以在ul元素上添加.pagination类，然后在li上添加.page-item类，a标记上添加.page-link
课后作业： 1.用折叠导航组件完成bootstrap官网导航栏效果，在768px-991px时将导航栏中的部分内容隐藏起来，在小于768px时将导航内容折叠起来(效果图见课后作业文件夹)。
