- A+
1.nav导航
⑴ 基础结构：
一种是在<ul><li>标签中嵌套<a>标签的方式；
另一种是在<nav>标签中嵌套<a>标签的方式；
也可以使用其它标签代替<nav>标签或<a>标签。
涉及到的 class样式如下：
<!-- 使用 ul列表创建导航 --> <ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <!-- 使用 <nav>标签创建导航 --> <nav class="nav"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav>
⑵ 排列对齐
默认，水平居左
.justify-content-center，水平居中
.justify-content-end，水平居右
.flex-column，垂直排列
上述样式utility都是针对外层“.nav”容器进行设置的。
⑶ Tabs和Pills
.nav-tabs，定义导航按钮的表单样式
.nav-pills，定义导航按钮的药丸样式
⑷ Fill 和 Justified
.nav-fill，水平填充对齐（水平空间全部占用）
.nav-justified，水平等距对齐（每一个item宽度相等）
当导航外层容器为<nav>标签时，必须给<a>标签添加“.nav-item”类。
⑸ 弹性布局
通过添加“.flex-*-row”类定义导航弹性布局，示例如下
<nav class="nav nav-pills flex-column nav-fill flex-sm-row"> <a class="nav-item nav-link active" href="#">Active</a> <a class="nav-item nav-link" href="#">Longer nav link</a> <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav>
⑹ 添加下拉
通过“.dropdown”类定义导航菜单下拉内容，下拉菜单结构示例：
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </li>
⑺ 添加内容窗口
通过添加内容窗口，使得导航菜单切换时动态呈现对应的内容。
要实现动态对应切换，菜单<a>标签的 href或 data-target属性值必须引用窗口元素的 id值
添加<a>标签“ data-toggle='tab / pill' ”属性，增加“.tab-content”容器并定义子元素“.tab-pane”
<!-- 采用 ul列表的方式定义导航菜单 --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <!-- 定义动态内容窗口“.tab-content” --> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Text Content...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Text Content...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Text Content...</div> </div>
2.navbar导航条
.navbar，用于定义导航条样式，默认菜单项垂直排列
.navbar-expand{-sm|-md|-lg|-xl}，用于定义不同屏幕尺寸时响应式布局，小于断点尺寸是垂直排列
.navbar-brand，用于定义品牌Logo、文字等样式，可以是<a>链接，也可以是<span>等其他元素
.navbar-nav，用于定义导航条主体菜单，支持下拉菜单项
.navbar-toggler，用于定义菜单堆叠按钮
.collapse.navbar-collapse，用于定义需要堆叠的菜单容器，
容器的 id必须与“.navbar-toggler”的“data-toggle”属性值相同
.form-inline，用于创建行内表单
.navbar-text，用于定义垂直居中排列的文本内容
navbar基本结构示例：
<body> <!-- 创建响应式布局的导航条,当屏幕尺寸在Medium以下时，菜单选项将堆叠显示; 定义字体颜色（navbar-light|dark）、背景颜色（bg-light|dark|primary|…） --> <nav class="navbar navbar-expand-md navbar-light bg-light"> <!-- 定义商标/品牌字样，可以是<a>标签也可以是<span>等其他标签； 标签内容可以是 String文本，也可以引用 <img>图片,或者是图片+文本的形式 --> <a class="navbar-brand" href="#">Navbar</a> <!-- 定义菜单选项堆叠时的按钮，data-target属性值必须为 .collapse容器的 id引用 --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- 创建菜单选项容器,用于包裹需要堆叠的nav导航 --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- 创建导航条主体--nav导航 --> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <!-- 创建下拉菜单项，添加 .dropdown样式 --> <li class="nav-item dropdown"> <!-- 下拉菜单的 data-toggle属性值为“dropdown” --> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <!-- 创建行内表格，用于包裹搜索框和搜索按钮 --> <form class="form-inline my-2 my-lg-0"> <!-- 创建<input>并添加“.form-control”类，也可以使用“input groups”，示例如下： <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> --> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <!-- button按钮可以添加“.btn-sm|lg”类定义小尺寸、大尺寸按钮 --> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </body>
3.Carousel轮播
基础结构：
⑴ 轮播框架
carousel通常使用<div>元素作为外层容器
① 必须设置 id属性，用于匹配对应的控制器和指示器
② 核心样式类：.carousel、.slide，表示轮播滑动
③ data-ride="carousel"，该属性用于标记轮播在页面加载时开始触发
④ 除使用 data-ride属性触发，还可以通过 js代码使用 carousel()方法初始化轮播
⑵ 轮播内容(图片)
① “.carousel-inner”，用于定义包裹主体内容的 div元素的样式
② “.carousel-item”，用于定义嵌套在“.carousel-inner”内部用于包裹<img>的 div元素的样式
③ <img>元素除定义 src属性外，需要添加“.d-block w-* ”样式类
⑶ 控制器
① 通常用<a>嵌套<span>创建控制器，<a>标签放置在“.carousel-inner”元素的后面
② “.carousel-control-prev | next”类，用于定义向前或向后按钮的样式
③ <a>标签的 href属性必须为外层容器“.carousel”的 id
④ data-slide=“prev | next”，定义幻灯片切换是相对当前位置的操作
⑷ 指示器
① 通常使用<ol>有序列表创建指示器，<ol>标签书写在“.carousel-inner”元素的前序位置
② <ol>的样式类设置为“.carousel-indicators”
③ <li>元素的 data-target属性必须引用外层容器“.carousel”的 id
④ <li>元素的 data-slide-to属性用于定义每个节点对应的“.carousel-item”的索引，从“0”开始
⑸ 文本说明
① 描述说明可以由标题<h*>和内容<p>组合构成，嵌套在“.carousel-caption”类的 div元素中
② “.carousel-caption”类的 div元素书写在 <img>标签的后序位置，也可以直接添加描述文本
③ “.carousel-caption”元素还可以添加“.d-none .d-*-block”（-*-代表屏幕大小），定义响应式
⑹ 其他属性方法
① “.carousel-fade”淡入淡出样式，在外层容器“.carousel”中定义
② data-interval="timeValue"，定义轮播间隔时间，在 “.carousel-item”中添加该属性
③ .carousel()方法，在 js中调用，用于定义轮播的方式和特定操作
<body> <div id="carouselExample" class="carousel slide carousel-fade w-25" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExample" data-slide-to="0" class="active"></li> <li data-target="#carouselExample" data-slide-to="1"></li> <li data-target="#carouselExample" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active" data-interval="1000"> <img src="./Images/rotation01.jpg" alt="WEB前端第五十二课——BootStrap组件（四）nav、navbar、carousel" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item" data-interval="2000"> <img src="./Images/rotation02.jpg" alt="WEB前端第五十二课——BootStrap组件（四）nav、navbar、carousel" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="carousel-item" data-interval="3000"> <img src="./Images/rotation03.jpg" alt="WEB前端第五十二课——BootStrap组件（四）nav、navbar、carousel" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body>
参考资料来源：BootStrap中文网（https://v3.bootcss.com/）
