了解有关Bootstrap的信息:开始开发响应式网站

披露: 您的支持有助于保持网站的正常运行!我们会为此页面上推荐的某些服务收取推荐费.


本指南将向您介绍Bootstrap,它是流行的网站开源前端框架。继续阅读以获取简介和简要历史记录,或者使用右侧的导航跳转到您要查找的Bootstrap资源。.

从版本2开始,Bootstrap集成了响应式Web设计(RWD)组件,使其成为使用CSS媒体查询在不同设备之间共享的单一代​​码库来扩展网站的出色工具。.

Bootstrap是开源的,它在GitHub上托管,开发和维护。目前,它是GitHub上最受瞩目的项目。让我们找出原因.

什么是引导程序?

Bootstrap开发是由Twitter的Mark Otto和Jacob Thornton发起的,旨在开发内部工具,这是一个鼓励在Twitter内部工具之间保持一致性的新框架。.

在开发的这些早期阶段,Bootstrap最初被称为“ Twitter蓝图”。新框架迅速成熟,并于2011年8月19日作为开源项目发布。.

Bootstrap核心团队正在继续开发,最新版本是Bootstrap 3,该版本于2013年8月发布.

Bootstrap是一个免费的开源HTML,CSS和JS框架,其中包含文本,表单,按钮,导航和其他相关界面组件的模板.

作为前端框架,Bootstrap是用户的接口,与驻留在后端服务器上的服务器端代码不同。通过使用RWD组件,Bootstrap可以自动使网页适应各种设备上的不同屏幕尺寸和像素密度.

借助Bootstrap,Web开发人员可以专注于实际开发,而不必担心设计,并且可以快速启动并运行美观的网站.

Bootstrap可以用于从ASP.NET到PHP到Ruby on Rails的任何开发环境或编辑器,以及任何服务器端技术和语言。.

自2015年8月起,正式的Bootstrap主题即可通过一次付款购买,并可以免费使用多用途许可证进行更新.

Bootstrap拥有Twitter的版权,但已根据MIT许可发布,允许您出于私人和商业目的使用和修改Bootstrap或其组件。.

引导功能

Bootstrap与最新版本的Google Chrome,Mozilla Firefox,Internet Explorer,Opera和Safari浏览器兼容。并非所有平台都支持某些浏览器.

Bootstrap包含为所有主要HTML组件提供基本样式定义的样式表,可轻松自定义网站外观.

Bootstrap的主要功能之一是其流体网格系统,该系统可以根据屏幕尺寸从移动设备到台式机屏幕尺寸以及介于两者之间的所有内容(纵向和横向)扩展至12列.

该网格系统创建了动态页面的基本构建块.

Bootstrap还具有许多其他常见的界面元素,包括具有高级功能的按钮,标签,列表,缩略图,警告消息,进度条,以及多个JavaScript组件,例如对话框,轮播,工具提示,警报,按钮等。.

其中一些组件扩展了现有界面元素的功能,例如,为输入字段添加自动完成功能.

使用Bootstrap的好处

在过去的几年中,Bootstrap已成为越来越流行的前端框架,数以百万计的网站正在使用它.

根据Bootstrapbay的Christopher Gimmer的说法,使用Bootstrap的五个主要理由.

第一, Bootstrap加快了开发速度. Bootstrap的主要优点之一是开发速度惊人.

借助Bootstrap,您可以使用现成的代码块,并结合框架的跨浏览器兼容性,可以快速开发网站。使用现成的Bootstrap主题并对其进行修改以适合您的需求可以节省更多时间.

其次, Bootstrap生成响应迅速,可移动的网站.

随着移动设备受欢迎程度的不断提高以及对全球移动数据流量增长的乐观预测,拥有一个可以在外形尺寸迥异的设备上运行的响应式网站变得非常重要.

借助Bootstrap的内置RWD组件和可根据设备的屏幕分辨率动态调整的流畅网格布局,创建响应式网站无需开发人员进行额外的工作。.

第三, 使用Bootstrap确保一致性.

Bootstrap最初是为了鼓励一致性而开发的。 Bootstrap可以确保一致性,无论谁在从事项目工作。此外,结果在各个平台上是一致的,因此在不同的Web浏览器上输出保持不变.

第四, Bootstrap易于定制.

Bootstrap可以根据特定项目的不同需求进行定制。开发人员可以使用Bootstrap自定义页面选择所需的功能,并仅在Bootstrap的自定义版本中下载这些功能,从而在此过程中使代码更精简.

第五, 良好的支持.

由于社区的规模和Bootstrap的受欢迎程度,人们的支持往往会很好。 Bootstrap核心团队也擅长发布及时的更新,并且开发工作是持续不断的。鉴于其受欢迎程度,我们预计这种情况不会很快改变.

Bootstrap入门

如果您准备开始学习如何使用Bootstrap,但您还不熟悉HTML和CSS,那么学习Bootstrap的第一步就是学习HTML和CSS的基础知识.

基本上,需要在HTML文件的开头部分引用Bootstrap CSS。 JavaScript文件在HTML文件的主体部分的末尾被调用。这个基本的HTML结构称为Bootstrap模板.

使用Bootstrap归结为将其CSS类和JavaScript应用于HTML元素,因此您需要掌握CSS和HTML。幸运的是,对于认真的开发人员而言,这将不是问题.

引导程序开发环境

下载并解压缩Bootstrap的预编译版本后,您将获得Bootstrap文件结构,这非常简单。 Bootstrap文件位于以下三个目录中:css,js和fonts.

这种文件结构是不言自明的,并且很容易包含在任何Web项目中。除了现成的CSS和JS文件,Glyphicons字体还包括可选的默认Bootstrap主题.

在开始使用Bootstrap之前,您必须将其集成到开发环境中。可以在线找到各种平台的详细说明,因此将Bootstrap添加到您的开发环境中非常容易.

引导资源

由于它的受欢迎程度,您可以在网上找到大量优质的Bootstrap学习资源,这应该没有问题。社区正在蓬勃发展,并且定期发布新资源.

但是,由于Bootstrap是一个相对较年轻的框架,因此您不会发现很多平装本。大多数Bootstrap资源都是在线发布的,因此不要期望在您当地的书店中找到任何资源.

GitHub是开始搜索Bootstrap资源的好地方。此外,您可以找到由各个开发人员和软件公司发布的大量Bootstrap指南和教程。它们的质量可能会有所不同,因此请确保在选择一项之前先检查社区反馈.

免费互动课程

阅读有关软件和框架的信息可以向您展示基本的使用模型和规则,但是要真正了解框架的性能,您必须将其付诸实践.

免费的在线互动课程是让您真正了解框架如何执行以及可以做什么的最佳方式.

这些课程提供在线编译器,因此您可以立即执行和查看示例:

  • 在Codecademy教程中查看Bootstrap的基础知识。这是一个简短的初学者教程,它将指导您完成基本的HTML,CSS以及将Bootstrap添加到您的网站。本教程将通过在线编译器向您展示Bootstrap的基本语法.
  • 《 W3Schools Bootstrap 3教程》是一个详尽且详尽的分步指南,其中包含所有CSS类,组件和JavaScript插件的完整Bootstrap参考。.
  • Tutorialspoint Bootstrap教程非常详细,涵盖了有关Bootstrap的几乎所有知识,包括Bootstrap CSS,布局组件,插件,演示和有用的资源。该Bootstrap教程还提供了在线编译器,也可以通过PDF下载获得.

这些交互式课程应该使您对Bootstrap有足够的了解,从而可以在项目中轻松使用它。.

Bootstrap演示和其他资源

由于Bootstrap如此流行且被广泛使用,因此要挑选出一些网站来展示其功能和功能并不容易,.

这就是为什么我们将选择权留给Bootstrap核心团队,并为您带来他们的官方Bootstrap Expo以及美丽而令人振奋的Bootstrap示例的原因.

打开示例并更改浏览器窗口的大小,以查看正在使用的Bootstrap的RWD功能,从而使页面布局动态适应不同的屏幕尺寸.

如果您准备开始使用Bootstrap,并且需要更多有用的项目资源,请查看以下内容:

  • Bootstrap创作者的Bootstrap官方主题
  • 具有高级商业Bootstrap主题和模板的市场:creativemarket.com,wrapbootstrap.com,themeforest.net
  • 免费的Bootstrap模板和主题:startbootstrap.com,shapebootstrap.net,bootstrapzero.com.

当然,在线上还有许多其他的Bootstrap资源,社区会定期提供新资源,因此,找到所需的东西应该不是问题.

电子书和平装本

Bootstrap有很多可用的在线资源,但是如果您喜欢一本书或一本电子书,则选择是有限的.

但是,由于有这么多免费的在线教程和资源,也许最好先尝试其中一些免费赠品。掌握它们后,您可以考虑购买几本书.

如果您更喜欢实物课本和书籍,那么以下是一些当今可用的Bootstrap课本:

  • 循序渐进的Bootstrap 3:Riwanto Megosinarso撰写的使用Bootstrap 3进行响应式Web开发的快速指南是面向初学者的真正循序渐进指南。如果您是Bootstrap的新手,并且如果它足够入门,建议您这样做。.
  • Syed Fazle Rahman撰写的Jump Start Bootstrap非常适合初学者和中级开发人员,涵盖了您需要在网站上实现Bootstrap的所有内容.
  • David Cochran和Ian Whitley撰写的Bootstrap网站蓝图是为初学者到中级前端开发人员编写的。很好地涵盖了自定义Bootstrap组件和布局.

Kindle的电子书形式都可以使用这三种格式.

重要连结

  • 引导程序
  • GitHub上的Bootstrap.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map