bootstrap框架的详细简介
Bootstrap简介
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob
Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web
开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语⾔Less写成。Bootstrap⼀经推出后颇受欢迎，⼀直是GitHub 上的热门开源项⽬，包括NASA的MSNBC（微软全国⼴播公司）的Breaking
News都使⽤了该项⽬。 [1] 国内⼀些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进⾏性能优化⽽来。
为什么要使⽤bootstrap
众所周知bootstrap是⼀个⾮常好⽤的框架那么为什么⼤家都这么喜欢bootstrap呢
1.移动设备优先：⾃ Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2.浏览器⽀持：所有的主流浏览器都⽀持 Bootstrap。
3.容易上⼿：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
4.响应式设计：Bootstrap 的响应式 CSS 能够⾃适应于台式机、平板电脑和⼿机。
5.它为开发⼈员创建接⼝提供了⼀个简洁统⼀的解决⽅案。
6.它包含了功能强⼤的内置组件，易于定制。
7.它还提供了基于 Web 的定制。
8.它是开源的。
Bootstrap包的内容
1.基本结构：Bootstrap 提供了⼀个带有⽹格系统、链接样式、背景的基本结构。
2.CSS：Bootstrap ⾃带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及⼀个先进的⽹格系统。
3.组件：Bootstrap 包含了⼗⼏个可重⽤的组件，⽤于创建图像、下拉菜单、导航、警告框、弹出框等等。
4.JavaScript 插件：Bootstrap 包含了⼗⼏个⾃定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
5.定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您⾃⼰的版本。
Bootstrap可视化布局
在⽹上有很多Bootstrap的可视化布局⽹站但是今天要重点讲的是
Layoutit
image
不⽤写代码也不⽤⾟⾟苦苦的调整格式直接从左侧选择想要的框架拖拽即可迅速的完成前端的基础框架
第⼀个栏⽬：
image
第⼀个栏⽬是布局的基础，是⾃定义页⾯的整体布局格式的⼀栏
左侧的框架直接拖拽到右侧即可使⽤想要的box的⼤⼩，⽹站已经有四种可以选择的⼤⼩分配，每个拖拽出来的box都独占⼀⾏。很多使⽤者不知道数字的意义，这⾥要跟⼤家讲⼀下。数字12代表的是⼀个独占这⼀⾏100%宽度的box，那么6
6就很好理解了，代表的是两个并排的分别占这⼀⾏50%宽度的box
那么重点说⼀下最后的⾃定义⼤⼩框；这⾥体现了bootstrap的⾃由度，随便⼤家怎么定制box⼤⼩只要每个数字之间⽤⼀个空格隔开并且加起来总数为12就可以随⼼所欲的⾃定义这⼀⾏box的⼤⼩。当然数字必须要是整数才⾏
第⼆个栏⽬：
image
其实之后的三个栏⽬框都是⼀个意思，⽹站整理出来了现成的各种格式框，直接拖拽即可完成整个页
⾯的布局。并且拖拽出来之后还可以在格式框的右上⾓⾃定义喜欢的具体格式
如下图的image选项便有四种已经写好的样式可以使⽤：
image
jquery框架定义
具体每个选项做什么⽤再这⾥就不⼀⼀阐述，⼤家⾃⼰去试⼀试效果会更好
导出
当你完成了整个页⾯的初步设计之后还可以在页⾯预览⼀遍，如果觉得不错就可以导出了
在这⾥导出⼜分为两种
image
第⼀种：只复制前端代码，适⽤于⼯程⾥已有bootstrap全部css，js包的⽤户体，只需要把前端代码复制粘贴进⼯程即可
第⼆种：整个包下载，适⽤于没有还没有bootstrap全部css，js包的体，直接整个前端打包下载，然后把资源整合进⼯程即可
以上即是bootstrap的基本简介以及可视化布局系统的详情，总得来说⼤⼤的节省了前端的开发时间，如果项⽬需要响应式布局那么在这个⽹站五两分钟即可做好⼀个页⾯的框架，只需要去开发⼯具⾥⾯修改⽂字内容即可。关于什么是bootstrap响应式布局，下⼀篇⽂章我们再详细介绍

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