zoukankan      html  css  js  c++  java
  • 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引入的安全性有关就可以了。

  • 相关阅读:
    v-for给img的src动态赋值问题
    关于vue+axios上传文件的踩坑分析
    关于nth-of-type和nth-child的关系
    关于fetch
    关于移动端适配
    golang变量作用域问题-避免使用全局变量
    grpc-gateway:grpc转换为http协议对外提供服务
    google的grpc在golang中的使用
    golang中的rpc包用法
    homebrew常用命令
  • 原文地址:https://www.cnblogs.com/gold404/p/9964619.html
Copyright © 2011-2022 走看看