Bootstrap CSS的最终指南

如果您要为您的企业创建网站，那么您可能会有一个很长的愿望清单。

您希望设计反映品牌的外观和感觉。您想拥有满足访客需求所需的功能，而无需预算。而且，您需要创建响应式布局，以显示按钮和表单等访问者使用的设备或浏览器的元素。

通过建设与引导,您可以检查拉斯维加斯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，让我们仔细看看它是什么。

尽管Bootstrap是一个开源工具包HTML，CSS和JavaScript，通常称为CSS框架。

To understand why, you must first understand that CSS is generally easier to learn for people at all levels of technical experience and is faster in browsers than JavaScript. For these reasons, Bootstrap developers wrote in CSS (andhtml) over JavaScript whenever possible. The CSS library included in Bootstrap is therefore much larger than the JavaScript library.

由于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.

Bootstrap如此受欢迎的另一个原因是它易于使用。它与模板捆绑在一起，用于排版，forms，按钮，下拉菜单，导航和其他接口组件。使用这些预制模板，您可以添加丰富的功能用户体验on your site without having to code them from scratch.

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.

2.你想保存time.

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.

3.您熟悉HTML和CSS。

尽管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不是也使用引导程序。让我们仔细研究以下这些原因。

1.您想要一个独特的网站。

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.

3.您想要一个快速加载的网站。

引导程序可能会对网站的速度产生负面影响。为什么？因为它很重 - 不是KB，而是按照普通用户的数量而言没有利用。

引导程序小于500kb。您还可以采取几个步骤来减轻体重并减轻其对加载时间的影响。例如，您可以使用缩小的CSS和JavaScript文件，也只能下载CSS文件，而不是JavaScript文件。

但是，即使有了这些步骤，Bootstrap仍然太重了，您需要的东西。大多数用户不需要Bootstrap随附的所有组件，实用程序和插件，因此即使不使用它们，它们也可能会在您的网站上权衡。

4.您没有时间学习和阅读Bootstrap文档。

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网站建设者。

5.您想掌握HTML和CSS。

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.

现在，我们了解了Bootstrap CSS是什么，以及谁应该使用它，让我们简要讨论您拥有的不同下载选项。

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。每个版本（预编译和源代码版本）会根据其优先使用易用性还是灵活性来吸引不同用户。让我们仔细看看下面的每个人。

预编译引导程序

预编译版本是Bootstrap的最基本形式。您将下载预编译的CSS和JS文件，并缩小CSS和JS文件，这些文件几乎在任何Web项目中都易于删除。

Once downloaded, you’ll unzip the compressed folder and see the following structure.

bootstrap/

├── css/

│ ├── bootstrap-grid.css

│ ├── bootstrap-grid.css.map

│├├前Bootstrap-grid.min.css

│├├前Bootstrap-grid.min.css.map

│ ├── bootstrap-reboot.css

Bootstrap-Reboot.css.map

│ ├── bootstrap-reboot.min.css

│├├─..bhbootstrap-reboot.min.css.map

Bootstrap.css

Bootstrap.css。map

│ ├── bootstrap.min.css

│ └── bootstrap.min.css.map

└── js/

├── bootstrap.bundle.js

├── bootstrap.bundle.js.map

├── bootstrap.bundle.min.js

├── bootstrap.bundle.min.js.map

├── bootstrap.js

├── bootstrap.js.map

├── bootstrap.min.js

└── bootstrap.min.js.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.

Bootstrap源代码

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.

bootstrap/

├── dist/

│ ├── css/

│└└站/ JS/

├── site/

│ └──docs/

│└└─-4.6/

│ └── examples/

├── js/

└─— scss/

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.

每个版本的Bootstrap都是不同用例的理想选择，但是由于预编译的Bootstrap更简单，更快，因此我们将重点介绍该版本的其余部分。

在下面，让我们看一下如何使用预编译的Bootstrap来构建网站。

让我们逐步分解此过程。

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.

In that same folder, create another file and call it index.html. Open this file with a text editor of your choice, like记事本++。您可以复制并粘贴basic HTML template on Bootstrap’s official site进入文件或从头开始编码。

Below is an example of an HTML page coded from scratch.

<头>





<身体>

You’re now ready to load Bootstrap CSS into your project. Simply add the following line of code into the header of the index.html file, right before the tag.

如果您打算仅使用Bootstrap的CSS部分，那么您都将设置。

如果您计划也使用JS部分，则需要添加另外两行代码。组件包括警报，切换按钮，轮播, and dropdowns require the use of JavaScript to function so continue these steps if you want to add any of these elements to your site.

首先，您需要加载jQuery库。为此，下载jQuery在您的计算机上。解压缩文件，并将其与编译的CSS和JS文件以及index.html文件一起保存在“ Bootstrap”文件夹中。

You’ll then add the following line of code in the index.html file. This time, you’ll add it to the footer, instead of the header, right after the tag.

要加载Bootstrap JavaScript，请在​​呼叫jQuery后立即添加以下代码行。

Once you’ve completed these steps, this is what your index.html file should look like:

<头>





<身体>

保存文件夹后，您将拥有一个看起来像这样的基本引导布局：

This can now function as the homepage of your site.

构建基本模板

To continue building this page, you can add a navigation bar, header, footer, glyphicon font,favicon, and other interface components. Let’s walk through adding one component — a navigation bar — step-by-step so you understand how to use Bootstrap.

Say you want toadd a Bootstrap navbarthat looks something like this to the homepage:

Now a prospect can arrive on your homepage and immediately find out more about your company, the features of your product, and your pricing — or they can search something else.

Below is the code for this Navbar example.

Let’s break this snippet down into its supported subcomponents: color scheme, brand, toggler, nav, and form.

Color Scheme

仔细研究一下第一行代码。看Navbar-Dark BG-Dark？That calls for a dark background color. If you prefer a light color scheme, replace with navbar-light bg-light. It will look something like the following:

Or you can choose one of the otherdefault colors。

Brand

In that second line of code, seenavbar-brand？That designates your company, product, or project name. Simply replace “Navbar” before the tag with the correct name.

Toggler

Next, you’ll see a big chunk of code that denotes the toggle button. This button is hidden on desktop. It appears only on mobile, when the content of the navigation bar must be collapsed to fit the smaller screen.

In the code above, thenavbar-togglerstyle is defined so the brand name shows on the left of the mobile screen and the toggle button on the right. Clicking on the button will reveal the collapsed content, as shown below.

Nav

在下一位代码中，请参阅Navbar-nav？使用此子组件，您可以在导航栏中添加链接。您只需要包装适当的修饰符类（nav-link) around the word you want to hyperlink.

Form

You can also add a form, like a search box, in your navigation bar with theform-inline子组件。您可以在上面的模板底部看到这一点代码。

现在，您知道如何使用Bootstrap的品牌，导航等添加Bootstrap的响应式导航标头，您可以遵循类似的过程以将其他元素添加到页面中。让我们看一下下面的一些。

Bootstrap CSS示例

Bootstrap提供HTML和CSS模板或“示例”，以帮助您快速开始构建网站。尽管Bootstrap源代码附带了更高级的示例，其中包含自定义组件和布局添加到框架中，但我们将重点介绍使用预编译和源代码版本中使用内置组件的示例。

We’ve already touched on a few examples above, including the Navbar. Below we’ll take a closer look at a few additional examples.

引导网格

CSS grid systemsare used for creating page layouts through a series of rows and columns that house content. In the Bootstrap grid system, rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for properpositioningand填充。这些行用于创建列的水平组。

由于Bootstrap是一个12列系统，因此您必须指定要跨度的12列的数量。假设您想创建三个相等的尺寸列，这些列以任何尺寸的设备跨越页面上的中心。然后，您需要三个“四个四个”列，如.col-4类所示。以下是完全的网格示例。

One of three columns
One of three columns
One of three columns

On the front-end of your site, it would look like this on mobile and desktop.

但是，如果您希望网格在台式机上出现一种方式，而在移动设备上的另一种方式怎么办？假设您希望这些列在桌面上并排出现，但在移动设备上彼此堆叠。

Then you can specify the width of the columns with the prefix for “small.” This would make the columns 100% wide until the small breakpoint (576px). Below is the grid example in full.

One of three columns
One of three columns
One of three columns

The video below shows how it would look on desktop and then change on mobile.

Image Source

There are many more options you can play around with. Using Bootstrap’s grid system, you can create equal-width columns that span multiple lines. You can set the width of one column and have the sibling columns automatically resize around it. You can size columns based on the natural width of their content — and much more.

引导警报

You can add alerts to your Bootstrap site to provide important messages to your visitors. Bootstrap offers eight default colors for alert messages. Let’s say you want to add an alert to indicate that a visitor has successfully created an account, for example. Then you can use the example below.

A simple success alert—check it out!

It will look like this on the front-end of your site.

If you’ve loaded the compiled JS onto your site, you can also添加解散按钮一旦阅读，访问者就会关闭警报。

Bootstrap Buttons

With Bootstrap, you can choose from several predefined button styles to quicklyadd buttons to landing pages or forms on your Bootstrap site。假设您想在您的网站中添加一个“信息”按钮。下面是示例及其前端的外观。

 info 

While the .btn classes are designed to be used with the element, you can use them on other elements as well. If you’d like to turn a link into a button, for example, then you can use the code below:

Link Button

Let’s say I wanted to add a button to my Bootstrap site that encourages visitors tolearn more about CSS animation， 例如。然后，我可以将按钮链接到有关该主题的博客文章。这将是代码：

Learn More

And here is how it would function on the site:

Image Source

You can change the color, size, and other aspects of your button by adding the appropriate modifier classes.

Bootstrap Carousels

A carousel is a slideshow for presenting a series of content, whether that's images, text, or custom markup. In web design, you can create a pure CSS carousel without JavaScript — or you can use Bootstrap to create one. In Bootstrap, carousels are built with CSS 3D transforms and a bit of JavaScript. Using a Bootstrap example, like the one below, can significantly speed up the coding process.

此示例是一个仅具有幻灯片的旋转木马，并且是上一个和下一个控件。

上一个
 next 

这是网站前端的外观：

You can walk through the development process step-by-step in如何在Bootstrap CSS中为您的网站创建轮播滑块。

Once you’re satisfied with the layout of your web page, you may want to customize the appearance of these and other Bootstrap components by changing their colors,font size, borders, or other existing Bootstrap styles. To do so, you can override the existing styles. Let’s look at how below.

How to Override Bootstrap CSS

更改Bootstrap CSS的默认样式很简单。使用您的文本编辑器创建文件，并将其称为main.css。在这里，添加您要进行的任何自定义CSS更改。完成后，将此文件保存在与Bootstrap CSS和JS文件以及index.html文件的同一文件夹中。然后，您只需要在index.html文件的标题中添加一行代码即可。

Remember how you added the following line of code into the header of the index.html file to load Bootstrap CSS on your site?

就在此下方，粘贴以下代码：

This will ensure that whatever CSS you add in the custom.css file overrides the default styles in the index.html file.

您的index.html文件的结构现在看起来像这样：

<头>





<身体>

It’s important to note that this process of overriding the default CSS styles can work for both the precompiled version of Bootstrap and the source code version. With the latter however, you can also directly edit the Bootstrap SASS source code if you have experience with SASS.

Since many users don’t know SASS, let’s look at an example of editing the precompiled Bootstrap.

We’ll start with a simple layout created by developer and technical writerTania Rascia。在Bootstrap提供的基本HTML模板上，她使用框架中捆绑的模板添加了导航栏，Jumbotron标头，网格和字形。结果如下所示。

Image Source

The page is clean, responsive, and cross-browser friendly, but rather austere. To personalize the design, Rascia added custom CSS to the custom.css file. By usingCSS selectors, she was able to apply unique style properties to the HTML elements on her page.

首先，她想删除Navbar和Jumbotron标头之间的空白。因此，她使用类选择器“ Navbar”将以下代码添加到文件中。

.navbar {
边缘底：0;
}

She also wanted to change the color of the jumbotron to green and the color of the font to white and center the text. She therefore added the following code to the file using the class selector "jumbotron."

。jumbotron {
背景：＃27A967;
color: white;
text-align: center;
}
。jumbotron p {
color: white;
字体大小：26px;
}

She made several other changes as well. Rather than go through them one-by-one, I’ll just copy and paste the contents of her custom.css file below. You'll notice a mix of type selectors and class selectors are used.

body {
background: #3E4649;
颜色：＃f7f7f7;
font-family: 'Montserrat', sans-serif;
}
h1,
H2 {
font-weight: bold;
}
p {
字体大小：16px;
颜色：#cdcdcd;
}
.navbar {
边缘底：0;
}
。jumbotron {
background: #27A967;
color: white;
text-align: center;
}
。jumbotron p {
color: white;
字体大小：26px;
}
。navbar-inverse {
background: #2E2F31;
border: 0;
}
。下拉式菜单 {
background: #2E2F31;
border-radius: 0;
border: 0;
}
.navbar-inverse .navbar-nav li a {
颜色：＃f7f7f7;
字体大小：16px;
}
。navbar-inverse .navbar-nav li a:hover {
background: #27A967;
}
。navbar-inverse .navbar-nav .dropdown-menu li a:hover {
背景：＃2C463C;
}
。dropdown-menu li a {
填充: 10px;
}
.btn-primary {
颜色：#fff;
背景色：透明；
边界色：白色；
margin-bottom: 5px;
}
。btn-primary:hover {
颜色：＃27a967;
背景色：白色；
边界色：白色；
}
。glyphicon-large {
字体大小：100px;
}
。呼吁采取行动 {
text-align: center;
}
.call-to-action p {
保证金底：30px;
font-family: sans-serif;
}

With these changes, she’s completely transformed her Bootstrap website. Take a look below.

Image Source

Using CSS overrides, the customization options are virtually infinite with Bootstrap. You can browse through theBootstrap博览会for a look at some of the most creative uses of Bootstrap.

建立响应迅速的网站

Bootstrap是一个有力的前端框架，用于构建和自定义移动友好的网站。使用Bootstrap，您无​​需从头开始or放弃对网站外观的控制。立即开始探索这个框架，以了解其能力。

Originally published May 5, 2021 7:00:00 AM, updated May 05 2021

Topics:

Bootstrap＆css

别忘了分享这篇文章！