前端基础06引导框架

　　

引导是Twitter开源的基于HTML, CSS, JavaScript的前端框架。

　　

引导下载

　　

官方地址:https://getbootstrap.com

　　

中文地址:http://www.bootcss.com/

　　

引导环境搭建

　　
 <代码类=" language-linux "> bootstrap-3.3.7-dist/├──css//css文件
　　│├──bootstrap-theme。css//引导主题样式文件
　　│├──bootstrap-theme.css.map
　　│├──bootstrap-theme.min。css//主题相关样式压缩文件
　　│├──bootstrap-theme.min.css.map
　　│├──bootstrap.css
　　│├──bootstrap.css.map
　　│├──bootstrap.min。css//核心css样式压缩文件
　　│└──bootstrap.min.css.map
　　├──字体//字体文件
　　│├──glyphicons-halflings-regular.eot
　　│├──glyphicons-halflings-regular.svg
　　│├──glyphicons-halflings-regular.ttf
　　│├──glyphicons-halflings-regular.woff
　　│└──glyphicons-halflings-regular.woff2
　　└──js//js文件
　　├──bootstrap.js
　　├──bootstrap.min。js//核心js压缩文件
　　└──npm.js
　　

由于引导的某些组件依赖于jQuery,所以请确保下载对应版本的jQuery文件,来保证引导相关组件运行正常。

　　

概览

　　

设置全局CSS样式;基本的HTML元素均可以通过课设置样式并得到增强效果,还有先进的栅格系统。

　　

移动设备优先

　　

引导是移动设备优先的
为了确保适当的绘制和触屏缩放,需要在& lt; head>之中添加视窗元数据标签。

　　
 <代码类=" language-html "> & lt; meta name=" viewport "内容=翱矶?设备宽度,初始=1”在
　　

Normalize.css

　　

为了增强跨浏览器表现的一致性,我们使用了正常化。css
不再需要手动指定保证金:0之类的
下载地址:https://www.bootcdn.cn/normalize/

　　

布局容器

　　

引导需要为页面内容和栅格系统包裹一个.container容器
。容器类用于固定宽度并支持响应式布局的容器。

　　
 <代码> & lt; div类=叭萜鳌北?
　　…
　　& lt;/div>
　　

栅格系统

　　

引导提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或视口(视窗)尺寸的增加,系统会自动分为最多12列。

　　

简介

　　

栅格系统用于通过一系列的行(行)与列(列)的组合来创建页面布的局,你的内容就可以放入这些创建好的布局中。
如果多于12列,那么一行放不下,会放到第二行

　　

图例:
前端基础06引导框架

　　

图例代码:

　　
 <代码> & lt; div类=靶小北?
　　& lt; div类=" col-md-1 "祝辞.col-md-1
　　& lt; div类=" col-md-1 "祝辞.col-md-1
　　& lt; div类=" col-md-1 "祝辞.col-md-1