引导终极指南

卡梅隆查普曼 经过 卡梅隆查普曼  |  2014年10月01日

bootstrap是一个强大的移动式,第一,响应的前端框架’S用CSS,HTML和JavaScript建造。它提供了从头开始的大量优势,甚至在许多其他框架上。

Bootstrap最初由Designer和Developer从Twitter开发,它’成为世界上最受欢迎的前端框架之一。它是第一个被称为Twitter蓝图,在成为开源之前,并担任Twitter’在公开发布之前,内部样式指南一年多。

如果你’重新陌生的引导程序,这里的资源和信息将让您加快速度。

 

为什么引导?

Bootstrap在Web Dev项目中从头开始时有很多优势。最大的原因是可用于引导的大量资源,特别是与大量其他框架和锅炉(我们’LL稍后会得到那些)。

但除了可用的资源之外,还有很多其他原因使用引导程序:

  1. It’s easy to use: Bootstrap入门是一个非常快速且简单的过程。它’s flexible:您可以使用较少或css,甚至是sass(如果下载sass版本)。
  2. 网格: Bootstrap使用12列响应网格。它甚至支持嵌套和偏移元素。网格可以保持响应,或者您可以轻松将其更改为固定的布局。
  3. 更快的发展: 由于Bootstrap具有如此多的现成组件和资源可用,因此它可以显着加速您的开发过程。
  4. 基础样式: Bootstrap提供了一吨HTML元素的基本样式’重新使用无论如何。它包括用于排版,表格,图像等的样式。
  5. 预测组件: Bootstrap还配备了用于下拉列表,NAV栏,警报和许多其他组件的预样组件。
  6. 捆绑的JavaScript组件: Bootstrap附带一堆JavaScript组件以添加功能。它可以轻松地操纵模态窗口,工具提示,警报等事物。您可以一起跳过编写脚本。
  7. 优秀的文件: Bootstrap具有卓越的文档,可用于初学者和更高级用户。
  8. 轻松集成: Bootstrap可以在新站点和现有网站上与各种其他框架和平台集成。您甚至可以仅使用现有CSS的特定引导元素。

 

bootstrap入门

你可以有两种主要方式 下载Boostrap.:预编译版或源代码版本。您选择哪一个取决于您想要开始的方式。

预编译的人在几乎任何项目中都准备好用于删除使用,并包括编译的CSS和JS以及每个编译和缩小版本。包括Glyphicon字体以及可选的引导主题。

源代码版本包括预先完成的CSS和JavaScript,以及字体资产。它还包括较少,JavaScript和文档。基本上,它’s更完整的版本,尽管学习曲线将比预编译版本高一点。

还有一个引导版本,它已从少于SASS移植,如果您希望在Rails,Compass或SASS的项目中包含它特别有用。

一旦您’ve决定你想要安装哪个版本’LL需要安装Grunt,这是构建系统引导使用。你’LL需要首先下载并安装node.js,然后junt。从那里,你’LL指尖有各种咕噜声命令。

然后,您可以用基本引导HTML模板或其其中一个开始 示例模板。示例模板包括网格布局,基于jumbotron的布局,各种导航栏和其他自定义组件(甚至是博客和登录页面)。

如果我不怎么样’想要一个响应的网站?

虽然Bootstrap是响应和移动式首先出于框中,但它就不了’如果你不,它必须保持这种方式’想要一个响应的网站。您需要做的就是禁用它是省略CSS中的视口元标记,覆盖每个网格层的容器上的宽度,删除导航栏上的任何折叠和扩展行为,如果您删除对网格布局的一些调整’使用它们。您可以阅读特定说明 入门文档.

 

Bootstrap插件,扩展和组件

Bootstrap附带了很多很大的功能。但也有足够的方法来扩展其功能以满足您的确切需求。

燃料UX. 是您的Web应用程序的一组其他JavaScript控件。您只能部署您要使用的可用的控件。

燃料UX.

 

Jasny Bootstrap. 是一组组件,包括垂直导航组件和警报。

Jasny Bootstrap.

 

bootstrap-mocal. 添加可堆叠,响应于Bootstrap站点的响应Ajax模态窗口。它支持全宽模块和长模块等格式。

bootstrap-mocal.

 

bootbox.js.js..js. 是一个小型库,可让您轻松创建Programmatic对话框。

bootbox.js.js.

 

Bootstrap图像库 是蓝色族画廊的扩展,它是一个使用bootstrap的启用触摸响应图像库’s modal dialog.

Bootstrap图像库

 

Bootstrap Lightbox. 是一个基于Bootstrap模态插件的简单Lightbox插件。它包括背景的选项,如何关闭灯箱,以及更多。

Bootstrap Lightbox.

 

Bootstrap表单助手 是jQuery插件的集合,用于建立更好的形式。您可以独立地使用大部分,或共同满足您的需求。

Bootstrap表单助手

 

通知 是一个引导扩展,可让您轻松地向您的网站或应用程序添加自定义通知。位置,类型,转换等有选项。

通知

 

bootstrap-growl. 是一个jQuery插件,它将常规引导警报转换为Growl-Like的通知。信息,错误和成功样式有警报,它支持多个连续通知。

bootstrap growl.

 

Bootstrap-select. 使用按钮下拉点添加自定义选择for Bootstrap。

Boostrap-Select.

 

boostrap maxlength. 为字段输入上的MaxLength属性提供视觉反馈指示符。

boostrap maxlength.

 

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

Bootstrap Markdown.

 

Bootstrap Switch 3. 可以轻松将复选框和单选按钮转换成Toggle交换机。

Bootstrap Switch.

 

jquery.文件上传 添加jQuery文件上传小部件,支持拖动&删除,多个文件选择等等。

jquery.文件上传

 

jqbootstrapvalidation 是一个用于引导型窗体的jQuery验证插件’S易于使用,并使在发生验证错误时,简单地提供清晰的指令。

jqbootstrapvalidation

 

bootstrap-wysihtml5.. 是一个简单而美丽的html5 wysiwyg编辑器,它是一个javascript插件。

bootstrap-wysihtml5.

 

Bootstrap Multipelect. 是UI的jQuery插件’■使用具有多个属性的选择输入,将它们显示为包含复选框的下拉列表。

Bootstrap MultiCelect.

 

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

BIC日历

 

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

bootstrap-datetimepicker.

 

钟面 是一个针对Bootstrap的TimePicker,其中包含像格式和触发等物品的选项。

钟面

 

Bootstrap TimePicker. 可以轻松选择使用鼠标或箭头键的文本输入的时间。

Bootstrap TimePicker.

 

引导彩色调色板 是一个简单的彩色选择器,提供基本,Gmail风格和自定义颜色调色板。

引导彩色调色板

 

pick 是一个用于引导的jQuery颜色选择器,允许灵活的文本输入,保存的颜色等。

pick

 

Bootstro..js. 简单地添加到您的网站的导游。

Bootstro.

 

推特 Bootstrap 2的社交按钮2 为您提供矢量,缩放,视网膜准备和可定制的社交按钮。

社交纽扣

 

flippant.js. 是一个javascript和css库,用于翻转东西,即’S易于自定义,没有依赖关系。

flippant.js.

 

选项卡丢弃引导 当他们赢时,重新排列你的标签进入下拉菜单’全部适合分配的空间。

选项卡丢弃引导

 

tocify. 是一个可以使用Bootstrap主题的jQuery表。

tocify.

 

训练牌 是一个用于动态分页的jQuery插件,它与自举或自己一起使用。

训练牌

 

typeahead.js.. 是来自Twitter的JavaScript库,用于构建typeaheads。

typeahead.js.

 

X可编辑 允许您在Bootstrap中创建页面上的可编辑元素。

X可编辑

 

Bootstrap树视图 是用于显示分层树结构的简单解决方案。

Bootstrap树视图

 

Tokenfield. for bootstrap. 是一个高级授权插件,专注于键盘和复制粘贴支持。

Tokenfield.

 

Bootstrap Star Rating. 是一个支持分数填充和RTL输入支持等功能的jQuery星级插件。

星级评级

 

Yamm Megamenu. 是用于引导的另一个Megamenu,用于使用标准导航栏标记和流体网格系统类。

Yamm Megamenu.

 

Summernote. 是一个简单的wysiwyg编辑器,用于Bootstrap。

Summernote..

 

敲门 - 举止 是一组淘汰绑定处理程序,用于访问Bootstrap JavaScript小部件。

昏死

 

GridManager..js. 允许您在框架中创建和编辑框架中的网格布局。

GridManager.

 

滑块用于自靴子 是for表单的引导滑块组件。

滑块用于自靴子

 

是一个jQuery插件,可让您快速且轻松地过滤,格式化,分页和对数据进行排序。

沃

 

Bootstrap DataGrid. 是一个用于引导的jQuery插件’完全可定制,同时保持简单和强大。

Bootstrap DataGrid.

 

pnotify.. 是Bootstrap的JavaScript通知扩展。

pnotify.

 

Bootstrap旅游 是一个简单的扩展,用于创建网站之旅(或没有)Bootstrap。

Bootstrap旅游

 

Bootstrap可访问性插件来自PayPal,可以为键盘和屏幕阅读器用户提供大量的引导组件。

Bootstrap可访问性插件

 

Bootstrap Video Player. 是可定制的HTML5 Video Player jQuery插件。

Bootstrap Video Player.

 

Ladda UI. 是一组装载指示器,主要用于与形式一起使用。

Ladda UI.

 

Bootstrap主题,模板和UI套件

如果您选择或查看这些免费和高级资产以节省时间,您可以从头开始构建自己的主题和模板。有些人意味着用作,而许多其他人则是您自己的定制设计的跳跃点。

创意市场 拥有超过300个优质引导主题。

创意市场

盗版 提供各种风格的主题。

盗版

 

bootstrapbay.. 是您可以购买或销售的高级引导主题和模板的市场。

bootstrapbay.

 

格格兰 是一个优惠主题市场,提供了几十个主题。

格格兰

 

最重要的是 只需4美元即可出售数百个抢劫主题。

最重要的是

 

WrapBootstrap. 为从电子商务网站到登录页面的所有内容提供主题。

WrapBootstrap..

 

Cardeostrap. 是一个巨大的UI套件,用于引导脚跟,包括CSS,组件和JavaScript。

Cardeostrap.

 

刹车 是一个免费和开源的引导主题框架,没有所有的褶边。

刹车

 

bootmetro. 是一个Web框架,具有Windows 8的外观和感觉。

bootmetro.

 

Fbootstrapp. 是一个工具包,用于创建具有Bootstrap的Facebook Iframe应用程序。

fbootstrap.

 

bootplus.. 是谷歌风格的前端框架’S时尚和直观。

bootplus.

 

获取模板 是各种样式的HTML5和CSS3模板的一小部分。

获取模板

 

Bootstrapte. 是一系列免费和高级引导主题。

Bootstrapte.

 

引导零 是自称最大的Bootstrap的最大开源模板集合。

引导零

 

黑领带 是在各种版本的Bootstrap上建立的免费和优质主题的集合。它们包括从仪表板主题从仪表板主题到投资组合主题的所有内容。

黑领带

 

启动框架 来自DesignModo的简单但强大的引导框架。

启动

 

Bootswatch. 是一系列自由,易于安装的模块化引导主题。

Bootswatch.

 

启动bootstrap. 是一组免费的引导主题和模板,包括博客主题,投资组合主题等。

启动bootstrap.

 

Joostrap. 是一系列由Bootstrap建立的Joomla模板。

Joostrap..

 

主题armada 是一组手绘响应主题,该主题由Bootstrap建立,仅为8美元。

主题armada

 

Prepbootstrap. 是来自管理员接口联系表单的所有内容的自由主题,模板和小部件的巨大来源。

Prepbootstrap.

 

Randthemes. 是一组高级引导主题,包括前端和后端设计。

Randthemes.

 

是一个wordpress启动主题’S构建在引导中。

根

 

UI Bootstrap. 是在AngularJS编写的Bootstrap组件的集合。

UI Bootstrap.

 

引导 是一个干净而现代的引导WordPress主题。

引导

 

bootstrapwp. 是基于Bootstrap的自定义WordPress主题开发的实心基础。

bootstrapwp.

 

拉链 是一个wordpress主题’s移动首先,响应,并包含大量的引导元素。

拉链

 

Shoestrap. 是一个基于引导的高级WordPress主题。

Shoestrap.

 

暴露框架 是一个基础主题,提供流体布局,HTML5和CSS3和响应菜单。

暴露

 

更多Bootstrap资源

除了基本的扩展和主题之外,还有大量的其他引导资源,可以使用自动启动更容易,更令人愉快。

Bootstrap样式指南样板 通过链接样式表并为每个模式或元素创建HTML文件来帮助您半自动生成生活方式指南。

风格指南水锅板

 

Bootstrap Magic 是一个引导主题编辑器,可允许您更快地构建主题。

Bootstrap Magic

 

学术的 是一个基于Bootstrap的快速博客CMS。

学术的

 

赖特 是在引导中建立的Joomla 2.5和3.x框架。

赖特

 

Angularstrap. 是一组用于Bootstrap 3的AngularJS本机指令。

Angularstrap.

 

涂漆 允许您使用来自Adobe Kuler或Colourlovers的颜色调色板创建引导主题。

涂漆

 

杜兰德 是构建与Bootstrap集成的单页应用程序的框架。

杜兰德

 

奢华 可以轻松从图像创建自己的引导颜色方案。

奢华

 

layoutit.! 是用于创建前端代码的拖放接口构建器。

layoutit.

 

Pingendo. 是用于基于Bootstrap的原型设计响应设计的Visual Desktop应用程序。

Pingendo.

 

Bootsnip. 是用于引导资源的元素库。

Bootsnip.

 

靴子 是一个用于建造,测试和用引导框架进行原型设计的游乐场。

靴子

 

Dojo for bootstrap. 将Bootstrap组件与自定义Dojo模块相结合,从Modal Windows到旋转板到按钮的所有内容。

Dojo for bootstrap.

 

Bootsnip.p表单建设者 是使用拖放组件的表单构建器。

Bootsnip.表格建设者

 

Bootsnip.按钮建设者 是一个易于使用的按钮构建器,可让您自定义输出,按钮文本,颜色,大小和图标。

Bootsnip.按钮建设者

 

棘轮 是一种使用HTML,CSS和JavaScript组件构建移动应用程序的工具。

棘轮

 

Bootbundle. 是一组主题,代码段和Bootstrap的组件。

Bootbundle..

 

Bootswatch.r. 是一个可视主题创建者,用于从头开始构建引导主题。

Bootswatch.r.

 

反应引导 是流行前端框架的引导 - 构建。

反应

 

Brix.io. 是用于Bootstrap的接口构建器。它’S基于云,易于使用,并提供实时协作。

Brix.io..

 

一些伟大的引导项目

在引导中已经运行了大量的网站。下面的那些展示了Bootstrap可能有多少多样性。

Lexigrams.

Lexigrams.

 

Babysitmydog..com.

Babysitmydog.

 

EasyGenerator.

EasyGenerator.

 

手机

手机

 

非洲股权基金

余烬

 

Webxtrap.

Webxtrap.

 

保罗五

保罗五

 

高辊有趣的赌场

高辊

 

vansh.

vansh.

 

Noel Hanna.

Noel Hanna.

 

Prusik.

Prusik..

 

臀部广告

臀部广告

 

洗衣日

洗衣日

 

过滤冲浪板制造学院

筛选

 

精简

精简

 

厨房

厨房

 

DSTLD.

DSTLD..

 

NAS Ferias.

NAS Ferias.

 

vertty.

vertty.

 

蒙特雷

蒙特雷

 

德里大厦

德里大厦

 

广场经典电影节

广场经典电影节

 

1BITE2GO.

1BITE2GO.

 

防暴设计

防暴设计

 

Codiqa.

Codiqa..

 

肖恩·哈普林

肖恩·哈普林

 

简单

简单

 

mag

mag

 

制作类型

制作类型

 

超现实主义者

超现实主义者

 

点头

点头

 

Markt.

Markt.

 

启动土耳其

启动土耳其

 

Felix Morelo

Felix Morelo

 

快乐的创业学校

快乐的创业学校

 

怪物

怪物

 

荷兰国家歌剧院& Ballet

荷兰国民

 

DAGOBERT RENOUF.

DAGOBERT RENOUF.

 

滚动的石头

滚动的石头

 

结论

Bootstrap只是建立响应,移动式第一网站的众多可用框架之一,具有HTML,CSS和JavaScript。与其他框架相比,花点时间学习启动可以做什么(以及您对此感到舒服),并选择最适合您的特定项目的框架。和唐’禁止为不同的项目选择不同的框架!