bootstrap网页制作，bootstrap中文开发文档

其实bootstrap网页制作的问题并不复杂，但是又很多的朋友都不太了解bootstrap中文开发文档，因此呢，今天小编就来为大家分享bootstrap网页制作的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

写网页用原生 html5 和 bootstrap 哪种用户体验好

根据优势选着你觉得合适自己的：

bootstrap：优势与劣势

bootstrap

2以后的版本不支持IE6。当你的网站需要支持ie6的时候，这时是缺点。当网站不需要支持ie6.减少了兼容代码的处理，马上又变成了优点。

总体而已，Bootstrap属于前端 ui

库，通过现成的ui组件能够迅速搭建前端页面。同时还可以用less重新设计组件。对于前端技术一般的后台工程师，省去了很多编写前端处理时的痛苦。个人使用搭个博客什么的比较方便。

相对于公司，直接使用 Bootstrap

感觉不多，大公司都有自己的前端开发设计人员，也会设计自己的css库。当然，Bootstrap开源，对于学习如何组织css还是很有必要。

个人认为：bootstrap最大的缺点在于---------大家做出来的网站都一个摸样。

html5：优势与劣势

1、摆脱对平台的依赖

HTML5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，而不需要经过各种Store的审核。

2、实时更新

实时更新，通常平台的审核都需要七个工作日左右的时间，如果你发布之后发现问题怎么办?Web方式就不存在这种问题。

3、离线使用

用户可以离线使用，更新下载量及少，可以全部更新，也可以选择替换部分文件。

4、代码更安全安全

使用HTML5，代码更安全安全。众所周知Web应用有一个很大的问题就是代码安全的问题，但现在HTML5可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。

5、跨平台

HTML5可以做到跨平台，多数核心代码不用重写，Javascript的代码用得好的话，在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。诚然，这种方式并非完全跨平台，但这样也足以减少很多工作量了，特别是后期的维护。

6、可以充分利用Native

HTML5可以通过浏览器作为中介充分利用Native的好处，比如说可以使用GPS、照相机、本地相册、读取本地联系人，也可以使用推送功能等，最重要的是，某些Web无法实现的功能，我们可以利用Native来实现。

HTML5可能对移动 Web带来更多好处，原因是，现在的移动 Web，iPhone占主导地位，而 iPHone是不支持 Flash

的。HTML5还会让其它平台的移动浏览器有更快的网页加载速度。另一个好处是 SEO，Google

4月9号宣布，将页面加载速度作为搜索排名的一个因素，因此，基于 HTML5的页面也会因加载速度更快而受益。

不过，和任何新技术的降临一样，其中也会牵扯到一些问题，对 Web

设计者而言，最大的一个问题就是因为这些新标签的引入，各浏览器之间将缺少一种统一的数据描述格式。

在 HTML5被广泛采用之前，我们还无法完全知道 HTML5

代码将带来的好与坏，总体来说，对开发者而言，这将是一个巨大的变化，而对图形设计师而言，还不明朗。

怎样开发bootstrap插件

1. Jetstrap

Jetstrap是一个完全基于 Web的，用于 Twitter Bootstrap的界面构建工具，专为开发人员，设计师和打造。Jetstrap帮助您快速创建出漂亮网站，只需要花费很少的精力。

2. Bootply

Bootply让你可以方便的调试 Bootstrap。编辑 CSS，HTML和 JavaScript。可以使用 Bootply设计，原型，扩展或测试 Bootstrap框架。Bootply集成了其他流行的 Bootstrap插件，微型库和框架。

3. DivShot

Divshot是一个基于拖放的前端编辑器，允许你使用 Twitter Bootstrap（当然 Foundation也可以）建立响应式的网站，不需要自己动手编码，只需要进行简单的拖放操作即可。

4. Bootstrap Magic

Bootstrap Magic主题生成器基于 Twitter Bootstrap 3和 AngularJS构建。您可以轻松快速地创建您自己的 Twitter Bootstarp主题。你可以立即看到你正在改变的内容是什么，您还可以添加来自 Google Webfont的精美网页字体。

5. Layoutit

LayoutIt是一个 Twitter Bootstrap界面生成器，能够帮助你快速制作出网站和界面模型，同时能够下载生成的网站代码。简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap网站。所有的设计都可以是响应式 CSS和流体，能够份容易与任何的编程语言集成，您只需下载 HTML即可开始编码设计。

6. X-editable

X-editable支持就地编辑 Twitter Bootstrap， jQuery UI或纯 jQuery。这个库允许你在自己的网页上创建可编辑元素。它包括弹出式和内嵌模式。它支持的输入元素包括文字，文本区域，下拉列表，日期， dateui和 checklist。它支持客户端和服务器端验证。另外容器的位置是完全可定制的，用户可以通过单击，双击自动或手动切换。

7. Grid Displayer

Grid Displayer是一个书签工具，可以用于显示 Twitter Bootstrap（固定和流体网格）和 Foundation（ 2.0和 3.0）的网格。它支持 Firefox和 WebKit核心的浏览器。

8. GetkickStrap

Kickstrap完美结合 Bootstrap，采用顶级的 Web技术。它可以运行经过验证的，数据库驱动的 Web应用程序，不需要原生后台。Kickstrap结合 JSPM.io提供了建立在 Require.js的强大的前端软件包的依赖关系。 Kickstrap应用程序是可以在任何时间在 Web应用程序的生命周期中运行的静态资源集合。

9. Font Awesome

Font Awesome是一套专门为 Twitter Boostrap设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标，除了包括 Twitter Boostrap的默认图标外，还有社交网络图标、Web应用程序图标和编辑器图标等等，可以免费用于商业项目。

10. Bootstrap Button Generator

这是一款很好用的 Twitter Bootstrap按钮生成工具，你只需要输入你要分配的新的按钮样式，并与不同的按钮颜色搭配，更新就可以即时预览。

11. Easel

Easel是一个令人印象深刻的 Twitter Bootstrap设计工具，可让你在文档中的特定元素链接到其他文件的原型应用程序中。你甚至可以有你的用户通过测试让你得到尽早的在反馈。

12. Fancyboot

Fancyboot是一个简单但功能强大的 Twitter Bootstrap定制工具，控制的恰到好处，移除了所有不必要的复杂性。

13. Bootstrap Designer

Bootstrap Designer是一个在线设计工具，可以制作出很漂亮的基于 Twitter Bootstrap的 HTML5模板。可以创建不同的设计风格：简约风格，黑白，排版驱动的，单色的外观，干净及创意等。

14. Bootsnipp

Bootsnipp是一个元素画廊，为网页设计师和 Web开发人员设计，任何人使用 Twitter Bootstrap都会发现在他们的工作是必不可少的。

15. PaintStrap

Paintstrap让你可以生成使用漂亮的 Twitter Bootstrap主题，使用 Adobe Kuler或者 COLOURlovers配色。

Bootstrap栅格化系统设计原理

栅格实现原理

•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序

•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统

•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

下面就介绍一下 Bootstrap栅格系统的工作原理：

•“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

•通过“行（row）”在水平方向创建一组“列（column）”。

•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

•类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的 mixin也可以用来创建语义化的布局。

•通过为“列（column）”设置 padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值 margin从而抵消掉为.container元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

•负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

•栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

•如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。

（原理：把我们的屏幕大小的宽度平分成12个格，每一格的宽度和整个屏幕分辨率是有关系的，如果整个屏幕分辨率越大那么这12格的每一格的宽度就大，是按比例来算出的，而且这12格的layout是水平排列的。）

比如，我们定义一个div，我们不指定这个div的宽度是多少像素或者占多少百分比，我们是指定这个div占12格中的几格，我们这个div占12格中的8格，不同的分辨率底下它始终是占12格中的8格。系统会根据屏幕分辨率的大小，自动拆成12格，每一格大小根据屏幕分辨率自动在变。这样的话在各浏览器或分辨率下都可以兼容我们这个8:4这个比例。

文章分享结束，bootstrap网页制作和bootstrap中文开发文档的答案你都知道了吗？欢迎再次光临本站哦！