K先生个人博客

当前位置:首页 > 爱技术 > 正文

Bootstrap4基本使用教程

前面博主写了Bootstrap4的栅格布局,考虑到有些同学可能还需要一篇更基础的文章,所以老K也补上Bootstrap4最基础的使用教程,希望对大家有所帮助。本篇文章写给那些第一次接触Bootstrap框架的学习者,这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。 

Bootstrap下载  

第一种方法:到bootstrap官网下载 http://getbootstrap.com/ 

第二种方法:到bootstrap中文网下载 http://www.bootcss.com/ 其实这两个方法都是差不多的,方法不重要,只要我们能够下载到我们需要的bootstrap文件就行了。截至到目前bootstrap的最新版本为bootstrap4.1.3,我们这里下载的是4.0版本。这里需要注意的是我们需要下载的是编译版并不是源码,所以下载的时候不要搞错了哦。

下载之后我们把安装包解压,我们会看到很多文件,其实我们用到的只有里面3个,分别是bootstrap.min.css,bootstrap.min.js,bootstrap.bundle.min.js文件。

bootstrap使用

 bootstrap4.0下载之后,我们先来看一下怎么使用它。 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,我们需要在网页的 head 之中添加 viewport meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。  

initial-scale=1 表示初始的缩放比例。  

shrink-to-fit=no 自动适应手机屏幕的宽度。 

下面我们还要再引入4个文件, bootstrap.min.css(Bootstrap4 核心 CSS 文件)、jquery.min.js(jQuery文件,必须在bootstrap.min.js 之前引入)popper.min.js(于弹窗、提示、下拉菜单等)、bootstrap.min.js(bootstrap的核心js文件)。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Bootstrap4使用</title>
  </head>
  <body>
    <h1>Bootstrap4使用</h1>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

可能会有同学会问,popper.min.js文件怎么找不到,其实这个和jQuery一样需要我们自行下载的,如果你的项目中没有用到弹窗、提示、下拉菜单等效果的话,不引入这个文件也是没有任何问题的。或者说你直接把bootstrap.min.js文件替换成bootstrap.bundle.min.js文件页可以,后者里面相当于集合了popper.min.js文件。 还有js文件的引入最好放到body结束标签前,不要放在head标签里,至于原因我们后续再说。

如果你不想下载bootstrap的话,你也可以通过CDN来引入bootstrap的必须文件来直接开发。 

下面是官网给出的CDN引用地址

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

至于其中的integrity和crossorigin你只需要和CDN引入的安全性有关就可以了哈。 

作者K先生本文地址http://www.gold404.cn/

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论
* 必填项
可选
可选
评论列表

    暂时还没有评论哦!