bootstrap框架原理(bootstrap框架优点)

网页到手机端布局全乱了，bootstrap该怎样使用

下面我在这里简单的介绍下Bootstrap框架。Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外，Bootstrap框架十分超前，在支持html5和css3的浏览器上表现特别好，而且对移动终端的浏览器支持也是相当优秀。一个完整的Bootstrap框架包含如下四个部分：脚手架（不知道官网为啥这么翻译）：用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术，比如重置背景这样的操作，这些比较简单我就不叙述了，脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列，栅格系统分为两种类型，一种是默认栅格系统，这时候栅格系统是按940px像素进行等分，我们可以使用span1，span4这样的class属性操作默认栅格布局，另一种是流式栅格系统，这个时候分列的宽度就不是固定，而是根据你可视页面进行12等分，同样可以使用span1，span4操作流式栅格。这个系统非常之好，做css最难的就是div布局，使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了，布局也分为固定和流式明数，让不太精通css布局也能轻松操作布局。基本的css样式。Bootstrap给出了一样常用的HTML元素的样式，例如：按钮、表单和文字等等。大部分做网站的人都不是穗槐碧美工出身，做出赏心悦目的网页是件很困难的事情，css提供的样式很专业很精美，能让我们轻松开发出一套精美的网站Css组件：Bootstrap还提供一些常用的css组件，同样很优秀很棒。Javascript插件：Bootstrap是个开放的系统，我们可以随意扩展Bootstrap，特别是javascript的框架，这样Bootstrap就会更加专业。Bootstrap是个操作性质的框架，没必要做深入分析，最关键是有没有好的使用实例，我下载Bootstrap发现，猜举下载包里的example不是太强大，例子都在它的官网上，很多对css和javascript不是特别熟悉的人使用起来都不太习惯，因此我将这些例子进行了整合，作为单独的例子工程，这个工程非常全面，我在网上找过，目前还没有比我整理的更详尽的例子，大伙下载下来按照我的工程目录结构就可以进行开发了。

方法/步骤

1

首先我们当然是需要得到Bootstrap相关文件，因为在网页中应用Bootstrap是需要引入其相关文件的。我们可以到Bootstrap官网下载。

2

如果你的英文水平不是太好的话，没关系，我们可以到国内做的汉化比较好的Bootstrap网站去下载，最新版本都是3，属于扁平化的那种。

3

以上两步点击下载按钮后都会跳转到一个详细下载列表，有三种Bootstrap，这里我们下载第一个就可以了。

4

下载完成后解压，会看到文件有三个子文件夹，分别是css、font、js，里面带min的文禅喊源件都是压渗首缩后的文件，在网站上线的时候用，其他未压缩的文件我们可以在平时开发的时候贺态用。

5

再之后就是要用这套Bootstrap框架了，首先要做的就是建立一个html文件，你可以用任何文本编辑器，这里推荐DreamweaverCS6，个人感觉比较好用。

6

接下来就是要引入css文件了，要把文件的路径写正确，如果网页内用到了Bootstrap的js效果，那么必须先引入jQuery文件，因为Bootstrap的js插件都是基于jQuery的。

7

最后就可以在body标签内应用Bootstrap相关的class了，这些都是封装好的，只要嵌套正确就是做出漂亮的网页了。

jquerymobile和bootstrap都是较好的框架

jQueryMobile是jQuery在手机上和平板设备上的版本。jQueryMobile不仅会给枣雀主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQueryMobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开简笑发人员开发出真正的移动Web网站。

Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。它由Twitter的设计师MarkOtto和JacobThornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公凳咐早司）的BreakingNews都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

常见的web前端开发框架如下：

1、Bootstrap：

主流框架之一，Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。

2、html5-boilerplate：

该框架可以快速构建健壮，且适应力强的webapp或槐镇网站。

3、Meteor：

Meteor是新一代的开发即时web应用的开源框架，它能在较短时间内完成开铅慎粗发。

4、Materialize：

基于孝尘材料设计的现代化响应式前端框架。可提供默认的样式，自定义组件。此外，Materialize还改进动画和过渡，为开发人员提供流畅的体验。

5、AmazeUI：

国内首个开源HTML5跨屏前端框架产品系列，中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架AmazeUITouch以及针对跨屏HTML5网页开发的AmazeUIWeb。

扩展资料：

web框架程序的作用：

Web框架使得在进行Web应用开发的时候，减少了工作量。Web框架主要用于动态网络开发，动态网络主要是指现在的主要的页面，可以实现数据的交互和业务功能的完善。

使用Web框架进行Web开发的时候，在进行数据缓存、数据库访问、数据安全校验等方面，不需要自己再重新实现，而是将业务逻辑相关的代码写入框架就可以。也就是说，通过对Web框架进行主观上的“缝缝补补”，就可以实现自己进行Web开发的需求了。

以PHP为例，PHP可以在apache服务器上进行Web开发，而不必使用框架。使用PHP进行开的时候，在不适用框架的情况下，数据库连接就需要自己来实现，页面的生成和显示也是一样。比如框架的话可以完成避免sql注入的工作，而使用PHP在不用框架的情况下，这部分要自己做。

《深入理解Bootstrap》（徐涛）电子书网盘下载免费在线阅读

资源链接：

链接：

密码：r8pw

书名：深入理解Bootstrap

作者：徐涛

豆瓣评分：7.2

出版社：机械工业出版社

出版年份：2014-5

页数：370

内容简介：Bootstrap是目前全球最流行、最火爆的Web前端开发框架之一。它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行了完整并完善的封装，能让没有经验的前端工程师和后端开发工程师都迅速数空掌握和使用，大大提高开发效率。此外，它还能在某种程度上规范前端团队编写CSS和JavaScript的规范。

Bootstrap更新比较快，目前国内仅有的两本书也都过时了，《Web开发技术丛书：深入理解Bootstrap》是根据Bootstrap的最新版本来撰写的。它同时面向两类读者：没有Bootstrap经验的初级前端开发工程师，书中对Bootstrap功能组件的详细讲解以及大量案例的展示能让他们迅速晋级到中高端水平；有一定Bootstrap经验的专业前端开发工程师，书中或镇对Bootstrap架构思想的阐述、实现原理的分析、扩展和插件的二次开发能让他们自如解决开发中遇到的各种疑难问题。

作者简介：徐涛，资深Web开发工程师，精通JavaScript、CSS、HTML5等衫毕粗Web开发技术，以及Bootstrap等各种主流Web开发框架。擅长Web系统的架构、设计与开发，参与过全球最大婚恋网站Match、全球最大在线旅游网站Expedia、波音公司、GE医疗和万达集团等多个国际知名企业的Web项目的架构与设计。他还是一位资深的微软技术专家，曾获得MCP、MCTS、MCDBA等近十项认证。翻译了《JavaScript编程精解》等多本JavaScript方面的著作。