bootstrap有在线引用和下载下来使用两种方式。
在线使用可在<head></head>标签之间引入bootstrap的css文件,在body最底层bootstrap的js文件,引入引入方式如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> //bootstrap的css文件引用
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> //引入bootstrap的jquery
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> //引入bootstrap的js文件
具体如下:
<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练习</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> //bootstrap的css文件引用
</head>
另外bootstrap还有js文件,在body中进行引用,引用js时,要将jquery引入文件放在上面例:
<body>
<div class="container">//bootstrap最简单的引用,先建一个div名为container,在container里有很多的row,每个row里再有很多个div,这些div命名为class="col-sm-6 col-md-4 col-lg-3"这种形式,让屏幕最大时,一行显示4个,中屏时,一行显示3个,小屏时一行显示2个。
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> //引入bootstrap的jquery
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> //引入bootstrap的js文件
</body>
bootstrap还可以下载下来在本地引用,本地引用方式如下:
在bootstrap官网中有“用于生产环境的bootstrap”,也有“bootstrap源码”,一般将“用于生产环境的bootstrap”下载下来即可,下载下来的文件如图:
在bootstrap-3.3.7-dist里有css、fonts、js三个文件夹
在css文件件下有bootstrap.min.css
在js文件夹下有bootstrap.min.js
如果js文件里没有jquery.min.js的话,可以下载源码,在源码文件夹里找到jquery.min.js,然后将jquery.min.js拷贝到自己的js文件夹下即可。在bootstrap-3.3.7下的js文件夹下有tests文件夹,下面还有vendor文件夹,在vendor文件夹下可以看到一个jquery.min.js的文件,将这个文件复制到自己的js文件夹中即可。
文件都准备好后,可以进行引用了。如下图:
在引用时,如果是下面这种层级关系:
在index.html中引入就可以是:
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
如果是下面这种层级关系:
在app里有个html文件的话,则引入需要加上../了
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
具体引入路径不固定,不过如果自己下载的文件里没有jquery.min.js文件的话,可以从源码里找到,复制一份到自己的文件夹,引入路径记得不要出错,不然出不来效果的,特别是../这种不要忘记加了