zoukankan      html  css  js  c++  java
  • #2 bootstrap安装与引入 (bootstrap4系列)

    bootstrap应用场景

    ①实现定义好的可复用CSS组件。
    ②用户使用的终端设备不一样,可以实现accessible。
    ③解决browers的兼容问题。

    bootstrap和react的区别

    bootstrap只是基于html的UI布局工具,设计响应式页面。
    react是组件工程化。

    安装与引入

    安装方法

    进入路径,然后用npm install
    装完之后添加.gitignore忽略node_modules

    download bootstrap

    指令:npm install bootstrap@4.0.0 --save
    接下来安装它的同伙:jQuery和Popper.js
    npm install jquery@3.3.1 popper.js@1.12.9 --save

    查看文件

    进入node_modules,有个bootstrap,接着进入dist,进入css文件夹。
    这里要用到bootstrap.min.css

    用lite-server启动

    给json表加东西

    "scripts":{
    	"start":"npm run lite",
    	"test": "echo  "Error: no test specified" && exit 1",
    	"lite":"lite-server"
    }
    

    cmd里使用npm start

    给主页加上引用表

    CSS部分:

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    

    注意引入bootstrap的js要先引入jquery和popper

    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  • 相关阅读:
    csr_matrix参数解析
    SQL删除重复数据(根据多个字段),pandas的nan存入数据库报错
    XGBoost参数中文翻译以及参数调优
    pandas.DataFrame.quantile
    pandas.DataFrame.rank
    JOIN子句
    ORDER BY子句
    WHERE子句
    SELECT语句
    数据分析-基础
  • 原文地址:https://www.cnblogs.com/rosecanoe/p/15169123.html
Copyright © 2011-2022 走看看