In addition to small classes for working with standard HTML elements, Bootstrap provides ready-made blocks that we can use on the page. These blocks are components. They allow you to add something new to the page quickly.
The components come configured to work with different screen resolutions. They support many browsers and platforms, so you can be confident that everything will accurately display when you use them.
Bootstrap now has over 20 components, which we can’t cover in one lesson. In this lesson, we look at the button component, and you can try it out in your template in the additional assignment.
Buttons
It is one of the most used components. You’ll have seen this structure many times while studying this profession. The .btn class creates a button in any HTML element.
To do this, the class has properties that take into account the features of the different elements:
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out,
box-shadow .15s ease-in-out;
}Regardless of which element has the .btn` class, it’ll be displayed the same. It is one of the principles of Bootstrap.
Components and classes should not be tied to specific tags, giving the layout designer more freedom to implement the layout how they want.
These rules are written in the framework in a much more complex way because they use functions and variables from the entire project:
.btn {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition);
}It is how we present it inside Bootstrap. Almost every external change is a result of using variables. This approach ensures that all components are bound to the framework and change when you change the basic settings.
Many developers overlook this, which hurts future support for the project because changing the settings doesn’t change the component. You’d have to edit the CSS separately. The more of these components there are the greater the chance of an error and the more time it will take to implement changes.
Let’s add three buttons, which we will use to examine the mechanism for using components:
As you can see, they have no visual effects by default, even though they have the most structural styles.
It is similar to the OOCSS approach of separating structural styles from styles for design, listed as a separate class. We need to add a modifier to add visual styles to the buttons.
Modifiers
The style modifiers are similar for most components. They are nameComponent-color type classes. Buttons are no exception. By default, there are eight such classes for buttons:
-
.btn-primary -
.btn-secondary -
.btn-success -
.btn-danger -
.btn-warning -
.btn-info -
.btn-light -
.btn-dark
Each of these classes adds a specific color that corresponds to its name.
Let’s add classes for buttons to the example:
These colors can be changed and added using the $theme-colors variable in the _variables.scss file:
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;This file also contains specific color values, and you can change or add colors, thereby changing the site’s palette or adding new features when using classes.
The key points to note when working with components are:
-
No tagging
-
Using functions to generate styles
-
Using usual framework variables
-
Using individual variables to customize a component
Do it yourself
Using the .card component, create product cards in your layout. At the bottom of the cards, place the buttons "Order" and "Add to cart".
Recommended materials
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
