【开发新手福利】—Bootstrap运用终极指南

以下内容由摹客团队翻译整理,仅供学习交流。

 

Bootstrap是一个功能强大的、以移动端为优先的响应式前端框架,它是用CSS、HTML和JavaScript构建的。与从零开始编程,甚至许多其他框架相比,Bootstrap都有许多优势。

 

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它最初是由Twitter的设计师Mark Otto和Jacob Thornton合作开发的,现在已经成为世界上最流行的前端框架之一。在成为开源软件之前,它被称为Twitter Blueprint,并在公开发布之前的一年多时间里担任Twitter内部风格指南。

 

如果你还不熟悉Bootstrap,本文提供的信息和资源将帮助你快速入门。

 

为什么推荐使用Bootstrap开始编程呢?

 

使用Boostrap比在Web项目上从零开发更有优势。其中最大的一个优势是:与许多其他框架和模板相比,Bootstrap有大量现有资源可用。(后文会为大家提供这些资源)

 

【开发新手福利】—Bootstrap运用终极指南_第1张图片

 

除了大量可引用的资源之外,以下也是Bootstrap值得被选择的理由:

 

1.使用方便: 使用Bootstrap开发非常快速和简单,并且也很灵活。你可以在Bootstrap中使用Less,CSS,甚至是Sass(前提是你下载了Saas版的Bootstrap)。

 

2. 响应式栅格: Bootstrap使用12列响应栅格,它支持嵌套和偏移元素。栅格可以保持响应性,也可以轻松地更改为固定布局。

 

3. 开发更快: Bootstrap有大量现成的组件和资源可用,它可以大大提高开发速度。

 

4. 基本样式: Bootstrap附带了大量HTML元素的基本样式,它包括排版、表单、图像等样式。

 

5. 预样式组件: Bootstrap程序还提供用于下拉菜单、导航条、弹窗和许多其它功能的预样式组件。

 

6. 绑定JavaScript的组件: Bootstrap附带了一组JavaScript组件来添加功能。开发人员操作模态窗口、工具提示、弹窗警告等变得更加容易,甚至可以完全跳过编写脚本。

 

7. 文档支持: Bootstrap提供了出色的文档教程,这对初学者和资深用户都非常有用。

 

8. 易于集成: Bootstrap可以与各种框架和平台集成,包括在新站点和现有站点上。你可以将特定的bootstrap元素和已有的CSS代码一起使用。

 

如何选择和安装Boostrap?

 

下载Boostrap主要有两种版本: 编译版本或源码版本

 

编译版本可以在任何项目中直接使用,里面包含已编译的CSS和JavaScript,以及各自的编译和压缩版本。它还包含了数百个Glyphicon字体图标,以及Boostrap主题可供你自由选择。

 

源码版本包括预编译的CSS和JavaScript,以及字体资源;它还包括Less、JavaScript和说明文档。它基本上可以被视为一个更完整的版本,尽管学习曲线会比编译版本高一些。

 

还有一个Saas版本,它是Bootstrap从Less移植到Sass的源码移植项目。如果你想快速地在Rails、Compass或仅支持Sass的项目中使用Bootstrap,那么这个版本是不二之选。

一旦决定好要安装哪个版本,就需要安装Grunt,它是构建Bootstrap项目使用的。你需要先下载并安装node.js,然后是Grunt。Grunt拥有大量的插件,几乎任何你想要的命令都可以用 Grunt 实现。

 

然后,你可以从简单的Bootstrap HTML模板开始,或者从官网提供的实例模板开始。(使用实例时建议按照自己的需求进行修改,而不是简单的复制、粘贴。)实例模板包括网格布局、基于jumbotron的布局、各种导航条和其它定制组件(例如博客页面、封面图、登录页等)。

 

更多Boostrap模板:

 

干货集锦——20个最佳Bootstrap着陆页模板,快速网页设计不是事儿

2018年最好用的20个Bootstrap网站模板

 

如果我想要开发非响应式站点怎么办?

 

虽然Bootstrap是响应式、移动端优先的前端框架,但如果你想开发一个非响应式的站点,可以选择禁用响应式布局。只需要在CSS中省略viewport元标记,覆盖每个网格层容器的宽度,删除导航栏上所有折叠和展开行为,并在使用网格布局时对它们进行一些调整就可以了。关于操作详情,你可以阅读入门文档中的说明。

 

Bootstrap插件和组件资源

 

Bootstrap自带了很多出色的功能,也提供了很多插件和组件帮助扩展功能来满足开发需求。

 

1.Fuel UX 是一组用于web应用程序的附加JavaScript控件。它提供了超过12个jQuery控件供部署使用,如数据中继器、树、导航栏等。

 

【开发新手福利】—Bootstrap运用终极指南_第2张图片

 

2. Jasny Bootstrap是一套包含垂直导航组件和弹窗组件的Bootstrap插件。

 

3. Bootstrap-Modal 插件可以将可堆叠的、响应性强的AJAX模态弹窗添加到你的Bootstrap站点。它支持全宽调制解调器和长调制解调器以及其它格式。

 

4. Bootbox.js是小型的JavaScript库,它可以帮助你轻松地创建对话框。

 

5. Bootstrap Image Gallery是blueimp Gallery的插件。blueimp Gallery是一个使用Bootstrap模态弹窗,支持触摸、响应的图片库。

 

6.Bootstrap Lightbox是一个基于Bootstrap的大图预览插件。它包含了背景选项,关闭lightbox等功能。

 

7. Bootstrap Form Helpers 是一组jQuery插件,用于更好地构建表单。你可以从中选择单个表单进行使用,也可以根据需要选择多个一起使用。

 

8. Notifications 是一个Bootstrap插件,支持开发人员轻松地将自定义通知添加到自己的网站或应用程序。它包含了位置、类型、转换等选项。

 

9. Bootstrap-growl 是一个jQuery插件,它将常规的Bootstrap弹窗转换为类似于Growl的通知。这个插件提供信息、错误和成功样式的弹窗,并且支持多个弹窗连续通知。

 

10. Bootstrap-select 插件为Bootstrap添加自定义选择提供按钮下拉菜单。

 

11. Boostrap Maxlength插件可以在文本输入达到最大长度时,提供一个可视的反馈。

 

【开发新手福利】—Bootstrap运用终极指南_第3张图片

 

12. Boostrap Markdown 可以轻松地为表单添加Markdown支持,并将它们无缝转换为Markdown编辑器。

 

13. Bootstrap Switch 3 可以帮助你轻松地将复选框和单选按钮转换为切换开关。

 

14. jQuery File Upload 添加了一个jQuery File Upload小部件,支持拖放、多个文件选择等等。

 

15. jQBootstrapValidation 是一个用于Bootstrap表单的jQuery验证插件,它易于使用,并且当验证发生错误时,可以提供清晰的错误说明。

 

16. Bootstrap-wysihtml5 是一个简单而漂亮的HTML5 WYSIWYG编辑器,它是一个JavaScript插件。

 

17. Summernote 是一个简单灵活的WYSIWYG编辑器,适用于Bootstrap。

 

18. BIC Calendar 是一个用于标记事件的jQuery简单日历组件。

 

19. bootstrap-datetimepicker 是一个用于Bootstrap的简单的日期和时间选择器组件。

 

20. Clockface 是一个用于Bootstrap的时间选择器,支持格式和触发器等选项。

 

21. Bootstrap Timepicker 这个时间控件,通过鼠标或者方向键就可以轻松选择一个时间的文本输入。

 

22. Color Palette for Bootstrap 是一个简单的颜色选择器,提供基本的、gmail风格的和自定义的调色板。

 

23. Pick-a-Color 是一个用于Bootstrap的jQuery颜色选择器,它支持灵活的文本输入、保存颜色等等。

 

24. Bootstro.js 插件可以帮助你轻松地为自己的网站添加一个导航。

 

25. Social Buttons for Twitter Bootstrap 2 插件提供了矢量、可缩放、支持视屏和可定制的社交按钮。

 

26. Flippant.js 是一个迷你的JavaScript和CSS类库,用于翻转页面元素,与其他类库没有依赖关系,便于自定义使用。

 

27. Tab drop for Bootstrap 插件,当Tab不能完全适应分配的空间时,它可以将这些Tab重新排列到下拉选项中。

 

28. Tocify 是一个jQuery目录插件,可以用Bootstrap进行主题化。

 

29. Bootpag 是一个用于动态分页的jQuery插件,可以使用Bootstrap或自己实现。

 

30. Typeahead.js 是一个来自Twitter的JavaScript库,用于构建typeaheads。

 

31. X-editable 插件支持在Bootstrap中的页面上创建可编辑元素。

 

32. Bootstrap Tree View 插件可以为显示分层树结构提供简单解决方案。

 

33. Tokenfield for Bootstrap 是一个高级的tokenizing插件,专注于键盘和复制粘贴支持。

 

34. Bootstrap Star Rating 是一个jQuery Star Rating插件,它支持分数填充和RTL输入等特性。

 

35. Yamm Megamenu 是另一个使用标准导航条标记和流式网格系统进行引导的Megamenu。

 

36. Bootstrap Multiselect是一个用于UI的jQuery插件,它使用具有多个属性的选择输入,并使其以带复选框的下拉框形式出现。

 

37. Knockout-Bootstrap 是一组用于访问Bootstrap JavaScript小部件的清除绑定处理程序。

 

38. Gridmanager.js 支持在Bootstrap之类的框架中创建和编辑网格布局。

 

39. Slider for Bootstrap 是Bootstrap的滑块控件。

 

40. WATable 是一个jQuery插件,它支持开发人员快速、轻松地对数据进行过滤、格式化、分页和排序。

 

41. Bootstrap Datagrid 是一个简单强大的jQuery插件,可以完全定制。

 

42. PNotify 是一个用于Bootstrap的JavaScript通知插件。

 

43. Bootstrap Tour 是一个简单的插件,用于创建带有(或者没有)Bootstrap的站点浏览。

 

【开发新手福利】—Bootstrap运用终极指南_第4张图片

 

44.来自PayPal的 Bootstrap Accessibility插件可以帮助用户访问许多Bootstrap组件。

 

45.Bootstrap Video Player 是一个可定制的HTML5视频播放器jQuery插件。

 

Bootstrap主题、模板和UI工具包

 

如果愿意的话,你也可以自己构建Bootstrap主题和模板。为提高开发效率,以下这些免费的高级资源也可以直接下载使用。其中部分资源需要安装原版使用,而大部分则支持定制设计。

 

1.Creative Market网站有超过300个高级Bootstrap主题可用。

 

【开发新手福利】—Bootstrap运用终极指南_第5张图片

 

2.BootstrapMade是一个提供了多种风格主题的免费网站。

 

3.BootstrapBay是一个提供高级主题和模板的市场,你可以在这里买卖Bootstrap模板和主题。

 

4.GridGum是一个高级Bootstrap主题市场,提供了几十个不同主题供下载。

 

5.ThemeForest 网站有数百个Bootstrap主题出售,起价仅4美元。

 

6.WrapBootstrap是一个提供高级Bootstrap模板和主题的市场,提供了从电子商务网站到登陆页面的所有主题和模板。

 

7.Cardeostrap是一个用于Bootstrap的大型UI工具包,内容分为CSS、组件和JavaScript三个版块。

 

8.Flatstrap是一个免费和开源的Bootstrap主题框架,这些框架都去掉了不必要的虚饰,简单实用。

 

9.Bootmetro 是一个基于TwitterBootstrap的web框架,具有Windows 8的外观和感觉。

 

10.Fbootstrapp是一个创建Facebookiframe应用程序的工具包。

 

11.Bootplus 是一个谷歌风格的前端框架,它时髦而直观。

 

12.Get Template 是HTML5和CSS3模板的一个集合,具有多种风格。

 

13.BootstrapTaste 是一组免费和高级的Bootstrap主题。

 

14. Bootstrap Zero 自称是Bootstrap最大的免费开源模板集合。

 

15. BlackTie 是一个基于各种Bootstrap版本的免费和高级主题集合。它们包括从仪表板主题到新闻聚合器,再到组合主题的所有内容。

 

【开发新手福利】—Bootstrap运用终极指南_第6张图片

 

16. Startup Framework 是来自DesignModo的一个界面简单但功能强大的Bootstrap框架。

 

17. Bootswatch 是一个免费、易于安装、模块化的Bootstrap主题集合。

 

18. Start Bootstrap 是一组Bootstrap主题的免费模板,包括博客主题、投资组合主题等等。

 

19. Joostrap 是用Bootstrap构建的Joomla模板的集合。

 

20. Theme Armada是一组手工制作的响应主题,由Bootstrap构建,起价仅8美元。

 

21. PrepBootstrap是一个免费主题、模板和小部件的资源供应网站,从管理界面到联系人表单,无所不包。

 

22. RandThemes 是一组高级的Bootstrap主题,它包含了前端和后端设计。

 

23. Roots 是一个建立在Bootstrap上的WordPress主题框架。

 

24. UI Bootstrap 是一组用AngularJS编写的Bootstrap组件。

 

25. The Bootstrap 是一个简洁的、偏现代风格的WordPress Bootstrap主题。

 

26. BootstrapWP 是一个基于Bootstrap的自定义WordPress主题开发的基础程序。

 

27. StrapPress 是一个WordPress主题,它以移动为优先,响应性强,包含了大量的Bootstrap元素。

 

28. Shoestrap 是一个基于Bootstrap的高级WordPress主题。

 

【开发新手福利】—Bootstrap运用终极指南_第7张图片

 

29. Expose Framework是一个基础主题,它提供了流畅的布局、HTML5和CSS3以及响应菜单。

 

结论

 

Bootstrap只是使用HTML、CSS和JavaScript构建响应性强、以移动为优先的网站框架之一。如果你仍不确定使用什么框架进行开发,不妨花点时间研究一下与其它框架相比Bootstrap可以做什么 (或者说你觉得用它做什么比较顺手),然后选择最适合项目需求的框架。千万不要害怕切换不同框架,合适的框架对项目开发有很大帮助 !

 

原文作者: CAMERON CHAPMAN

 

你可能感兴趣的:(移动开发,web前端,架构设计,开发,开发教程,网站框架,项目开发)