03-----Bootstrap的介绍
一、Bootstrap的介绍
凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。哈哈~，是的使用Bootstrap非常简单，但是在复制粘贴之前，需要先对Bootstrap的用法一一熟悉之后我们才开始干活！
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。
它用于开发响应式布局、移动设备优先的 WEB 项目
二、Bootstrap的下载
2.1使用Bootstrap第一步，先将生成环境的Bootstrap下载下来。然后将下载，然后引入到自己建好的当前目录中
2.2点到起步中的基本模板
将看到的整段代码复制粘贴到建好的index.html文件中
官网明确表示：
使用此给出的这份超级简单的HTML模板，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。
Bootstrap 支持移动设备优先
也就是说使用Bootstrap可以在移动设备上运行。为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap重置样式
为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
栅格系统
栅格系统的鼻祖是https://960.gs/。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
栅格参数
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
一些常使用网站
阿里巴巴图标库网站：
如果想做图表，那可以去官网：http://echarts.baidu.com/或者https://chartjs.bootcss.com/
PS:还是那句话，使用Bootstrap非常简单，根据项目的需求适当去官网复制粘贴，然后根据需求更改自己的内容，如果想修改自己的样式，可以添加类，按照之前咱们学习css一样的方式，给它相应的样式
03-----Bootstrap的介绍的更多相关文章
- Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
- Bootstrap框架介绍
Bootstrap框架介绍 一.Bootstarp环境部署 1>.什么是Bootstartp框架 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架.它 ...
- Bootstrap的介绍和响应式媒体查询
Bootstrap的介绍 凡是使用过Bootstrap的开发者,都不在乎做这么两件事情:复制and粘贴.哈哈~,是的使用Bootstrap非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法 ...
- BootStrap容器介绍
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- [UI] 03 - Bootstrap: component
前言 一.框架体系 Bootstrap 是基于 HTML5.CSS3.JAVASCRIPT. 教程被分为: Bootstrap 基本结构. Bootstrap CSS. Bootstrap 布局组件 ...
- Bootstrap简单介绍
一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等 - 响应式 ...
- 03 Yarn 原理介绍
Yarn 原理介绍 大纲: Hadoop 架构介绍 YARN 产生的背景 YARN 基础架构及原理 Hadoop的1.X架构的介绍 在1.x中的NameNodes只可能有一个,虽然可以通过Se ...
- bootstrap的介绍 和使用
开发中文网: v3.bootcss.com 前端?框架? 用户 --> 前端应用程序 --->后端应用程序 --->后端服务器. 框架:Library 或者lib,都指得是框架 ...
- 对于Bootstrap的介绍以及如何使用
Bootstrap是HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 可以自动适配任何设备,解决了响应式实现的繁琐问题,可以修改其中的各种样式,同样,其内部功能的强 ...
- spring框架总结（03）重点介绍（Spring框架的第二种核心掌握）
1.Spring的AOP编程 什么是AOP? ----- 在软件行业AOP为Aspect Oriented Programming 也就是面向切面编程,使用AOP编程的好处就是:在不修改源代码的情 ...
随机推荐
- POJ3468(树状数组区间维护)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 89818 ...
- C++ ORM ODB入门
1.ORM ORM, Object Relational Mapping, 对象关系映射,用来将基于对象的数据结构映射到SQL的数据结构中.即将基于对象的数据映射到关系表中的字段,然后我们可以通过对象 ...
- Myeclipse如何使用Maven添加jar包
很多新手都不知道如何在maven项目里添加jar包. 以前我还没接触maven的时候下载过一个demo,是maven项目. 我居然是照着他的pom.xml文件一个一个的写!!! 很多人认为理所当然的东 ...
- 不支持PowerShell 2.0版本（don't support PowerShell version 2.0. ）
在“程序包管理器控制台”使用命令“update-database”会提示:The Entity Framework Core Package Manager Console Tools don't s ...
- 洛谷-跑步-NOI导刊2010提高
新牛到部队, CG 要求它们每天早上搞晨跑,从A农场跑到B农场.从A农场到B农场中有n-2个路口,分别标上号,A农场为1号, B农场为n号,路口分别为 2 ..n -1 号,从A农场到B农场有很多条路 ...
- OpenCV创建轨迹条，图片像素的访问
.OpenCV创建进度条以及图像对比度,亮度调整 1.创建轨迹条createTrackbar() 函数原型C++: intcreateTrackbar(conststring& trackba ...
- mysql中有多少种日志
Mysql的日志包括如下几种日志: 错误日志 普通查询日志 二进制日志 慢查询日志 Mysql版本 此文档测试mysql的版本为 mysql -V 错误日志 error log Mysql错误日志主要 ...
- WSDL入门
WSDL: 网络服务描述语言, 是Web Service的描述语言,它全名:Web Services Description Language,是一门基于 XML 的语言,用于描述 Web Servi ...
- 《精通Spring4.X企业应用开发实战》读后感第六章（内部工作机制、BeanDefinition、InstantiationStrategy、BeanWrapper）
- 什么是消息循环，一个简单的win32程序如何运行？
预备知识 1.什么是句柄? (HANDLE) 在win32编程中有各种句柄,那么什么是句柄呢? #define DECLARE_HANDLE(name) struct name##_ { int un ...