通过建设与引导,您可以检查拉斯维加斯t item off your list. Bootstrap is an open-source framework for quickly building responsive websites and mobile-first web projects. Because it offers a collection of reusable code, you won’t have to build a site from scratch.
了解为什么要结束21 million websites on the internet use Bootstrap，让我们仔细看看它是什么。
What is Bootstrap CSS?
由于Bootstrap使创建响应式网站变得更加容易，更快，因此特别吸引了许多前端开发人员和初学者。但是，所有人都不建议这样做。在下面，我们将研究为什么Bootstrap如此受欢迎以及何时理想使用 - 并且何时不理想。
Bootstrap is the go-to toolkit for many front-end developers. According toW3Techs, it's used by 22.1% of all websites on the internet.
There are a few factors driving Bootstrap’s popularity. First and foremost, it’s open-source and therefore free to download and use. It’s also fully customizable, and compatible with all modern browsers. This is true of many CSS frameworks, however.
What sets Bootstrap apart from other development toolkits is that it was developed mobile-first. Meaning, the code was optimized for mobile devices (i.e. the smallest screen size) first and then scaled up to display on larger screens. As a result, building with Bootstrap CSS ensures that your site supports proper rendering and touch zooming for all devices.
When to Use Bootstrap
There are many reasons to use Bootstrap. We’ve discussed some above but let’s take a closer look at these reasons below.
1. You want a responsive website.
Building a responsive site is much easier using Bootstrap than doing so from scratch. Bootstrap comes with responsive styles, like containers and media queries, to ensure your site adjusts to the viewport. That means you don’t have to worry about whether your visitors are using desktops, tablets, or mobile devices.
You can build your site quickly with Bootstrap. Once you download the framework, you can get started with a basic template and then add the components you need. These components are fundamental HTML elements, like tables, forms, buttons, images, and icons, that are styled with a base class and extended with modifier classes. Using these pre-designed components significantly limits the amount of custom CSS you have to write.
Consider引导按钮for example. The base class .btn is used for all the common styles you want for your buttons, like display, padding, border-width. With this class, you don’t have to keep repeating these CSS properties in your stylesheet to format every single button you add.
Modifier classes, like .btn-primary on the other hand, are used to add the more specific styles you want for your buttons, like color, background-color, and border-color of your buttons. This is just one example of how using Bootstrap components is much faster than coding them from scratch.
尽管Bootstrap确实简化了构建站点的过程，但您必须熟悉HTML和CSS才能使用该框架。例如，了解CSS box modelwill be important when using the container class and building your first Bootstrap grid.
The good news is you’ll only need a编码的基本知识开始。
4. You have multiple people building out your site.
如果您有多个在网站上工作的合作者，那么一致性很重要。您不希望主页上的按钮看起来与着陆页上的按钮不同，或者使用其他按钮website typographyon your blog than anywhere else on your site — and so on. Using Bootstrap and its default settings, utility classes, and component elements can help ensure the front end of your site looks consistent.
5. You want to be part of a community.
Since Bootstrap is open source, it has a global community of developers and designers dedicated to supporting the framework. These developers and designers modify and enhance Bootstrap's codebase onGitHub。They also answer questions on推特,Stack Overflow，在dedicated Slack room。使用Bootstrap时，您可以利用这个活跃的社区成为更好的引导用户。
When Not to Use Bootstrap
While there are many benefits of using this CSS framework, there are some reasons不是也使用引导程序。让我们仔细研究以下这些原因。
Since Bootstrap comes with pre-styled content, components, and templates, Bootstrap sites tend to look the same out-of-the-box. In fact, Bootstrap has been blamed forwhy websites today all look the same。
2.You want a theme.
Bootstrap框架不是主题 - 尽管有Bootstrap主题可用。让我们将框架与WordPress theme， 例如。
当你install and activate a WordPress theme, it changes your entire site’s appearance. When you download the Bootstrap framework, aspects of your site’s appearance will change automatically, like the typography. But you still have to write the HTML and plug in the preset layouts, colors, and components you need to make up your website.
引导程序可能会对网站的速度产生负面影响。为什么？因为它很重 - 不是KB，而是按照普通用户的数量而言没有利用。
Bootstrap is considered an easy-to-use platform. It offers extensive documentation for every part of its framework, from its layout to content to components and more. That means virtually anyone can learn Bootstrap — it also means it will take time to read through the documentation and learn the framework. If you are looking to build a website as quickly as possible, then Bootstrap might not be as ideal as other solutions, like网站建设者。
Using the pre-designed components and templates that Bootstrap provides makes it much easier and faster to build a website — but it can also stunt your growth as a coder. Creating with Bootstrap is like using a calculator to do algebra: you can end up with the result you want without totally understanding how you got it. That's why it's good to spend time creating your own custom components, even if you also learn and use Bootstrap.
How to Download Bootstrap CSS
Before we walk through the process of downloading Bootstrap, it’s important to note that you can load Bootstrap remotely viaBootstrapcdnorjsdelivrinstead of downloading it. This will require visitors to have an internet connection to visit your site and will require you to post more code, however. As a result, downloading Bootstrap is the more popular choice.
有两种不同形式的bootstrapavailable for download。每个版本（预编译和源代码版本）会根据其优先使用易用性还是灵活性来吸引不同用户。让我们仔细看看下面的每个人。
Once downloaded, you’ll unzip the compressed folder and see the following structure.
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
Using the compiled version is easier and faster to use than the source code version — but it’s more difficult tocustomize。您要对预先使用的元素或布局进行的任何更改都必须在当前样式上覆盖。
If you want to customize the CSS and JS files included in Bootstrap as you please, then you’ll be better off downloading the source code version.
The source code version includes the precompiled CSS, JS, and font assets as well as source files for the CSS, JS, and icon fonts respectively.
If you choose to download the Bootstrap source code, then you’ll unzip the folder and see the following structure.
│ ├── css/
│ └── examples/
DIST/文件夹包含上面预编译部分中列出的所有内容。文档/文件夹包含Bootstrap文档的源代码以及Bootstrap使用的示例。JS/文件夹包含Bootstrap JS的源代码和Bootstrap CSS的SCS/文件夹。
由于此版本的Bootstrap要求您拥有AutopReFixerand a SASS compiler, the set-up process is longer and more difficult than setting up the pre-compiled version. Once set up, however, you can change and customize the files any way you want.
Loading Bootstrap CSS and JS
First, create a folder on your computer called “bootstrap.” Move the compiled CSS files from your Bootstrap download into that folder. If you are also using the JS part of Bootstrap, move the compiled JS files into the folder as well.
Below is an example of an HTML page coded from scratch.
Bootstrap Tutorial Sample Page