bootstrap框架基础使用

bootstrap简介
bootstrap引入和使用
- 网络引用
- 本地引用
- bootstrap基础
- - bootstrap组成
- bootstrap组件

bootstrap简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

bootstrap引入和使用

网络引用

<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="https://code.jquery.com/jquery.js"></script><!-- 包括所有已编译的插件 --><script src="js/bootstrap.min.js"></script>

在这里，你必须引入三个文件，分别是jquery.js、bootstrap.min.js和bootstrap.min.css。这三个文件用于构建bootstrap模板，只有引入了这三个文件，才可以正常使用bootstrap

本地引用

进入bootstrap中文网：https://www.bootcss.com/
下载中文文档

下载之后压缩，会有三个文件夹：

把文件夹添加到项目目录中，然后本地引入

 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"><!-- 引入bootstrap css文件 --><link href="./css/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jquery文件 --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 引入bootstrap js文件 --><script src="js/js/bootstrap.min.js"></script>

因为bootstrap的效果都是基于jquery，所以必须引入jquery文件

bootstrap基础

实际上，随着移动端的兴起和火热，大众对移动设备的需求也越来越高，而bootstrap就是针对的移动端和pc端结合的响应式框架，它可以使你的代码可以“一套代码，多端使用”。使用起来更加的方便和快捷。
响应式就是指，在不同的屏幕比例下，bootstrap可以通过响应式而使页面更加完整的显示出来。

bootstrap组成

bootstrap布局时，实际上就是将屏幕分为12格，然后通过自己的需求来规定如何布局
bootstrap使用时分为四种情况：
1、.col-xs-* 超小设备屏幕(<768px)
2、.col-sm-* 小型设备&平板电脑屏幕（≥768px）
3、.col-md-* 中型设备&台式电脑屏幕（≥992px）
4、.col-lg-* 大型设备&台式电脑屏幕（>=1200px）
实例：
(显示在大型屏幕下显示一排三张图片；中型屏幕下显示一排两张；小型一排显示一张)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/css/bootstrap.min.css"/><title></title></head><style type="text/css">/* 图片格式 */img{width: 300px;height: 300px;}p{font-size: 40px;}</style><body><div class="container">      <!-- 定义一个bootstrap容器 --><div class="row">        <!-- 定义行 --><div class="col-lg-4 col-md-6 col-sm-12">    <!-- lg--大型屏幕下所占格数; md--中型; sm--小型; --><img src="img/kb1.jpg" ><p>kb1</p></div><div class="col-lg-4 col-md-6 col-sm-12"><img src="img/kb2.jpg" ><p>kb1</p></div><div class="col-lg-4 col-md-6 col-sm-12"><img src="img/kb3.jpg" ><p>kb1</p></div></div></div></body><script src="js/js/bootstrap.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</html>

结果如下：
大于1200px屏幕大小时：

大于992px小于1200px屏幕大小时：

小屏幕时（750px）：

这样，就可以一套代码在不同的终端显示不同的样式格式了

bootstrap组件

bootstrap的组件包括无数可复用的组件，其中包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
在bootstrap中文网中，有bootstrap的组件库，组件库中的组件可以直接复制使用，在需求不太一样的时候，稍微改一下代码就可以了，并且组件都是响应式的。