bootstrap介绍
⼀．Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最⼤的微博)的两名技术⼯程师研发的⼀个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可⽤于快速、简单地构建基于 PC 及移动端设备的 Web 页⾯需求。2010 年 6 ⽉，Twitter 内部的⼯程师为了解决前端开发任务中的协作统⼀问题。经历各种⽅案后，Bootstrap 最终被确定下来，并于 2011 年 8 ⽉发布。经过很长时间的迭代升级，由最初的 CSS 驱动项⽬发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及⼿机移动端的页⾯访问。Bootstrap 下载及演⽰：
国内⽂档翻译官⽹：
⼆．Bootstrap 特点
Bootstrap ⾮常流⾏，得益于它⾮常实⽤的功能和特点。主要核⼼功能特点如下：
(1).跨设备、跨浏览器
可以兼容所有现代浏览器，包括⽐较诟病的 IE7、8。当然，我们不再考虑 IE9 以下浏览器，没意思的。
(2).响应式布局
不但可以⽀持 PC 端的各种分辨率的显⽰，还⽀持移动端 PAD、⼿机等屏幕的响应式切换显⽰。
(3).提供的全⾯的组件
Bootstrap 提供了实⽤性很强的组件，包括：导航、标签、⼯具条、按钮等⼀系列组件，⽅便开发者调⽤。
(4).内置 jQuery 插件
Bootstrap 提供了很多实⽤性的 jquery 插件，这些插件⽅便开发者实现 Web 中各种常规特效。
(5).⽀持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性，都得到很好的⽀持。
(6).⽀持 LESS 动态样式
LESS 使⽤变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。
三．Bootstrap 结构
⾸先，想要了解 Boostrap 的⽂档结构，需要在官⽹先把它下载到本地。Bootstrap下载地址如下：
⽤于⽣产环境的bootstrap解压后，⽬录呈现这样的结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
bootstrap项目│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├──
├── glyphicons-halflings-regular.svg
├── f
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
主要分为三⼤核⼼⽬录：css(样式)、js(脚本)、fonts(字体)。
1.css ⽬录中有四个 css 后缀的⽂件，其中包含 min 字样的，是压缩版本，⼀般使⽤这个；不包含的属于没有压缩的，可以学习了解 css 代码的⽂件；⽽map 后缀的⽂件则是css 源码映射表，在⼀些特定的浏览器⼯具中使⽤。
2.js ⽬录包含两个⽂件，是未压缩和压缩的 js ⽂件。
3.fonts ⽬录包含了不同后缀的字体⽂件。
四．创建第⼀个页⾯
我们创建⼀个 HTML5 的页⾯，并且将 Bootstrap 的核⼼⽂件引⼊，然后测试是否正常显⽰。
<!DOCTYPE html>
<html lang="zh-cn"><head>
<meta charset="UTF-8">
<title>Bootstrap 介绍</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-info">Bootstrap</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
注意：引⼊3个⽂件，地址⼀定要正确不然没有效果，jquery.min.js库的引⼊必须在bootstrap.min.js前⾯，因为bootstrap依赖jquery。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。