Bootstrap是全球最受欢迎的前端组件库,用于响应式布局、移动设备优先的Web项目。利用Sass变量、大量mixin、响应式格栅系统、可扩展的预制组件以及基于jQuery的强大的插件系统,能够快速开发出应用原型或者构建整个APP。
目录
Bootstrap的引用
与jQuery的引用类似,Bootstrap的引用可以通过以下两种方式来安装Bootstrap。
1、使用Bootstrap CDN。
示例:复制如下的<link>样式表,粘贴到网页的<head>里面,并放在其他CSS文件之前。(CSS文件)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
全局组件运行在jQuery组件上,其中包括Popper.js和系统内置JavaScript插件。所以先引入Jquery.js,以防出现问题。(JS文件)
例如:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
2、下载bootstrap 4
访问Bootstrap官网,进入下载页面,下载Bootstrap 4。下载完成后解压文件,并将解压后的文件复制到项目目录,如下引用即可。
(CSS文件)
<link rel="stylesheet" href="css/bootstrap.css">
(JS文件)
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
(注:jquery.js和popper.js两个文件,需要单独下载。)
Bootstrap 4的基本应用
首先到Bootstrap官网中查找自己需要的组件效果,复制后,粘贴在自己的项目中,再修改一些参数即可。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!-- 导航栏组件 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">页面一</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">页面二</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbardrop" data-toggle="dropdown">
搜索引擎
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://www.baidu.com/">百度</a>
<a class="dropdown-item" href="https://cn.bing.com/">必应</a>
</div>
</li>
</ul>
</nav>
</body>
</html>