bootstrap使用技巧_通过以下10条实用技巧快速学习Bootstrap

bootstrap使用技巧

If you don’t already know, you must be wondering what responsive websites are? In simple terms, the responsiveness of a website means that when the size of the screen on which the website is being seen changes, the layout of the website responds to that and change. This makes the websites look good no matter what screen size it is being viewed on.

如果您还不知道，您一定想知道什么是响应式网站？ 简而言之，网站的响应能力意味着当查看网站的屏幕大小发生变化时，网站的布局会对此做出响应并发生变化。 无论使用何种屏幕尺寸浏览，这都使网站看起来不错。

Bootstrap如何工作？ (How does Bootstrap work?)

There are two ways you can use Bootstrap. You can either import the Bootstrap into your code or you can download a sample Bootstrap project and build your website on that.

有两种方法可以使用Bootstrap。 您可以将Bootstrap导入代码中，也可以下载示例Bootstrap项目并在其上构建网站。

Bootstrap uses a 12-column model for website display, which is called a Bootstrap grid. On this grid, you can define different breakpoints to layout different components like headings, paragraphs, and buttons to make your website look visually appealing. When the screen size scales down, the components on the grid change layout to fit the smaller screen. This means that viewing the same website looks great on a normal size screen of your laptop and a smaller screen of your smartphone.

Bootstrap使用12列模型进行网站显示，这称为Bootstrap网格。 在此网格上，您可以定义不同的断点以布局不同的组件，例如标题，段落和按钮，以使您的网站看起来更具吸引力。 当屏幕尺寸缩小时，网格上的组件会更改布局以适合较小的屏幕。 这意味着在笔记本电脑的普通尺寸屏幕和智能手机的较小屏幕上，浏览同一网站看起来很棒。

Bootstrap has become one of the most popular front-end development frameworks today. If you are a beginner who wants to start learning Bootstrap then you are on the right blog. Because here are the top 10 tips to learn and master Bootstrap!

Bootstrap已成为当今最受欢迎的前端开发框架之一。 如果您是想开始学习Bootstrap的初学者，那么您来对地方了。 因为这里是学习和掌握Bootstrap的十大技巧！

掌握Bootstrap技能的10种方法： (10 Ways you can master your Bootstrap skills:)

1.首先研究Bootstrap文档 (1. Do Your Research on Bootstrap Documentation First)

It is always a great step to carry out preliminary research on the thing that you want to use. You should learn about Bootstrap and how it works before you jumpstart to using it. Understand the ways it can be imported in your written code or how you can build a sample Bootstrap project.

对您要使用的东西进行初步研究总是非常好的一步。 在开始使用它之前，您应该了解Bootstrap及其工作方式。 了解如何将其导入您的书面代码中或如何构建示例Bootstrap项目。

All the information regarding Bootstrap documentation is available on their website. For most things, Bootstrap has prewritten code available which you need to research before you begin writing your own version.

有关Bootstrap文档的所有信息都可以在其网站上找到。 对于大多数事情，Bootstrap具有可用的预编写代码，在开始编写自己的版本之前，需要研究这些代码。

2.具备JavaScript，CSS和HTML的先验知识 (2. Have Prior Knowledge of JavaScript, CSS and HTML)

JavaScript, CSS, and HTML are front-end languages that are used by Bootstrap. To use the Bootstrap framework it is essential for you to be fluent in these languages and know what development software, such as IDE, to use with them.

JavaScript，CSS和HTML是Bootstrap使用的前端语言。 要使用Bootstrap框架，必须精通这些语言并知道与它们一起使用哪种开发软件(例如IDE)至关重要。

It is not difficult to learn and JavaScript, CSS and HTML and there are a number of online resources available for you. There are also guides available to choose the best IDEs for these languages. For example, here is a list of Top 20 Best IDE For Web Development In 2019. With a little bit of help, you can improve your skills in front-end languages and using Bootstrap will become a piece of cake for you!

学习JavaScript，CSS和HTML并不难，有许多在线资源可供您使用。 也有指南为这些语言选择最佳的IDE。 例如，这是2019年Web开发的20个最佳IDE的列表。在一点点帮助下，您可以提高前端语言的技能，使用Bootstrap将对您而言是小菜一碟！

3.安装要使用的最新版本的Bootstrap (3. Install the Latest Version of Bootstrap to Use)

With the web development game improving constantly, the framework and tools have also evolved. Bootstrap has also come out with multiple versions, the latest one being Bootstrap version 4.3 with significant updates. These include a 5-tier grid system, 16px Global Font Size, set of new utility classes and more features for creating a responsive design. So make sure you install the most recent version of Bootstrap to make use of the latest added and updated features.

随着Web开发游戏的不断改进，框架和工具也不断发展。 Bootstrap还提供了多个版本，最新的一个是具有重大更新的Bootstrap 4.3版。 其中包括5层网格系统，16像素全局字体大小，一组新的实用程序类以及用于创建响应式设计的更多功能。 因此，请确保安装最新版本的Bootstrap以利用最新添加和更新的功能。

4.使用在线资源学习Bootstrap (4. Use Online Resources to Learn Bootstrap)

Internet is your best friend if you want to learn Bootstrap on your own. There are a number of online courses, tutorials, guides, blogs and examples for you to learn from. There are two types of online courses, ones that are free and the paid ones. They are either comprehensive long-hour courses covering all the concepts and features of Bootstrap or they can be shorter and quick tutorials for specific features and components.

如果您想自己学习Bootstrap，则Internet是您最好的朋友。 有许多在线课程，教程，指南，博客和示例供您学习。 在线课程有两种，一种是免费的，另一种是付费的。 它们是涵盖了Bootstrap的所有概念和功能的综合性长时间课程，也可以是针对特定功能和组件的简短快速教程。

Another great online resource for learning Bootstrap is the community of Bootstrap users. Connect and interact with people who already use the Bootstrap framework and learn from their experiences. You can find them at Bootstrap blogs or online web development communities on social media.

用于学习Bootstrap的另一个不错的在线资源是Bootstrap用户社区。 与已经使用Bootstrap框架并从他们的经验中学习的人们建立联系并进行互动。 您可以在Bootstrap博客或社交媒体上的在线Web开发社区中找到它们。

Starting with an online course will help answer all your questions regarding Bootstrap and can help you become a pro in using the framework in no time. So, look for helpful resources and courses and get started.

从在线课程开始，将帮助您回答有关Bootstrap的所有问题，并可以帮助您立即成为使用该框架的专家。 因此，寻找有用的资源和课程并开始使用。

5.练习使您变得完美！ (5. Practice Makes You Perfect!)

Another great tip to master your Bootstrap skills is to practice using it as much as you can. Put the framework to test by experimenting building an actual website and learn along the way. Using your knowledge of CSS, HTML and JavaScript, try building a website from nothing by putting a layout together. While doing this, you will make mistakes along the way but you will also learn a great deal from them. Once you improve your skills in creating a basic layout of a website with Bootstrap, you can go ahead and customize it to make it look fancy and advanced.

掌握Bootstrap技能的另一个重要技巧是尽可能多地练习使用它。 通过尝试构建一个实际的网站并逐步学习来测试该框架。 利用您对CSS，HTML和JavaScript的了解，尝试通过将布局放在一起，从零开始构建网站。 在执行此操作时，您将一路出错，但也会从中学习很多东西。 一旦您提高了使用Bootstrap创建网站的基本布局的技能，就可以继续对其进行自定义，使其看起来更高级。

6.请参阅参考指南 (6. Refer to Reference Guides)

For every front-end language that Bootstrap uses, there are reference guides available regarding syntax, concepts, and all the other relevant information. The language guides for HTML, JavaScript and CSS can be found online easily. A great example of this is the Modzilla Development guides. They provide an index of quick information about properties, syntax, elements and their description.

对于Bootstrap使用的每种前端语言，都有关于语法，概念和所有其他相关信息的参考指南。 可轻松在线找到HTML，JavaScript和CSS的语言指南。 Modzilla开发指南就是一个很好的例子。 它们提供了有关属性，语法，元素及其描述的快速信息索引。

Reference Guides will be a great help for you when you come across problems with your code such as difficult syntax etc.

当您遇到代码问题(例如语法困难)时，参考指南将为您提供很大的帮助。

7.插件是良好网站设计的关键 (7. Plugins Are Key to a Good Website Design)

Including plugins on your website is a great front-end development technique. Bootstrap offers multiple plugins written in JavaScript that you can use in your website design easily without writing a single line of code.

在您的网站上包含插件是一种很棒的前端开发技术。 Bootstrap提供了多个用JavaScript编写的插件，您可以轻松在网站设计中使用它们，而无需编写任何代码。

There are online plugin libraries that you can find on the internet, some of them are official Bootstrap plugin libraries, while some are unofficial ones. Either way, using plugins for form, menu and navigation, tables, buttons and notifications can make your website look outstanding. So, do your research on different plugins and experiment with them.

您可以在网上找到一些在线插件库，其中一些是官方的Bootstrap插件库，而有些则是非官方的。 无论哪种方式，使用用于表单，菜单和导航，表格，按钮和通知的插件都可以使您的网站看起来出色。 因此，请对不同的插件进行研究并尝试使用它们。

8.将方法重点放在组件上 (8. Focus Your Approach on Components)

When designing a web application using Bootstrap, it is ideal to have an approach focused on components instead of pages. So what does this mean? It simply means, instead of being focused on creating CSS and HTML for every page, you should think more about each component on the page. Such a mindset will help you develop reusable components, that can be used across multiple pages, making your coding process simpler and more efficient.

使用Bootstrap设计Web应用程序时，理想的方法是专注于组件而不是页面。 那么这是什么意思？ 这只是意味着，您应该专注于页面上的每个组件，而不是专注于为每个页面创建CSS和HTML。 这样的心态将帮助您开发可在多个页面上使用的可重用组件，从而使您的编码过程更简单，更高效。

This approach can be particularly helpful in the development of a large website, where using components across all the pages can be time-efficient and above all, it can bring consistency in the overall website design.

这种方法在大型网站的开发中尤其有用，在大型网站上使用所有页面上的组件可以节省时间，最重要的是，它可以使整个网站设计保持一致。

9.专注于移动友好 (9. Focus on Mobile-Friendliness)

It is a common practice in front-end development of web applications to focus your design on mobiles. In fact, it is the key to developing responsive websites. This approach is called “Mobile First approach”.

在Web应用程序的前端开发中，将设计重点放在移动设备上是一种常见做法。 实际上，这是开发响应式网站的关键。 这种方法称为“移动优先”方法。

Since mobile design has more restrictions, it is always ideal, to begin with designing your website keeping in mind the mobile. You can then expand its features for normal size desktop version or tablet version which have lesser restrictions. So, to make using Bootstrap easy for yourself, build websites for mobile devices first and then expand the design.

由于移动设计有更多限制，因此从设计移动网站开始就始终是理想的选择。 然后，您可以将其功能扩展到具有较小限制的普通大小的台式机版本或平板电脑版本。 因此，要使自己轻松使用Bootstrap，请先为移动设备构建网站，然后再扩展设计。

10.扩展Bootstrap和自定义 (10. Extend Bootstrap and Customize)

The last most important tip for using Bootstrap is to understand that using only Bootstrap can not be enough. Although, it offers a wide range of solutions only using them will make your website or application look similar to all the other websites. So, if you want to make your website stand out from the rest, then customize it.

使用Bootstrap的最后一个最重要的技巧是了解仅使用Bootstrap是不够的。 虽然，它提供了广泛的解决方案，但只有使用它们，才能使您的网站或应用程序看起来与所有其他网站相似。 因此，如果您想使您的网站脱颖而出，请对其进行自定义。

You can use Bootstrap to build a base for your web application, and add more classes on top of it as per your requirements. You can also create a customized Bootstrap version for your site to make it look unique. Bootstrap’s website offers all the information about customisation and what options it supports. So do check it out and don’t be afraid to customize.

您可以使用Bootstrap为您的Web应用程序构建基础，并根据需要在其之上添加更多类。 您还可以为您的站点创建自定义的Bootstrap版本，以使其看起来唯一。 Bootstrap的网站提供了有关自定义及其支持的所有选项的所有信息。 因此，请务必检查一下，不要害怕自定义。

So, there you have it! These are the best tips for anyone who wants to use Bootstrap. I hope they will help you become a pro and master your Bootstrap skills.

所以你有它！ 对于那些想使用Bootstrap的人来说，这些是最好的技巧。 希望他们能帮助您成为专业人士并掌握您的Bootstrap技能。

翻译自: https://habr.com/en/post/468733/

bootstrap使用技巧