Using bootstrap. Loading compiled files. Bootstrap Nested Grid
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 upon 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.
After downloading, unzip 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 quick and easy 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.*). Image files are compressed using ImageOptim, Mac apps to compress 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 elementsGeneral body styles to reset type and background, link styles, template grid and two simple elements markings.
CSS StylesStyles for general 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 the components, these Javascript plugins are interactive components for tooltips, information blocks, modal components, etc.
List of componentsAll together, Javascript components and plugins contain the following elements interface:
- Button Groups
- Dropdown button lists
- Navigation tabs, buttons and lists
- Navigation bar
- Shortcuts
- Badges
- Page headers and the hero element
- Miniatures
- Messages
- Process indicators
- Modal elements
- Dropdown lists
- Tooltips
- Information blocks
- Element "Accordion"
- Carousel element
- Keyboard input ahead
After a short introduction, we will focus on using Bootstrap. To do this, we'll use a basic HTML template that includes all the elements listed in .
This is what a typical HTML file looks like:
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.
Greetings to all my blog guests and web development geeks. Today’s publication will be devoted to introducing such a popular framework as Bootstrap. After reading the current article, you will learn why it was created, how to work with bootstrap and how to install it, what tools this framework provides and where it is most often used. Well, now go ahead and sort out the new material!
What is Bootstrap?Bootstrap is a framework designed specifically for the development of the frontend (external interface) of web services and applications.
It includes standard templates consisting of typography, buttons, forms, various menus, including drop-down menus, tables, modal windows, navigation, sliders (regular and in the form of a carousel) and other tools, as well as all kinds of plugins on .
The most popular among them are Tooltip, which is responsible for pop-up windows, Dropdown, which is responsible for drop-down lists, Carousel, which organizes a scrollable slider, and some more.
With a complete list existing plugins, templates and components can be found on the official website http://getbootstrap.com/getting-started/. Also, with its help, starting from the second version, you can create responsive layout.
A few words about historyI think that you need to know a little history of the creation of the instrument being described in order to understand what’s what.
Bootstrap was created by Mark Otto and Jacob Thornton specifically for social Twitter networks. It acted as an internal library. This is why you sometimes see the name Twitter Bootstrap.
The library was originally called Twitter Blueprint. However, by the time the product was released to the general public (and this happened on August 19, 2011), its name was changed to Bootstrap. Today there are four versions of the framework.
The most noticeable and in demand on this moment is Bootstrap 3. It was the first to use the concept mobilefirst. In addition, many amendments and improvements have been introduced.
What are the benefits of using Bootstrap?In fact, as with all technologies, using Bootstrap comes with both positive and negative aspects. Therefore, never use this framework thoughtlessly. In one of the articles, I described in detail the advantages and disadvantages of working with Bootstrap.
And now I want to draw your attention to the convenient ready-made solutions that Bootstrap provides and their positive aspects.
So, when connecting the described framework, you are given the opportunity to use such ready-made elements as:
- All kinds of components, which include: navigation bars, drop-down lists, buttons, progress indicators, pagination and others;
- JavaScript plugins, including transitions, modal and drop-down elements, pop-up blocks and tooltips, collapsing, tab implementation, sliders and others;
- Grid templates, including floating ones;
- Layouts;
- And of course, the implementation of responsive design.
It is worth paying special attention to grids or, as they are also called, layout layouts. Now there will be a small spoiler, forgive me, because I decided to devote a separate article to this topic, but there’s nothing to be done!
Thanks to this tool, Bootstrap is very often used for writing websites. Because this is a really competent and powerful mechanism for block layout. The creators of the framework provided a maximum number of columns - 12. This is more than enough to install the “framework”.
In addition, in some situations, using Bootstrap not only simplifies the code, but also significantly saves your time. At the same time, you don’t have to worry that some elements won’t work in problematic browsers (yes, I’m hinting at IE), because Bootstrap is fully compatible with .
How to connect the framework?There are several connection options of this instrument. I guess I'll start by installing the boot file.
So, on the official website using the link, you can download the current versions of Bootstrap. Everything is very simple. Simply select the installation package that suits you and click on the “Download” button. On the same site you can download the alpha version of Bootstrap 4.
The second way is, of course, using a CDN. So, to connect the latest versions of the framework, you need to insert the following link:
If you need to connect a smaller version of JavaScript, then copy this line:
Well, the topics are connected as follows:
On the Russified website you can watch a training video on connecting this framework (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/).
That's all, friends, it's time to say goodbye. Don’t forget to share interesting posts with colleagues, and also subscribe to my blog updates. Bye bye!
Best regards, Roman Chueshov
Read: 213 times
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:
- text editor for working with code (Notepad, Brackets, Notepad++, etc.);
- browser ( Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer or others).
Creating a web project whose design is based on the Bootstrap framework always begins with downloading it. You can download the Bootstrap framework different ways. For example, through a link located on the site getbootstrap.com or using the package manager npm, Composer, Bower, or others. How to do this depends on your experience or specific situation.
How to install 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 and JavaScript files. 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 code. This version is more convenient for website development, because... makes it very easy to change styles, colors of components, configure them, etc. But these source files, before being used on the page, will need to be compiled and minified. 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 application of 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 ├── js / │ ├ ── 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. The plugins are written using jQuery library functions. Therefore, before Bootstrap JS you need to include the jQuery library.
As you can see, the archive contains 2 versions of CSS 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 are smaller in size and therefore ensure faster loading of site pages.
Non-minified versions are more convenient to use during development, as well as for studying.
In addition to these files, this archive also includes the icon font "Glyphicons". 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, etc. If you do not want to use ready font, and 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: It is better to include JavaScript files before the 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 do not need to download Bootstrap into the 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")); ));
The advantage of using CSS frameworks is that the layout designer does not need to think about many layout nuances that the creators of the frameworks have already thought through for him. Such nuances include cross-browser compatibility, support for different screen resolutions and much more. The layout designer only indicates what, how and when to show, the rest is done by the framework itself. This approach can greatly speed up website layout. The advantages of Bootstrap include its popularity. This means that it will be easier for another code designer to maintain your code.
The disadvantage of using frameworks is that the page will have to carry the entire framework's extra styles, even if it only uses a small part of them. The framework is an excellent tool for prototyping and creating pages for which design is secondary, such as admin pages. If you have a very specific design, then laying it out using a framework may be more difficult than using native tools. However, this is also possible.
About using Bootstrap Currently, there are several ways to work with Bootstrap styles. Without using LESS For beginners, Bootstrap itself recommends the following approach: you need to download compiled Bootstrap from the site and put it in your project without changing anything. Then you need to create your own empty CSS file and connect it after bootstrap.css.
After this, in order to change Bootstrap styles you need to wrap them in your styles.css something like this:
A ( color: #beceda; )
An obvious disadvantage this approach is that you will have to manually search for the necessary styles that you want to interrupt and this will not always be trivial, because Some Bootstrap options apply to many selectors in modified form, such as through formulas. A little help The Customize tool can help here, it will help compile your changes correctly, but only once. If in the future you want to change some parameter, you will have to re-enter the changed values for all fields in order to compile your styles.
There are a large number of ways to compile LESS files and Bootstrap leaves this up to the discretion of the developer. Bootstrap itself uses Grunt for compilation, you may prefer a plugin for JetBrains products, and we, since the article is aimed at beginners, will look towards more simple solutions. Such solutions are WinLess for Windows, SimpLESS for Mac or Koala for Linux. All these programs do approximately the same thing: they receive a folder with LESS files as input and listen for changes in them. As soon as you make changes to any file, it is immediately compiled into the specified CSS file. This way you don't need to run manual compilation after every change. You change the LESS file, save it and immediately see the changes on the site in an already compiled, compressed form.
Creating a Project The first step is to create a simple file structure for our project.
Preliminary inspection After creating the file structure, open psd file in Photoshop. It is important to carefully examine the template and evaluate it. We need to understand the following things: - How will the images be cut?
- What components will be used?
- What will be the main styles?
- What page layout will we get?
Save the map image:
Let's save the logos as follows:
Images/logo.png
images/footer-logo.png
Repeating background images must be cut out in a small piece sufficient to form a complete image by repeating vertically and horizontally.
/images/bg.png
/images/h1-bg.png
Social network icons with same sizes convenient to save in one file and use as sprites for more fast loading. More details about gluing images are described in the first part. The result will be two files:
/images/social.png
/images/social-small.png
If you take a look at our template, you can see that we will need the following components:
First of all, you need to add variables that are not in the Bootstrap settings so that you can use them in the future. For us this is only a specific design font.
@brand-font: "Oswald",sans-serif;
If you want to use a template for Russian sites, then you can try replacing the Oswald font with the closest Cuprum, which supports Cyrillic.
Now let’s replace the Bootstrap settings with our own:
Now that we're done with the variables, let's start styling our design in the styles.less file. First, let's connect Bootstrap itself and our variables:
@import "bootstrap/bootstrap.less"; @import "variables.less";
Not all Bootstrap's default styles can be changed using variables, so let's do it manually:
P ( margin: 20px 0; ) .form-control ( box-shadow: none; ) .btn ( font-family: @brand-font; )
Here we removed the shadow from the form elements, and specified the specific page font for the text in the buttons.
Then we describe the page background and the top bar:
Body ( border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); )
Further in the text it will not be indicated in which file the styles are written. Just remember that we save all the variables in the file variables.less, and the CSS styles will be stored in styles.less.
Whitesquare
This block creates an HTML5 document structure. In the title we indicate the name of our page – Whitesquare. With the viewport meta tag we indicate that the page width is mobile devices will be equal to the screen width and the initial scale will be 100%. Then the styles file is included. And for versions of Internet Explorer less than the ninth, we include scripts that allow us to display our layout correctly.
Let's add the following code to body:
Here we come across the first Bootstrap component - columns. The parent element of the columns is given the class "row", and the column classes start with the prefix "col-", then the screen size (xs, sm, md, lg), and end with the relative width of the column.
A column can be assigned simultaneously different classes with values for screens, for example class="col-xs-12 col-md-8". These classes simply set the column width as a percentage for a specific screen size. If the column is not given a specific screen class, then the class for the minimum specific screen will be applied, and if it is not specified, then no width will be applied and the block will take up the maximum possible width.
Our classes “col-md-7” and “col-md-17” indicate that the blocks are columns with a width of 7 and 17 relative to the parent container. By default, the sum of column widths in Bootstrap is 12, but we doubled this number to achieve the flexibility we needed.
Body ( … .wrapper ( padding: 0 0 50px 0; ) header ( padding: 20px 0; ) )
We placed this structure inside the body. The LESS syntax allows you to nest rules within each other, which are then compiled into the following constructs:
Body .wrapper (…) body header (…)
This approach allows you to see HTML structure right inside the CSS and gives some “scope” to the rules.
Insert the logo into the header tag:
No additional styles required.
SearchIn order to create a search, we need the following Bootstrap components: inline form, grouped controls and button.
In the header tag we create an inline form, aligned to the right. The fields of such a form must have a “form-control” class and a label.
We place the “grouped controls” component into the form. Grouping controls allows you to remove the space between the text input and the button and, as it were, merge them into a single element.
It is a div with the “input-group” class and fields, and the button of such a component is placed in a block with the “input-group-btn” class.
Since we don’t need to show the label for the search field, we’ll hide it with the “sr-only” class. This is needed for dedicated screen readers.
The “btn-primary” class is added to the button, meaning that this is the primary button of this form.
…Search GO
All we have left is to set the width of the search form in the styles.
Body ( … .wrapper ( … header ( … .form-search ( width: 200px; ) ) ) )
MenuTo display the menu, take the “navigation panel” component and place in it the “navigation” component, which is a list with links. For navigation, a class "navbar-nav" is added, which applies special navigation styles within the navbar.
In order to bring this menu to our design, we will set the following values for the variables:
/*navbar height*/ @navbar-height: 37px; /*set more horizontal padding*/ @nav-link-padding: 10px 30px; /*background for menu items*/ @navbar-default-bg: @panel-bg; /*text color in menu items*/ @navbar-default-link-color: #b2b2b2; /*and when hovering the mouse - the same*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*background of the active menu item is our specific blue color*/ @navbar-default-link-active-bg: @brand-primary; /*text color of the active menu item*/ @navbar-default-link-active-color: #fff;
In addition to customizable parameters, we will describe additional ones in styles - this is uppercase text and our specific font:
Body ( … .wrapper ( … .navbar a ( text-transform: uppercase; font: 14px @brand-font; ) ) )
Page titleThe page title is placed in a div with the "heading" class.
About us
And has the following styles:
Body ( … .wrapper ( … .heading ( height: 40px; background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; h1 ( display: inline-block; color: #7e7e7e; font: normal 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; ) ) ) )
Here we draw gray stripe background on the div, and put an inline h1 into it with in the required font and a background color of the page to give the impression of a transparent background for the h1.
When creating a submenu, we will not use the “navigation” component, since it is not very suitable for us in style; the “grouped list” component is much more suitable for us. Each element of such a component has a class “list-group-item”.
The submenu should be placed in the aside tag. We create a list of links in the same way as the main menu.
In the component settings, we indicate that all grouped lists should be shown with the background and frame of the “panel” component:
@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
And apply the following styles to the submenu:
Body ( … .wrapper ( … .submenu ( margin-bottom: 30px; li ( display: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding : 10px; text-transform: uppercase; &.active ( color: @brand-primary; ) a ( color: @text-color; text-decoration: none; &:hover ( color: @text-color; ) ) ) ) ) )
First, we return the standard styles to the list elements, since Bootstrap replaced them with its own. Add a padding at the bottom. Submenus use thinner fonts and square markers. And for links we set colors, upper case and remove underlining. The ampersand in the "&.active" code will be replaced by the parent selector at compile time using LESS syntax: ".submenu li.active".
To display it, we will use the “panel” component, or rather its variation “panel-primary” for coloring the title. This component contains a header block (panel-heading) and a panel content block (panel-body). We add the “img-responsive” class to the map image, which will allow the image to shrink when the screen width is small.
… Our offices 
In Bootstrap variables we have already set the color for the background of the panel (panel-bg), and now we will indicate that the “primary” panel will have the default panel’s gray border, rather than the default blue one:
@panel-primary-border: @panel-inner-border;
Now you need to change the site styles standard settings panels that are not changed through variables:
Panel ( box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: uppercase; padding: 10px; ) .panel-body ( padding: 10px; ) )
Here we removed the shadow from the panels, added our own indents and set our own heading font.
This page element is most similar to the Jumbotron component. Let's add it to the content column:
“Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”
John Doe, Lorem IpsumThrough variables for the jumbotron component we will set White color text and branded blue background:
@jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
And let's describe our styles:
Body ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; ) small ( text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before ( content: ""; ) ) ) ) )
In them, we remove the corner rounding, component padding, and quote decorations that are set by Bootstrap by default. We will also add styles for our fonts.
Lorem ipsum dolor sit amet…
Donec vel nisl nibh…
Donec vel nisl nibh…
The next step is to add two images that are at the end of the content text. This is done using two columns:
The "thumbnail" class turns images into a "thumbnail" component. He will do all the work of stylizing the images for us. The only thing left for us is to set our padding and border color in the variables for this component:
@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;
Block "Our team"
When laying out this block, let's first add a title:
Our team
with style:
Body ( … .wrapper ( … h2 ( background: none repeat scroll 0 0 #29C5E6; color: #fff; font: 300 30px @brand-font; padding: 0 10px; text-transform: uppercase; ) ) )
And then we’ll add a block with the “team” class, which consists of two lines containing employee cards. Each card is a column. The card has a width equal to four columns of our grid. All cards except the first one in the line have a left indent, which is created by the “col-md-offset-1” class. The card content consists of an image and a description (.caption)
John Doe 
Saundra Pittsley
team leader
…
Ericka Nobriga art director
Cody Rousselle senior ui designer
…After creating the markup, let's give these elements the following styles:
Body ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail ( margin-bottom: 5px; ) ) .col-md-offset-1 ( margin- left: 3.7%; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; color: @brand-primary; margin: 0; ) ) ) ) )
In addition to the indents and font styles that are set here, we changed the “col-md-offset-1” class. He had to set the indent to 3.7% because... the standard indentation was too large.
First, let's create a footer container with these blocks:
And apply the design to it:
Footer ( background: #7e7e7e; color: #dbdbdb; font-size: 11px; .container ( height: 110px; padding: 10px 0; ) )
The footer tag defines a gray area across the entire width of the screen, and the container inside it displays a centered area on larger screens and specifies the height and padding of the footer. We use columns to align blocks inside the footer.
Twitter feed Oct 23
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
Styles:
Body ( ... footer ( ... .container ( ... h3 ( border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand-font; margin: 0 0 10px; text-transform: uppercase; ) p ( margin: 5px 0; ) .twitter ( p ( padding-right: 15px; ) time a ( color: #b4aeae; text-decoration: underline; ) ) ) )
For all footer headings, we set fonts and indents, and also create an underline through the bottom frame. For paragraphs, indicate the indentation. For the link displaying the date, set the color and underline.
Sitemap Home
About
Services
Partners
Support
Contact
We set the links to color, font and space between them.
Body ( ... footer ( ... .container ( ... a ( color: #dbdbdb; ) .sitemap a ( display: block; font-size: 12px; margin-bottom: 5px; ) ) ) )
Social links
We insert a set of links into a block with the “social” class.
Social networks
And let's style them:
Body ( … footer ( … .container ( … .social ( .social-icon ( width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin -right: 10px; ) .social-icon-small ( width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; ) .twitter ( background-position: 0 0; ) .facebook ( background-position: -30px 0; ) .google-plus ( background-position: -60px 0; ) .vimeo ( background-position: 0 0 ; ) .youtube ( background-position: -16px 0; ) .flickr ( background-position: -32px 0; ) .instagram ( background-position: -48px 0; ) .rss ( background-position: -64px 0; ) ) ) ) )
Here we used the sprite technique - when one image file is used for different pictures. All links are divided into large icons(.social-icon) and small (.social-icon-small). We set these classes to display as an inline block with fixed dimensions and the same background. And then with using CSS We moved this background so that the corresponding image is displayed on each link.
![](https://viws.ru/wp-content/uploads/2019/04/" alt=)
Copyright 2012 Whitesquare. A pcklab creation
Styles are done similarly to the previous blocks, with the only difference being that the block is nailed to the right edge and the alignment inside it is also to the right:
Body ( … .footer ( … .container ( … .footer-logo ( float: right; margin-top: 20px; font-size: 10px; text-align: right; a ( text-decoration: underline; ) ) ) ) )
This completes the layout. The finished project can be downloaded
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 like. 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 the main 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 the responsive grid. 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. General rules Working with a grid is 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 template: header, main part, right column and footer, then there are 3 columns. The first will have only the header, the second will have the content and sidebar, and the last will have the 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 path to fast adaptive layout will be open to you.
To do this, scroll through the documentation just below, there you will find a table that contains important grid properties.
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 class, which 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 resets. 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, on mobile devices, sites appear 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...
Nested Bootstrap 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):
Missed another one 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 to the desired block. If you need to hide it, just specify the following class:
Footer
What will the hidden-xs class do in this case? 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 1 more very good welcome— the ability to move the 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, offset the block to the left by 33% of the width of the parent container (1/3 left offset, 1/3 block width, ⅓ right offset, 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 simply go to the documentation, copy the code of the desired component there and, if necessary, change it to suit your needs. 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 you can very easily make not just an adaptive menu, but a so-called mobile one, which is completely collapsed on small screens and hidden under one button. This technique can be seen in many adaptive templates and it's 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 have added a logo to the menu, two simple item, drop-down item, search form. 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 the standard bulleted list. That's it, everything is quite simple, you can use this code to implement drop-down items.
Adding Breadcrumbs (Breadcrumbs) Using BootstrapIn many stores you can find a so-called block of bread crumbs, which contains the full path to the 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 is how you can remove the 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.
