1.1 Bootstrap４介绍

Bootstrap是stwitter公司的两名前端设计师设计的，全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包。利用 Bootstrap 提供的 Sass 变量和混合（mixins）、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件，能够让你快速地开发出产品原型或构建整个 app。
Bootstrap是用在网页上面的用户界面和交互的架构，架构的意思就是把经常用的一些东西呢？事先的为你编写好，需要的时候呢，可以直接去调用，比如说你想去设计页面的布局，你需要的去计算网页的宽度，然后呢，手工能把布局要用到的CSS的代码写出来，Bootstrap架构内置了一套网格布局的系统，你只需要在元素中使用设计好的布局相关的网格的类，不需要你再去手工地撰写布局使用的CSS代码了，再比如说你想在网页中出现一个按钮，通常要先用图形设计软件去设计一个这样的按钮，然后再把用HTML和 CCS表示出来，那么在网页中使用Bootstrap架构的话，我们可以直接为元素去添加Bootstrap设计好的按钮相关的类，这样就可以立即在网页中出现一个漂亮的按钮，Bootstrap还允许我们去控制这个按钮的颜色、样式、大小等等，Bootstrap还包含了很多在网页中经常用的一些界面设计的表格、表单，导航栏、按钮组、分页器，导航路径等等，Bootstrap还提供了很多交互的小插件，比如说对话框，下拉菜单，工具提示，选项卡等等，这些你都可以直接去使用，你只需要按照Bootstrap设计好的方式，先把代码的结构写出来，然后在元素上面使用相应的类，剩下的事Bootstrap全部都会为你做好，这就是我们的工作变得非常的简单。

1.2 Bootstrap４的构成

Bootstrap涵盖了以下几个方面：
（1）基本结构：Bootstrap提供了不念旧恶带有网格系统、链接样式、背景的基本栅栏结构。
（2）CSS：含有一个优秀的栅格布局和全局CSS样式。
（3）组件：Bootstrap包含了丰富的组件库，里在涵盖了WEB开发中常见的几十种组件。
（4）JavaScript插件：Bootstrap包含了十几个自定义的JavaScript插件。
（5）定制：可以进行组件和变量的定制升级，从而得到自己想要的版本，这样可以及大地提高开发的灵活性。

1.3 Bootstrap4的下载

1、下载Bootstrap4
下载地址：https://v4.bootcss.com/docs/getting-started/download/

如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。
为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。
下载解压后有以下文件夹：

CSS文件夹里面放的就是Bootstrap架构的最重要的部分，就是Bootstrap架构事先设计好的样式，里面有两类文件，CSS文件和MAP文件，什么是MAP文件，请同学们百度一下，简单来说map文件是某些浏览器的开发人员工具。
CSS文件有bootstrap、bootstrap-grid、bootstrap-reboot（其中.min.css是去掉注释文字和多余空白的，压缩后的.css文件）。对于这三种css文件的作用，我们看一下官网的解释：

可以看出，bootstrap.css支持所有的功能，其他的css只支持四个功能的一部分。所以在开发中，除特殊情况，我们基本都引用bootstrap.min.css。
JS文件夹里面包含的是bootstrap架构所有包含的javascript的插件，里面有bootstrap、bootstrap.bundle。

从官方解释可以看出bootstrap.bundle包含了popper.js的JS定位引擎库，而bootstrap没有包含popper.js库，而如果你想在网页中使用bootstrap架构里面提供的下拉菜单、选项卡这些交互功能，我们只需使用bootstrap.min.js。
2、下载jQuery文件
如果没有jQuery文件的话，就无法使用有些插件，必须有jQuery文件支持。
下载地址：https://jquery.com/
下载jQuery文件，如果没有jQuery文件的话，就无法使用有些插件，必须有jQuery文件支持。
3、引入环境的方法：
文档必须是HTML5
（1）使用外部的bootstrap环境的方法
这种方法必须联网
引入CSS文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

引入JS文件：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

（2）引入内部bootstrap环境

1.4 BootStrap的基本模板

1、外部的bootstrap环境的的基本模板

<!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"><!-- 指明开发的是响应式页面，及不同设备时网页的绽放比例，屏幕和设备的屏幕一致，初始缩放为1:1，禁止用户缩放--><!-- Bootstrap CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><title>Hello, world!</title></head><body><h1>Hello, world!</h1><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></body>
</html>

2、内部的bootstrap环境的的基本模板

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 引入外部的Bootstrap中的CSS文件 --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><!-- jQuery文件，务必在bootstrap.min.js之前引入 --><link rel="stylesheet" type="text/css" href="js/jquery-3.4.1.slim.min.js">   <!-- 再引入Bootstrap.min.js文件 --><link rel="stylesheet" type="text/css" href="js/bootstrap.min.js">
</head>
<body>
</body>
</html>

1 Bootstrap 4起步相关推荐

【Bootstrap】＜前端框架＞Bootstrap布局容器栅格网格系统
目录一.Bootstrap概述: 二.Bootstrap HTML模板: 三.布局容器和栅格网格系统: 1.布局容器: 2.栅格网格系统: 2.1 媒体查询: 2.2 栅格参数: 2.3 列组合: ...
达内2016前端开发知识点总结--bootStrap--4天
bootStrap day01 第三阶段课程 (1)AJAX:数据库.服务器.HTTP.原生AJAX.jQuery-AJAX (2)HTML5新特性 (3)Bootstrap Bootstrap学习特 ...
bootstrap起步全局css样式概览全局css样式_栅格全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
bootstrap 起步
http://v2.bootcss.com/getting-started.html#examples 下载之前先检查一下是否准备好了一个代码编辑器(我们推荐使用 Sublime Text 2) ...
1.3、Bootstrap V4自学之路------起步---浏览器支持
为什么80%的码农都做不了架构师?>>> 支持的浏览器 Bootstrap 支持所有的主流浏览器和平台的最新的.稳定的版本. 在 Windows 中, **我们支持 Inter ...
Bootstrap简介
1.使用准备 1.1 Bootstrap的下载 http://www.bootcss.com,下载用于生产环境的Bootstrap即可. 1.2 Bootstrap包含的内容 ● 全局CSS:基本的 ...
php rest api lumen,lumen Rest API 起步
lumen Rest API 起步修改项目文件 .env DB_DATABASE= DB_USERNAME= DB_PASSWORD= bootstrap/app.php $app->with ...
Bootstrap学习（一）：Bootstrap简介
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...
web前端全部课件（html5+CSS3+javascript+dom+bom+jquery+jqm+bootstrap+angular+ext+weixin+less）...
一.HTML5 BASIC课件 Unit01:Web基础知识.HTML快速入门.文本 Unit02:图像和链接.表格.结构标记 Unit03:列表.表单.其他常用标记二.CSS3 BASIC课件 U ...

1 Bootstrap 4起步

1 Bootstrap 4起步

1.1 Bootstrap４介绍

1.2 Bootstrap４的构成

1.3 Bootstrap4的下载

1.4 BootStrap的基本模板

1 Bootstrap 4起步相关推荐

最新文章

热门文章

1 Bootstrap 4起步

1 Bootstrap 4起步

1.1 Bootstrap４ 介绍

1.2 Bootstrap４ 的构成

1.3 Bootstrap4的下载

1.4 BootStrap的基本模板

1 Bootstrap 4起步相关推荐

最新文章

热门文章

1.1 Bootstrap４介绍

1.2 Bootstrap４的构成