Bootstarp 4 入门之介绍

介绍

通过BootstrapCDN和模板启动页面开始使用Bootstrap(全球最流行的用于构建响应式,移动优先网站的框架)的入门。

Bootstrap安装下载

编译的CSS和JS,下载下来就可以用

Bootstarp4 下载

源文件

源文件下载

CDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<!--我们使用 jQuery 的精简版本(slim build),不过完整版本的Jquery也是可以用的-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>

NPM 包安装

npm install bootstrap

Composer

composer require twbs/bootstrap:4.3.1

使用简单模板

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

应用说明

响应式 meta 标签

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

Box-sizing
将全局box-sizing值从content-box切换到border-box。 这可以确保填充不会影响元素的最终计算宽度。

文件编译说明

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
CSS 文件 布局 内容 组件 工具
bootstrap.css
bootstrap.min.css
包含 包含 包含 包含
bootstrap-grid.css
bootstrap-grid.min.css
只在栅格系统 不包含 不包含 只在工具
bootstrap-reboot.css
bootstrap-reboot.min.css
不包含 只在重置(reboot) 不包含 不包含
JS Popper jQuery
bootstrap.bundle.js
bootstrap.bundle.min.js
包含 不包含
bootstrap.js
bootstrap.min.js
不包含 不包含

兼容性

移动设备

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android 支持 支持 不存在 Android v5.0+ 支持 支持
iOS 支持 支持 支持 不存在 支持
Windows 10 Mobile 不存在 不存在 不存在 不存在 支持

PC 浏览器

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac 支持 支持 不存在 不存在 支持 支持
Windows 支持 支持 支持, IE10+ 支持 支持 不支持

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。