Bootstrap quick start. Adding custom styles to Twitter Bootstrap. Bootstrap theming or changing the appearance of elements
The second half of the article is already perceived more simply, there are more examples with screenshots.
Bootstrap - what is it?So let's start with an important question. Bootstrap is a CSS and JS framework, essentially a set of files with ready-made written code. The goal of developers of almost any framework is to simplify website development for themselves and others who will have access to the tool. In the case of Bootstrap, it is completely free, so you can use it in any way, edit the source code and customize the framework in any way you want. It is perfectly.
Installing BootstrapIf you just need to connect the framework files to an HTML document (for example, for practice), just download the framework from the official website getbootstrap.com, copy its files into the project and connect the ones you need. I'll do it short review these files:
This is the standard set of the framework. In fact, you can easily customize it and change it to suit you. For example, do not use scripts at all or connect only one grid. In general, we will also talk about this.
Russian Bootstrap documentationWhen you visit getbootstrap, you probably noticed that everything here is in English. We could use Russian help on the framework. It's easy to find. To do this, go from home page to the Getting Started section. Scroll to the very bottom, there will be a link to translations. Look for Russian there and click on it. That's it, now you are on the Russian version of the site. True, not everything has been translated here, but somewhere around 70-80% is accurate, so you’ll understand everything.
Bootstrap gridWhatever one may say, the main element of Bootstrap is adaptive mesh. In general, without it, the framework would lose almost all its value, because thanks to the grid you can quickly create adaptive templates. At the same time, you may not be familiar with media queries at all; you don’t need them, because the framework takes care of implementing adaptability; you just need to assign the correct classes to the blocks.
What are these classes? Let's go to the documentation, it will help us a lot. Go to the CSS - Grid System section. The general rules for working with a grid are simple; I’ll list them now.
How to work with a grid?Think of it as an html table. If you've ever written HTML code for tables, you know that all the content is placed in the table tag, one row is placed in the tr tag, and then the cells are placed in it - td .
So, everything is similar in the grid. The container class serves as a general container for the grid. There are 2 options for the bootstrap grid - completely rubber and still having a finite maximum width. So, when the general block is given the container class, the site will have a maximum width of 1170 pixels. It will not expand any further. Naturally, the content will be centered.
If you set the container-fluid class, then the mesh will be completely rubber, that is, there will be no size restrictions. For example, if a person opens a website on a 1920 pixel wide monitor, he will see it in full width.
Accordingly, the first thing when developing a website is to decide what the template will be like - completely rubber, or its width still needs to be limited.
Great, the container block should contain a row of grid. You need to place all the blocks that are on one line in it. That is, if we take the most typical pattern: header, main part, right column and footer, then there are 3 columns. The first will contain only the header, the second will contain the content and side column, and in the last one there is a footer. The markup for such a site would be something like this:
A cap
Content... and sidebar
Footer
But for now this is the wrong markup, because it's missing... what? That's right, cells! In the case of Bootstrap, they are also called columns. The bootstrap grid consists of 12 columns. It can be embedded in any block of any width, at least 1200 pixels, at least 100. All this is because the width of the columns is specified not in pixels, but in percentages.
How does this 12-column system work?So we come to the very important issue associated with the framework. Believe me, if you understand this, everything else is nonsense. The main thing is to understand how the grid works and the way to quickly adaptive layout will be open for you.
To do this, scroll through the documentation just below, there you will find a table that contains important properties grids
By the way, the columns themselves are marked in Bootstrap with the col- class, but this is a composite class, so they never simply write col-. Bootstrap has 4 special classes that are designed to control the size of blocks at different widths, here they are:
These are the 4 classes, but to control the size of the elements, numbers from 1 to 12 are used, because, as you remember, there are exactly 12 columns in the grid.
A cap
Content
Side Column
Footer
It's quite easy to understand. First of all, we create a header; it doesn’t have to be placed in the grid at all, since it will in any case occupy 100% of the width (usually). But we'll put it in anyway. What is this class col-md-12? As I already told you, no one writes simply col-, with this class we essentially tell the browser:
This is a cell | column
On medium devices (md class), its width should be 12 columns out of 12, that is, 100% of the row width.
But what about the width on other devices? On large (lg) screens it will also be 100%, because the values for large screens are inherited, but for smaller ones they are not. It's simple: if you wrote col-xs-4 , then the column width would be 33% on all devices, and if col-lg-4 , then only on large ones. This is the feature, remember it.
Well, if the width value is not saved on smaller screens, then what happens? It is reset. Here's how it happens:
col-sm-4 - on small screens the block will occupy 33% of the width, it will be the same on md and lg screens, but on xs, that is, the smallest ones, the width will be reset to 100%. So, remember one more simple rule: If nothing is specified for smaller screens, then on them the block will be displayed at 100% width.
Content
Side Column
Essentially we are telling the browser:
Let the content block be 8 out of 12 columns wide and this situation will be on small, medium and large screens (it is enough to specify for small, for large screens, as you remember, the value is inherited). But on the smallest screens the block will be occupied 100%. This is correct, usually mobile devices ah, sites go exactly in 1 column.
Let the side column be one-third the width of the row on the same small, medium and large screens. Well, on the smallest ones, as you already understood, its width is also reset to 100%. It's that simple.
Well, there’s nothing to deal with the footer. Well, we’ve covered the basic principles of how the grid works, but we still need to see how it works...
Bootstrap Nested GridThe fact is that now we have divided the template only into main blocks, but inside they can also be divided into columns. For example, the content may display products in several columns. What should I do? It’s very simple - we create exactly the same grid inside. It will be nested, but also contains 12 columns. If we summarize all this, then we come to this conclusion:
There can be an unlimited number of grids inside any block. For example, in a block with products there is a grid for separating products; in the block with one product itself, you can create another grid, for example, to separate prices, availability information and additional information. information.
Now we will try to make another grid inside the content block to arrange products in 3 columns. So, let's take the block in which we have content:
Content
And we write in it:
Catalog:
Product Name
Product description
As you can see, we created a new grid inside the content - we put a row inside, and in the row there will already be 3 blocks with products. Just copy the col-sm-4 block with the product card and paste it 2 more times, this is what you get (you can take any product picture, I took a large one):
I missed another important point: in order for the images to adapt to the blocks in which they are located, each of them needs to be given the img-responsive class. If you, like me, think that doing this is inconvenient, then just write in your own style.css like this:
Img( max-width: 100%; height: auto; display: block; )
That's it, save this code and connect your css file to the project. Now the images will be adaptive by default.
Well, did it turn out quite smoothly? Yes, but without bootstrap you would have to suffer longer. The only thing is that when creating a grid inside any block, you no longer need to create a block with the container class in it. Why is this not necessary? Yes, because the block in which the grid is created serves as a container.
Thus, you can create as many columns as you like in any block and make a template of any complexity. And all this is much faster than without Bootstrap, because you have to write all the css from scratch.
Responsive utilitiesThis is another great feature of bootstrap. It consists in the fact that you can hide or make visible any blocks at the width you need. For example, completely hide the side column on narrow screens, add some new elements on mobile devices, add a column on wide screens etc.
There are a lot of application options, but I didn’t tell you about the most important thing: how to use these utilities? To do this, just add classes the desired block. If you need to hide it, just specify the following class:
Footer
What in in this case will make the class hidden-xs ? It will hide the footer on extra small devices. On all others the block will be visible.
If, on the contrary, you need to show it only on the smallest screens, you need to use the visible-xs-block class. In this case, the block will be hidden on all but the narrowest screens. So, adaptive utility classes are written like this:
Well, a couple of examples to make it clear:
This is how it all works. That's exactly it and no other way. I hope you understand this. Let's put it into practice. We have a test template, albeit a very primitive one.
Task: to make the side column disappear on small screens, and also one product on the smallest screens. And so that on xs devices the products are already in 2 columns, not 3.
Try to do it yourself, editing only the html code. What needs to be done? First, let's look at the column, to hide it on sm screens, you just need to add the hidden-sm class to it.
Great, now the third product needs to add the hidden-xs class and it will disappear on the smallest screens. Well, the classes of the remaining two goods will be as follows:
That is, on medium devices the block will occupy 4 columns out of 12, which can be translated into 33.33% of the width, and on extra-small devices - 50%. And since one block with a product will disappear at this width, both blocks with products will be neatly arranged in 1 row, like this: 
Great! Having understood this, you can already manipulate the blocks on the web page in almost any way you like. Try to come up with tasks for yourself and implement them.
Next I will show you another very good trick - the ability to move a block to the right or left. Let’s say we have not 3 products in a row, but 1. And it does not occupy the entire width. And your task is to align it in the center. This is easy to do if you keep in mind that you are working with a 12-column system.
Let's leave one block with the product:
It is enough to make simple calculations to understand how much you need to move the block in order to center it. It needs to be moved 4 columns to the left on medium and large screens, and 3 columns on small ones. This is what it looks like:
The class col-md-offset-4 says: on medium and large screens, move the block to the left by 33% of the width parent container(1/3 left indent, 1/3 block width, ⅓ right indent, resulting in centering).
Class col-xs-offset-6: On extra-small and small screens, shift left by 25% (¼ padding left, ½ block width, ¼ padding right).
I hope you understand the gist and use these classes if necessary.
Bootstrap components and examples of their useI congratulate you. We have just covered the most important topic related to the framework. It is the grid and working with it that is important. Working with components already means that you just go to the documentation and copy the code there required component and, if necessary, change it to suit you. But I will still give below some examples of how to use the components.
Fast floats and wrap cancellationThe pull-left and pull-right classes allow you to quickly make any block float by sending it to the left or right. Do not forget about canceling the flow. You can use the clearfix class for this.
Bootstrap: Horizontal Responsive (Mobile) MenuWe will add the following components directly to the template, so if you want to work with the code and not just read, follow all the steps after me.
Actually, with Bootstrap it is very easy to do not just responsive menu, and the so-called mobile one, which is completely minimized on small screens and hides under one button. This technique can be seen in many responsive templates and is actually very easy to implement. Example code mobile menu is in the documentation, I'll take it from there and redo it a little.
So, the first thing I will do is remove the block with the header, because our menu, in fact, will be the header in the case of my template. The menu code must be placed before all site content, even before the container block. Why? Yes, you will now see for yourself that the grid is already built into the navigation bar. So here's the code:
Switch button
Logo/name
Search
Don't be alarmed by the fact that there is a lot of code. This is what the site looks like now: 
But if your menu does not take up the entire width of the screen, it makes sense to center it. To do this, you should then create an additional wrapper block for the menu, which should be placed after the block with the container-fluid class. Don't forget to close this block. I gave it the navbar-wrap class. Here are the styles for it:
That is, you can simply limit the width and center it. Or initially replace container-fluid with container . 
As you can see, we added a logo, two simple items, a drop-down item, and a search form to the menu. That is, there were many elements. You can easily customize the menu for yourself by adding your own classes to it. But for now my goal is simply to show you this component.
This is how the menu will look on devices with a screen width of less than 768 pixels: 
As you can see, the menu has collapsed. It opens when you click on the button in the upper right corner. Only the logo remained on the screen.
At the same time, from the example above you can understand how a drop-down menu item is created in Bootstrap; let’s extract this code for more detailed consideration:
Exercise equipment
So, the container for a drop-down item is a regular list item with the dropdown class. Inside it is the main link, clicking on which opens a drop-down menu. It is very important to assign it a data attribute, which you see in the code; without it, nothing will work. You should also make sure that the bootstrap.js file is connected to the web pages.
A span with the caret class is nothing more than an arrow, thanks to which you can understand that the item is a drop-down item, and below the menu itself is formed using a standard bulleted list. That's it, everything is quite simple, you can use this code to implement drop-down items.
Add with using Bootstrap breadcrumbs (breadcrumbs)In many stores you can find a so-called block of bread crumbs, which contains the complete path to current page. This is also easy to do using the framework, see the code:
In fact, it is enough to specify the breadcrumb class for a numbered list, and enter the usual list items into it. By the way, I’ll center the second-level headings in the template (this needs to be written in the css):
H2( text-align: center; )
If you want to somehow change the appearance of breadcrumbs, just use the .breadcrumb selector in CSS. For example, this way you can remove background color:
Breadcrumb( background: transparent; )
This is what the site looks like now: 
By default, the table will stretch across the entire window, so wrap it in a box with a limited width to limit the dimensions. By default it looks terrible, but if you add the table class to the table tag, everything will be much nicer:
To highlight a different color when you hover over a table row, use the table-hover class.
| Bower | $ bower install bootstrap |
| npm | $ npm install bootstrap@3 |
| Composer | $ composer require twbs/bootstrap |
For experiments with Bootstrap, the first option with an external connection is quite suitable. However, to implement practical problems on real sites it is better, in my opinion, to minimize the number of external libraries. Therefore, it is better to download Bootstrap and connect it locally. And this can be done in two ways.
The first method is the most obvious. Go to the official download page and click the "Download Bootstrap" button:
You will download an archive that will contain three folders (css, fonts and js) with files. Unpack them into a separate directory and create your own index.html in it, to which you can connect all the styles, scripts and fonts. As a basis for the content of the HTML document, you can take the above code, replacing the links with Bootstrap components from external to local:
By the way, Bootstrap's default folders have several extra files, which can be removed to save space. For example, in the css folder you can delete all files with the .map extension, as well as unminified (without the .min extension) theme and style files (only two files will remain: bootstrap.min.css and bootstrap-theme.min.css). We delete everything from the js folder except the bootstrap.min.js file. We do not touch the fonts (if they are needed). As a result, you should have the following file structure:
This method is good for everyone except that standard delivery Bootstrap may not include all plugins and only standard styling is used. If you are making not just a test page, but a real website, then you will probably need to change a lot in the standard design template.
So, in order not to dig through files later, you can customize the Bootstrap theme to suit your requirements in advance. To do this, you will need to know English and understand at least basic principles layouts using CSS. To create your own Bootstrap assembly, go to a special page and fill out numerous fields in a form that allows you to set your own styles for literally any element on your future site:
This is a rather slow task, but much faster than manually editing ready-made style code and scripts. In my opinion, it’s worth spending the extra 20-40 minutes to save yourself a couple of hours later searching for parameters that need to be changed.
When all the changes have been made, click the "Compile and Download" button at the very bottom and your custom Bootstrap build will be downloaded as an archive. By the way, in addition to the folders already familiar to us, this version of the archive will also contain a config.json file. It contains a list of all the variables that we edit on the settings page. So in the future, you can download this file and immediately download the configured Bootstrap without having to enter all the parameters manually!
How to work with documentationSo, at the moment we already have a ready-made HTML document with Bootstrap connected to it. But we don’t yet know how to work with this Bootstrap... To find out, you need to read the very extensive documentation on the official website or its Russian version (there is another good Russian translation).
In my opinion, it is better to use the original documentation, since it is newer and does not contain any ambiguities, unlike translations. In addition, the structure of the main menu on the official website is more logical - the main sections of the documentation are located in left side, and various additional ones to the right.
The main help topics for Bootstrap are:
- Getting started - contains information on how to connect Bootstrap to your project and several templates that you can use to get started;
- CSS - describes all existing CSS classes for Bootstrap and gives examples of their use in finished code;
- Components - this section provides recommendations on the principles of using Bootstrap-specific components;
- JavaScript - introduces us to examples of using Bootstrap scripts and its plugins.
Additionally, there are also sections with ready-made themes, an exhibition of works on Bootstrap, vacancies, a blog (and in the Russian version there is also a full-fledged forum), but these are secondary sections. To master Bootstrap, we will need to focus our attention on the above.
The documentation is very extensive and it can be very easy to get confused at first. To prevent this from happening, the main thing is to understand the structure and the principle of describing the material in it. In fact, there are no classical instructions here - everything is set out in specific examples. Moreover, for each example there may be several options describing the differences and conditions of use.
Structurally, the description occurs in the same order in which layout usually occurs. That is, at the beginning they describe common entities, then the elements are specified from top to bottom. For example, in the CSS section, everything starts with a description of the doctype, META tags and ends with special cases of using the Less and Sass preprocessors.
To simplify the search for the desired entity, you can use the side menu in the right sidebar. Unfortunately, searching through the documentation is not provided here...
One of the most important things to learn about Bootstrap is understanding its grid. The Bootstrap grid is a kind of ready-made cells into which you can nest any content. At the same time, the contents of these “cells” are aligned in the way we need and when the screen size changes, it correctly adapts to its new width.
We can find information about the grid in the CSS help topic - Grid system:
Everything is described here in quite detail, however, if briefly and more clearly, then Bootstrap grid can be compared with the principle once used tabular layout. Here you also need to create a container (analogous to a table -
| ).
General algorithm Working with the Bootstrap grid can be reduced to the following steps: In total, there are 4 basic column classes in Bootstrap, which can be combined with each other to better management adaptability on different screens:
In practice, the .col-md- class is most often used with a number indicating 1/12 of the total screen width. For example, to layout one column on the entire screen, we will use the class.col-md-12. For two columns spanning half the screen - two blocks with classes.col-md-6. For three columns, respectively, three c.col-md-4, etc. By the way, it is not necessary that the columns be equal in size. It is quite possible to combine (within 12 pieces, of course) widths, for example, .col-md-4 and .col-md-8 or .col-md-2, .col-md-3 and .col-md-7. You don’t even have to use the entire width by making, for example, only one column in a row, say .col-md-5:
Columns can be shifted horizontally relative to the initial coordinate grid or displayed out of order. For example, to place two columns .col-md-4 in the center of the page, we can apply an offset by adding another class .col-md-offset-2 ((12-(4+4))/2 to our first column block =2). And to change the order, add the classes .col-md-push- (to shift the column to the desired interval) and .col-md-pull- (to drag the column to the beginning of the line):
Finally, columns can be nested inside other columns in a row. Moreover, this can be done in two ways: with nesting in a new container and with nesting only in a new line. If you insert a new container into a column with a set of its own rows and columns, then all the styles specific to the container will be applied to it. When adding only a line, the styles are saved as for a column (there will be no extra indents, etc.):
As you can see, positioning column blocks in Bootstrap is not that difficult. The grid is a very convenient invention that “kills” two birds with one stone: it makes your layout more accurate from the point of view of designers and automatically adds adaptability to your web page. The only thing to remember is that you cannot violate the nesting structure, for example, directly adding a column to a container or inside another column without declaring a new row. You can read more about working with styles in Bootstrap in the CSS documentation section. And according to the grid, that’s essentially all. Let's move on. Bootstrap ComponentsIn addition to the grid, very useful feature Bootstrap is a whole set of standard components that are used in most modern websites. In fact, using only these components, you can quickly create a full-fledged website with a responsive menu bar, active " bread crumbs", various banners and informers, buttons and drop-down menus, pagination and even ready-made icon fonts! And, which is typical, all this goodness is created, like the grid, by simple addition to the required DIV of the required classes! True, in some places, you also need to observe the nesting structure of blocks (for example, to create a menu), but I think this will not be particularly difficult. Moreover, there are enough examples on the page with a description of the components. Here we will consider only some special cases. Working with icon fontsBootstrap 3 has a good icon font in its base package - Glyphicons. The point of such fonts is that instead of alphabetic symbols, they contain various vector graphics. Unlike ordinary raster images, icon font images are perfectly scaled without loss of quality, which is why they became so widespread with the popularization of adaptive layout. There is no icon font in the new Bootstrap 4 yet (perhaps it will be replaced by the more popular FontAwesome), but in our 3rd version there is a font and it can be used. The main requirement for such use is the insertion of the desired symbol using a separate HTML element dedicated to it. For example, we need to insert a Russian ruble symbol next to a certain number. In the table with a list of icons of the Glyphicons font under its image, copy the name of the class (or rather two at once) “glyphicon glyphicon-ruble” and apply it to the tag, which we insert after our number: Cost - 999 However, it is often necessary not only to insert this or that icon, but also to change, for example, its size and color. To do this, in Bootstrap it is recommended not to reassign standard styles for the desired class with a symbol, but to add to the list of SPAN classes that inserts it another additional class with the necessary parameters design or add styles via style attribute. For example, like this: Myrub(font-size:10px; color:green;) Cost - 999 Cost - 999
As mentioned above, Bootstrap has quite a few different implementations of all kinds of text blocks. Almost all of them are implemented by simply adding the appropriate class to the desired DIV, but they have visual differences. For comparison, I suggest formatting the same phrase with a title, text and button in the form various types blocks: Heading Button
Almost all types of blocks, except perhaps the jumbotron and comments, do not in any way affect the styling of the content of the block itself. Only the background and frame change and the position of the content shifts slightly. Inside the jumbotron (class - jumbotron) all the text looks a little larger from standard size. This type of block is sometimes called a banner and is often used as a title slide screen in landing pages (popular one-page sites). It allows you to highlight the main information, focusing the user’s attention on it just by slightly enlarging the fonts. The best effect can be achieved by adding a .text-center class to the jumbotron class, which will align the banner content to the center of the page! Heading Button By the way, the peculiarity of the jumbotron is that it can be stretched to fill the entire screen without padding or a frame. To do this you need to break the rules a little Bootstrap layouts and move the block with the class.jumbotron outside of all lines and containers. Instead, the container with rows and cells will need to be placed inside the resulting full-screen banner!
Heading Button
It’s just a pity that Bootstrap doesn’t have classes for vertically aligning the contents of the same jumbotron and increasing the height of the block to fill the entire screen. There would be no price for it then :) But all this can be completed with your own hands if necessary. Not exactly your own standard design alerts and panels are also of interest. Notes are added standardly using the.alert class; however, to clarify the type of notification, another of the four possible classes is added: Notification type "Success" (green background) Notification type "Information" (blue background) Notification type "Warning" (yellow background) Danger type notification (red background) As for the panels, there is even more variety here! By default, a panel is added with the .panel class, however, as noted, it requires a class after it that specifies the type of panel (usually .panel-default ). But that's not all! At a minimum, our panel must have a nested block with the .panel-body class to house the main content, and, at a maximum, it can have its own header (.panel-heading with an optional .panel-title class inside) and footer (.panel-footer ): Title with special class.panel-title Main content of the panel Panel footer
In addition, panels in Bootstrap can be non-standard and vary visual design according to the context of their use. The contexts basically coincide with the alert contexts, but they also have a fifth option in bright blue tones - .panel-primary. Additionally, similar to the comments, there are classes .panel-success, .panel-info, .panel-warning and .panel-danger:
So far we have only considered relatively simple templates Bootstrap code. However, it has ready-made solutions for creating quite complex interface elements. They typically require the use of JavaScript plugins, which can be obtained by building your own Bootstrap build. And now we will look at a fairly popular element, which is usually called a carousel or slider. It allows you to cycle through various content in the form of images with explanatory captions or blocks of text. In terms of placement in code, the Bootstrap carousel resembles a jumbotron - it occupies the entire width of the container in which it is nested, or the page if used outside of containers. Let's take a look at the slightly modified and translated carousel code from the official website: SLIDE 1 SLIDE 2 SLIDE 3 Back Forward I think from the comments you understand what, where and how it is announced (the only nuance is that you need to change the addresses of the pictures to your own, since mine are empty). If you copy the above code, you will get this nice carousel, which you can then customize to the desired look with additional design classes:
You can control the behavior of the carousel using jQuery (if you are familiar with its syntax) or through data attributes that are applied to the block where our carousel is initiated. In the example above, we have an attribute that sets the speed of changing slides to 5000 milliseconds (5 seconds) - data-interval . In addition to this, you can change other options:
A common task in development is also the creation of modal windows. In web execution, these are blocks that are displayed on top of the main content of the page with the background darkened. Bootstrap allows you to create such pseudo-windows quite quickly and easily. Here is an example of a simple, fully functional modal window: Show window × Modal window title Some text :) Close Save
To call a modal window, you need a button, link or other clickable element, which must have two required data attributes: data-toggle with the value "modal" (indicates the behavior of the modal call button) and data-target , the value of which must be the identifier of the block containing modal window markup (for links, you can use a standard href in this role). The modal window block itself must have:
In general, the structure is quite logical and simple. The main thing is to comply with it and not forget about the required attributes. conclusionsIn one article, unfortunately, it is impossible to touch on all aspects of working with Bootstrap. This framework is constantly developing and improving, acquiring more and more new capabilities. That is why in recent years it has become one of the most popular in website building. When I wrote this article, first of all, I wanted to show the basic principles of working with Bootstrap and explain the most commonly used entities in it in a more understandable language. However, if you don’t understand something, I recommend that you try using one of the Bootstrap visual editors. They will clearly demonstrate to you all possible elements and allow you to quickly get your own customized assembly. Of course, Bootstrap does not have everything that a web developer needs in everyday work. However, the framework can be customized and modified to suit your needs, as well as supplemented with third-party plugins, which are usually integrated into the project without any problems. Therefore, I wish you successful development of Bootstrap to save your precious time! P.S. Permission granted to freely copy and quote. this article subject to indicating open active link to the source and preservation of the authorship of Ruslan Tertyshny. In this lesson we will learn how to download and connect the Bootstrap framework (version 3 or 4) to the site. Bootstrap Learning ToolkitMinimum set of tools (programs) for creating web projects using the Bootstrap framework:
Creating a web project whose design is based on the Bootstrap framework always begins with downloading it. There are various ways to download the Bootstrap framework. For example, through a link located on getbootstrap.com or using a batch npm manager, Composer, Bower or others. The way to do this depends on your experience or specific situation. How to install the Bootstrap framework using package managers, as well as how to build it using Grunt, can be read in this article. The easiest way to download is to use the link. There are 2 links on the Bootstrap site. The first link contains ready-to-use CSS files and JavaScript. This assembly is mainly used for studying the framework or for use in projects, the design of which can be made in the default styles laid down by the authors. Download Bootstrap 3.4.0 Download Bootstrap 4.2.1The second link contains the framework in source codes. This version is more convenient for website development, because... makes it very easy to change styles, color scheme components, configure them, etc. But these source files, will need to be compiled and minified before being used on a page. This process usually automated, for example, using Gulp. Bootstrap 3.4.0 source codes Bootstrap 4.2.1 source codes Unpacking the Bootstrap archiveAfter downloading the archive (with ready-to-use using CSS and JavaScript files), it must be unpacked into your web project directory. If you look at the archive, you will notice that it has the following content (using Bootstrap 3.4.0 as an example): Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── j s/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └ ── glyphicons-halflings-regular.woff The css directory contains the styles of the Bootstrap framework, and the js directory contains plugins for making some components work. Plugins are written using functions jQuery libraries. Therefore, before Bootstrap JS you need to include the jQuery library. As you can see, there are 2 in the archive CSS versions and JavaScript files, i.e. with and without the min suffix. The version of the file with min is no different from without min , it is simply minimized (compressed). In production (on a production site), it is better to use minimized versions of files. These files have smaller size, and therefore provide more fast loading site pages. Non-minified versions are more convenient to use during development, as well as for studying. In addition to these files, in this archive The icon font "Glyphicons" is also included. The Glyphicons font features over 250 icons from the Glyphicon Halflings set. The font is presented using 4 files: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff). Such a variety of formats for the same font is necessary to ensure its display in all browsers. You can read about icons in font format, as well as what advantages and disadvantages they have, in this article. The Bootstrap 4 framework archive is practically no different from Bootstrap 3. Its main difference is that it does not contain the "Glyphicons" font. If you need font icons, you will need to connect them yourself. For example, using one of the following sets: FontAwesome, Octicons, Glyphicons, IcoMoon, or others. If you do not want to use a ready-made font, but create your own, which will consist only of the necessary icons, then use this information. In addition, the Bootstrap 4 archive also contains the bootstrap-grid.css and bootstrap-reboot.css files. These files are necessary only for those who do not need the whole framework, but only part of it. The first file (bootstrap-grid.css) contains the Bootstrap grid, and the second (bootstrap-reboot.css) is a normalizer that sets the basic styles so that they are the same for all HTML elements in all browsers. Connecting Bootstrap to an HTML pageThe installation process of the Bootstrap 3 framework consists of connecting the following files to the HTML 5 page: Note: Files JavaScript is better connect before closing body tag() as this will ensure that the main content of the web page loads and displays faster. ... Connecting the Bootstrap 4 framework is done like this: ... You can also connect Bootstrap 4 using a CDN (you don’t need to download Bootstrap into your project): Copied ... CDN Bootstrap 3.4.0: Copied
To test the functionality of the framework, we will create a button that, when touched, will display a popover tooltip. Bring the cursor to me $(function () ( $("").popover((trigger:"hover")); )); Before downloading, make sure you have a code editor (we recommend Sublime Text 3) and some knowledge of HTML and CSS. Here we will not touch on the source files, but you can always download and study them yourself. We'll focus our attention on getting started with compiled Bootstrap files. Loading compiled filesMost quick way Get started: Get compiled and minified versions of our CSS, JS, and images. No documents or source files. 2. File structureIn the downloaded files you will find the following structure and content, grouped logically by common properties and containing both minified and compiled versions. Once downloaded, unzip the compressed folder to see the structure of (compiled) Bootstrap. It should be something like this: bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README . mdThis is the basic form of Bootstrap: compiled files for fast and easy to use in almost any Web project. We provide you with compiled CSS and JS (bootstrap.*), and also compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac application for compressing images into PNG. Please note that all JavaScript plugins require jQuery. 3. What's includedBootstrap is equipped with HTML, CSS and JS for all kinds of work, they are all listed in categories that you can find at the top of the page. Document sections Supported elementsCommon body styles to reset the type and background, link styles, template grid, and two simple markup elements. CSS StylesStyles for common HTML elements: design, code, tables, forms, and buttons. Also includes Glyphicons, a great icon set. ComponentsBasic styles for simple components interface: tabs and buttons, navigation bars, messages, page headers, etc. Javascript pluginsLike components, these Javascript plugins are interactive components for tooltips, information blocks, modal components, and more. List of componentsAll together, Javascript components and plugins contain the following elements interface:
After a short introduction, we'll focus on using Bootstrap. To do this, we'll use a basic HTML template that includes all the elements listed in . This is what it looks like typical file HTML: To make a Bootstrap template like this, simply attach the appropriate CSS and JS files: And everything is set! By adding these two files, you can develop a website or application using Bootstrap. The last notes
|
