Bootstrap

最新推荐文章于 2022-05-28 11:18:06 发布

冷太阳a

最新推荐文章于 2022-05-28 11:18:06 发布

阅读量334

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/A_9888/article/details/103836329

版权

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

一、概述

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

二、下载

Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说，他们依赖的是 jQuery、Popper.js 以及 bootstrap.js。注意引用顺序，jQuery 必须放在最前面，然后是 Popper.js，最后 bootstrap.js。

$ npm i -S jquery bootstrap popper.js

“dependencies”: {
“bootstrap”: “^4.3.1”,
“jquery”: “^3.4.1”,
“popper.js”: “^1.15.0”
}

三、引入模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Test</title>
  	<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
 		<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="../node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="../node_modules/popper.js/dist/popper.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

提示：由于popper模块化导出，在没有讲解自动化构建工具之前，对于popper的引入先使用CDN引入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

当然，你也可以直接使用CDN引入Bootstrap 及其依赖，参考如下链接：

https://v4.bootcss.com/docs/4.3/getting-started/introduction/#css

https://v4.bootcss.com/docs/4.3/getting-started/introduction/#js

模块化导入

import “jquery/dist/jquery.slim.js”;
import “popper.js”;
import “bootstrap/dist/js/bootstrap.js”;
import “bootstrap/dist/css/bootstrap.css”;

四、指南

https://getbootstrap.net/docs/getting-started/introduction/

五、栅格系统(核心)*

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)

缩写	描述	范围
xs	超小屏幕	<576px
sm	小屏幕	576px ~768px
md	中等屏幕	768px~992px
lg	大屏幕	992px~1200px
xl	超大屏幕	>1200px

六、响应式工具*

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。

有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

类组 CSS display
.d--block display: block;
.d--inline display: inline;
.d--inline-block display: inline-block;
.d--none display: none;
以小屏幕（sm）为例，可用的 .d-- 类是：.d-sm-block、.d-sm-inline和 .d-sm-inline-block。