bootstrap 响应式_Bootstrap-响应式Web设计框架

最新推荐文章于 2024-05-25 09:49:12 发布

cumt30111

最新推荐文章于 2024-05-25 09:49:12 发布

阅读量1.1k

点赞数

文章标签： java python web css html

原文链接：https://www.includehelp.com/html/bootstrap-framework-for-responsive-web-design.aspx

版权

bootstrap 响应式

引导程序 (Bootstrap )

Bootstrap - a framework for responsive web design: Web development is on hype and boom these days. And, a web developer has sought out everywhere in the IT industry. Each firm, every company needs a web portal/Website to present their interface to customers. HTML5, CSS3, Javascript are commonly used front-end tools. Then, why Bootstrap? It is not an alien tool. It is just a CSS framework designed to help developers create responsive designs. Another similar framework is W3.css. It is also a CSS framework developed by W3Schools. But, Bootstrap is easy to implement, plus it has proper documentation provided on its official website. So, let’s get ready to dive into this amazing tutorial series. Stay connected to read more interesting articles and “learn by doing”. Feel Free to ask your doubts in the comment section!

Bootstrap-用于响应式Web设计的框架 ：如今，Web开发正大肆宣传。并且，Web开发人员已经在IT行业中寻找了无处不在的地方。每个公司，每个公司都需要一个Web门户/网站向客户展示其界面。 HTML5，CSS3，Javascript是常用的前端工具。那么，为什么要使用Bootstrap？它不是外来工具。它只是一个CSS框架，旨在帮助开发人员创建响应式设计。另一个类似的框架是W3.css 。它也是W3Schools开发CSS框架。但是，Bootstrap易于实现，并且在其官方网站上提供了适当的文档 。因此，让我们准备好进入这个惊人的教程系列。保持联系以阅读更多有趣的文章和“边做边学”。随时在评论部分提出您的疑问！

引导介绍 (Introduction to Bootstrap)

Bootstrap is a front-end framework for developing responsive and mobile friendly websites. It contains various inbuilt CSS classes. By using this, we can build fascinating web design. It contains a various pre-defined function that can be used to generate very useful effects.

Bootstrap是用于开发响应式和移动友好型网站的前端框架。它包含各种内置CSS类。通过使用它，我们可以构建引人入胜的网页设计。它包含各种预定义的功能，可用于生成非常有用的效果。

How to use it?

如何使用它？

It can come handy in use by two ways:

它可以通过两种方式方便使用：

By using local file - You can download bootstrap from here: https://getbootstrap.com/
通过使用本地文件 -您可以从此处下载引导程序： https ： //getbootstrap.com/
By using CDN (content delivery network) - Include/download and host bootstrap CDN.
通过使用CDN(内容交付网络) -包含/下载和主机引导CDN。

In this article, we are going to introduce you to bootstrap, its features, and its version history. We will cover its environment setup in next article: How to set up Bootstrap environment?.

在本文中，我们将向您介绍引导程序，其功能和版本历史记录。我们将在下一篇文章中介绍其环境设置：如何设置Bootstrap环境？。

We often used HTML to design static WebPages and CSS to style it. CSS requires lots of efforts and code to make it stylish, but it looks crappy in the mobile view. To resolve all these problems, Bootstrap was introduced. It allows web pages to fit the device screen accordingly with the same design and less code. Bootstrap was first developed by “Mark Otto” and “Jacob Thornton” at Twitter. After that, it was released in August 2011 at open source on GitHub. It uses HTML, CSS, and JavaScript for its components. It allows the content of the webpage to adjust dynamically according to the device used such as mobile, desktop or tablet. Most companies like Twitter, GitHub, Medium, and others use bootstrap for front-end design.

我们经常使用HTML设计静态WebPage ，使用CSS设置样式。 CSS需要付出大量的努力和代码才能使其变得时尚，但在移动视图中看起来却很糟糕。为了解决所有这些问题，引入了Bootstrap。它允许网页以相同的设计和更少的代码相应地适合设备屏幕 。 Bootstrap由“ Mark Otto”和“ Jacob Thornton”在Twitter上首次开发。之后，它于2011年8月在GitHub的开源上发布。它使用HTML，CSS和JavaScript作为其组件。它允许网页的内容根据所使用的设备(例如移动设备，台式机或平板电脑)动态调整。 Twitter，GitHub，Medium等大多数公司都使用引导程序进行前端设计。

Here, is an example showing it. Well, this is a more simple illustration image for naïve beginners. We’ll see more fun and advanced front-ends throughout this article series.

这里是一个显示它的示例。好吧，对于初学者来说，这是一个更简单的插图图像。在本系列文章中，我们将看到更多有趣和高级的前端。

Desktop view:

桌面视图：

Mobile view:

移动视图：

特征 (Features)

It is faster and easier.
它更快，更容易。
It is open source.
它是开源的。
It has pre-defined classes and components which are easy to use and customize.
它具有易于使用和自定义的预定义类和组件。
It is mobile friendly.
它是移动友好的。
It supports almost every web browsers including Chrome, Firefox, Opera, Safari etc.
它支持几乎所有的Web浏览器，包括Chrome，Firefox，Opera，Safari等。
Anybody with prior knowledge of HTML and CSS can easily use it.
任何具有HTML和CSS知识的人都可以轻松使用它。

版本记录 (Version History)

Bootstrap 2 was released On January 31, 2012, which added a twelve-column responsive grid layout system.
Bootstrap 2于2012年1月31日发布，其中增加了一个十二列的响应式网格布局系统。
On August 19, 2013, Bootstrap 3 was released, focusing on flat design, and a mobile friendly approach.
2013年8月19日，发布了Bootstrap 3，其重点是平面设计和移动友好型方法。
On October 29, 2014, Bootstrap 4 was announced.
2014年10月29日，发布了Bootstrap 4。
The first alpha version of Bootstrap 4 was released on August 19, 2015 and first beta version was released on 10 August 2017.
Bootstrap 4的第一个alpha版本于2015年8月19日发布，而第一个beta版本于2017年8月10日发布。
The stable version of Bootstrap 4 was released on January 18, 2018 with enhanced print styles, border utilities and new responsive classes were added.
Bootstrap 4的稳定版本于2018年1月18日发布，具有增强的打印样式，边框实用程序和新的响应类。
Bootstrap 4 also offers few official themes to get started with readymade templates. But, you will need to pay a bit for that.
Bootstrap 4还提供了一些正式主题来开始使用现成的模板。但是，您将需要为此付出一些。

社区 (Community)

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

掌握最新的Bootstrap开发信息，并通过这些有用的资源与社区联系。

Follow @getbootstrap on Twitter.
在Twitter上关注@getbootstrap 。
Read and subscribe to The Official Bootstrap Blog.
阅读并订阅The Official Bootstrap Blog 。
Join the official Slack room.
加入官方的Slack会议室。
Implementation help may be found at Stack Overflow (tagged bootstrap-4).
在堆栈溢出(标记为bootstrap-4 )上可以找到实现帮助。

Conclusion:

结论：

Thus far, we have known about a very useful and interesting front-end designing framework, Bootstrap. We will look into its setup, and implement it to create responsively and in demand websites in upcoming articles. If you are really interested to know more about Bootstrap by now; visit its official website or GitHub repository. Links are provided in this article itself. Don’t forget to visit us back for interesting, and intuitive articles. Let’s have fun and learn together. See you in the next article! Happy Learning!

到目前为止，我们已经知道了一个非常有用且有趣的前端设计框架Bootstrap。在接下来的文章中，我们将研究它的设置，并实施它以响应性和按需创建网站。如果您现在真的有兴趣了解有关Bootstrap的更多信息，请访问：访问其官方网站或GitHub存储库。本文本身提供了链接。不要忘记访问我们，返回有趣而直观的文章。让我们玩得开心，一起学习。下篇再见！ 学习愉快！

翻译自: https://www.includehelp.com/html/bootstrap-framework-for-responsive-web-design.aspx