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引入的安全性有关就可以了。

  • 相关阅读:
    web攻击
    HTTP与HTTPS
    HTTP确认访问用户身份的认证
    Http协议(三)返回结果的HTTP状态码
    HTTP协议四(http首部)
    HTTP协议(二)报文信息
    HTTP协议(一)
    Windows10 如何设置软件开机自起动和关闭
    获取Chrome版本并下载匹配的chromedriver
    多线程Runnable
  • 原文地址:https://www.cnblogs.com/gold404/p/9964619.html
Copyright © 2011-2022 走看看