bootstrap是一个非常有名的基于jquery的前端框架,我们可以通过CDN来直接引用,但是在引用bootstrap的js之前需要先引人jquery,如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Test</title>
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
通过这样简单的配置,我们就可以使用bootstrap的内容了,bootstrap提供了一些css的样式,提供了一些常用的组件以及一些jquery的插件,这三部分内容可以赋予网页非常简洁,美观和实用的特点。接下来对一些常用的组件和样式进行介绍:
下拉菜单
使用下拉菜单的方式非常简单,只需要给一个a标签或者button添加一个data-toggle='dropdown'即可使得这个按钮具有下来菜单的属性,然后使用ul来列出菜单,ul需要添加dropdown-menu来标识,否则下拉菜单将不会隐藏。我们来看一个例子:
<li class='dropdown'>
<a href="#" class='dropdown-toggle' data-toggle="dropdown" role='button' aria-haspopup="true" aria-expanded="false">Dropdown <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li role='separator' class='divider'></li>
<li><a href="#">Item4</a></li>
</ul>
</li>
</ul>
完成后的样子就变成了这样:
导航与导航条
导航主要是以nav开头的class类,nav navbar-nav类 nav nav-tabs类 nav nav-pills类这三种指定导航的样式分别为普通,tab样式以及胶囊样式三种,而nav-stacked可以使得导航纵向排列,通过赋予ul上述属性,即可实现各种导航的样式。
而导航条则是在导航的外面加了一些div和nav,最外层是一个具有navbar navbar-default类的nav标签,然后是可以选择性的添加一个container-fluid属性的div来让导航栏铺满整个页面,然后是一个具有navbar-header的div和一个具有collapse navbar-collapse的div来包裹导航内容,导航内容可以有之前的ul,或者是表单内容和下拉菜单,表达内容需要添加一个navbar-form的属性,在这个里面我们可以通过navbar-left和navbar-right来调整导航内容的位置,让其靠左或者靠右。让我们来总结一下
nav | 导航的基类 |
nav-tabs | tab样式的导航 |
nav-pills | 胶囊样式的导航 |
navbar-nav | 普通样式 |
nav-stacked | 纵向排列 |
navbar navbar-default | 导航条属性 |
navbar-header | 导航条logo |
collapse navbar-collpase | 可以折叠的导航 |
navbar-left navbar-right | 调整导航元素在导航条的位置 |
如下图分别是nav-tabs,nav-pills和navbar-nav三种导航样式
我们可以给nav nav-pills的胶囊导航添加一个list-group并给每一个导航元素<li>添加一个 list-group-item来实现一个更好看的侧边栏导航,如下图所示:
这是给胶囊导航添加了一个列表组的样式,但是需要注意的是nav-tabs是不建议这样做的,会很难看(亲测难看)