If you are doing something related to the web, you probably heard about Bootstrap. If at this point you still don't know what Bootstrap is. How to include Bootstrap Components on our website?
Or you simply want to get a better overview of what it is and what works best, has come to the right place.
How to include Bootstrap Components on our website?
Basic HTML Bootstrap Template A basic Bootstrap HTML template should look like this:
It is important to start any HTML with an HTML 5 Doctype declaration, so that browsers know what type of document they can expect.
The header contains three tags important to be declared first and all additional header tags must be added after these.
Bootstrap Templates and UI Components
Bootstrap comes with basic HTML and CSS design templates that include many common UI components. These include typography, tables, forms, buttons, glyphs, drop-down mens, buttons and input groups.
Bootstrap Grid System
The grids provide structure to the design, defining horizontal patterns and verticals to organize the content and enforce the margins.
The grids also offer an intuitive structure for viewers, because it is easy to follow a flow of content from left to right or from right to left that moves through the page.
The Bootstrap grid system has four class levels: xs for phones (<768px), sm for tablets (768px), md for desktops (992px) and lg for larger desktops (1200px).
These basically define the sizes in which the columns will collapse or extend horizontally. Class levels can be used in any combination to obtain dynamic and flexible designs.
For example, if we want to get two rows, one with two columns and one with four, we could write:
First columnSecond columnFirst columnSecond columnThird columnFourth column
Beginner developers often assume that their pure HTML and No style will look the same in all browsers.
Unfortunately, each browser has its own style sheet of “user agent”That applies to HTML and no two browsers have the same default values.
Bootstrap sets the basic global display, typography and link styles. Specifically:
- Establish background-color: #fff; in the body
- Use attributes @ font-family-base, @ font-size-base Y @ line-height-base as our typographic base
- Set the color of the global link through @ link-color and apply the link underlines only in: hover
- These styles can be found within scaffolding.less.
While HTML5 introduced a series of new form attributes, input types and other auxiliary elements, Browsers have not greatly improved the visual form.
This is an area where Bootstrap really shines, because align and stylize labels or entriesValidating forms and displaying error messages can be complicated without help.
Images and Icons
Bootstrap comes with more than 260 glyphs in font format, which is incredible. Source cones have many advantages over simple bitmap images, one of which is that they are scalable.
They can also be easily customized using only CSS, so manipulating the size or color, or even adding a shadow, is very easy.
Buttons, Button Groups and Deployable Mens
Buttons are one of the things that each browser presents in a totally different way. If you want to have a consistent design in all browsers, This is potentially a big problem.
Fortunately, Bootstrap has an elegant solution for buttons too. And in addition to making them consistent, it brings many variations to play.
You can apply the clase .btn to the elements and . You can group a series of buttons in a single line using the class.btn-group at
Or you can turn your buttons into drop-down mens by placing them within a group .btn and providing adequate menu marking of the list of unordered items.
How to use Bootstrap Components on Our Website?
5 (100%) one vote (s)