Twitter Bootstrap based user interface for beginners. Installing bootstrap Selecting the necessary components
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 filesThe fastest way to 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 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.*). 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 interface components: 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 componentsTogether, Javascript components and plugins contain the following interface elements:
- 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'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 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.
Hello! In this article I will tell you how to install and connect the Bootstrap framework. You can read about what Bootstrap is.
I have already said a lot about the standard installation in previous articles. Everything is simple here. We go to the official website getbootstrap.com, click on the Getting Started item and select the very first option. Thus, we download the full version of bootstrap with all js and css components.
Bootstrap CDN is an opportunity to connect the framework from a CDN storage without downloading its files to your computer. Naturally, in this case there can be no talk of any customization.
Framework customizationBut the fact is that bootstrap contains many components by default, and some of them simply may not be useful to you when developing a specific site. For example, you are designing an online store. You may not need modals and tooltips, and you may not need many of the css components. In this case, it would be wise not to include these components in the framework.
Or you are creating a simple blog. Let's say you don't really need anything there at all, so you can leave only the mesh and a couple of the most important components.
Choosing only what you need is a professional approach to creating websites and using Bootstrap. By default, the uncompressed version of the framework's CSS styles in the latest version weighs 143 kilobytes. And scripts are more than 60 kilobytes. Yes, if you compress the code, you can reduce the weight by 20-40%, but still the files will not be the lightest.
If, for example, you disable all components and leave only the grid (this is very often done), then the weight of the css will be only 15-20 kilobytes, and in compressed form another couple of kilobytes less. This way you will achieve maximum speed and optimization of your project.
Okay, that was just a theory. To customize the framework, visit the same official website and go to Customize.
Selecting the necessary componentsThe first step here is to configure which components you want to include in your version of Bootstrap. Let's start with the CSS:
Print Media Styles – media queries for printing. If you do not plan to print site pages, you can disable it.
Typography, code, tables, forms and buttons are all things that you can style in CSS yourself if you really want. Of course, this will take time, but if the design of your elements is very different from what the framework offers by default, you can disable all these CSS styles and write them yourself.
Grid System is actually a grid. I don’t see any point in ever disabling it, because this is the main power of the framework. It is thanks to the grid that you can easily adapt templates to any device, and today in the age of mobile traffic this is extremely important. We do not turn it off under any circumstances.
Responsive utilities – adaptive utilities, I also recommend never disabling them. We will talk about adaptive utilities in the next article, where we will look at the grid system in detail. These are classes that allow you to hide an element or make it visible at a certain screen width. Very convenient and useful.
These are, for example, things like list groups, button bars, icons, panels, alerts, pagination, breadcrumbs, etc. You can also disable the icon font. This is worth doing in the case when you do not need icons on the site at all, or you are connecting another set. Actually, you should sit and think about what you need from all the components presented and what you don’t. Each individual site will have its own set, because each site has a different design and functionality.
Javascript components
These are drop-down menus, tooltips, modal windows, and sliders. If you don't need any of this, turn it off. In some cases, all components can really come in handy when your site has a drop-down menu, a slider on the main page, and modal windows. In some cases, at most 1-2 components may be useful, then there is no need to lengthen the code, disable unnecessary components.
Jquery pluginsHere you can disable jquery library plugins that help javascript components work correctly. Accordingly, if you do not use a slider on your site, then you do not need a plugin for creating carousels, if you do not need tooltips, then disable tooltips.js, etc.
The scrollspy plugin monitors the position of the text and, depending on this, highlights one or another menu item. Usually such a feature is needed on landing pages; I have practically never seen it on regular sites. And so on. Take a good look at what you need and what you don't.
Less variablesNext, a huge item will open in front of you, in which there will be a lot of sub-items with settings for Less variables. Here you can change almost everything: colors, font sizes, breakpoints, number of columns in the grid, indents, etc.
Of course, to do this you must know at least the basics of Less or at least intuitively navigate these forms.
For example, if you see the @font-family-base variable, then you need to at least intuitively understand that it is responsible for the name of the font, which is the base font on the site. Well, the @font-size-base variable sets the base font size. By default in bootstrap it is 14 pixels.
You can edit all these fields. Just change 14 to 20 and now you can download a framework in which the default font size is 20 pixels. Accordingly, you can immediately adjust the size of the headings, etc.
Setting up the gridThe settings of the grid system are also very interesting for us, here they are:
As you can see, you can change the number of columns and the width of indents between them in a few seconds. The grid-float-breakpoint variable sets the point at which the mobile menu collapses into an icon.
If you change the value, for example, to @screen-md-min, then already at a width of 991 pixels or less, collapsing will occur. You can also remove this variable and write the value in pixels. For example, 520 pixels. Then collapsing the menu will only occur on smartphones and mobile phones.
Actually, the Bootstrap customization page has a lot of settings, but in general this method of customization (using the Customize page on the official website) is not the fastest and most convenient. Next I will show you the fastest way.
Use the Customize page when you need to make 2-10 changes to the framework, or simply disable the necessary components. If you are going to change many more values, you need to use a different method.
Actually, when you configure your version of the framework, click on the big button at the very bottom of the page. It will compile a version of Bootstrap for you and download it to your computer. Then all you have to do is connect and use. I have already talked about connection in previous articles (including how to do it on WordPress).
Downloading Less sources and editing themAs I already said, if you need to make a lot of edits to the source code of the framework and you want to see the changes instantly, then you will need less sources. You can download them in the same place as the full version of the framework - in the Getting Started section.
To work with Less sources and edit them you need:
At least some knowledge of css and less or another preprocessor
Less compiler (can be downloaded for free)
Actually, I will not dwell in detail on customization through less sources, but this is the best method, because you will not need to go to the Customize page 100 times and compile more and more new versions of the framework.
Bootstrap theming or changing the appearance of elementsBy default, in the full version of the framework, you can also find the bootstrap-theme.css file in the css folder. It is not necessary to connect it to the site. What functions does it perform? The file is needed solely to, if necessary, change the styles for the elements you need.
This same role can be fulfilled by your own style.css, in which you can also override styles. Bootstrap-theme is not a required file, it is used rather for order. For example, you have 3 files:
bootstrap.css – of course, this is the code of the framework itself;
bootstrap-theme.css – here you override styles for bootstrap elements;
style.css – write styles for your elements in this file.
Then you will have order in the code and in the project structure. But no one forbids you to perform all operations in a single file - style.css and not to use the theme file at all.
The most important thing is to include the theme file and your own css in the html markup later than the file with the framework code, so that the styles are successfully overridden.
An example of how theming worksAs I already said, by default Bootstrap includes a bootstrap-theme file. Try connecting it. I note, connect after the main file.
By default, buttons in Bootstrap look like this:
And this is how their appearance changes after connecting the file with the theme:
As you can see, a slight gradient appears. Accordingly, you can rewrite the code in the bootstrap-theme file and get your own styles for the buttons. But you may ask, why not make these changes directly in bootstrap.css? Well, the fact is that new versions of the framework are constantly being released, and if you decide to upgrade, it will be difficult to implement your changes into the new version. It is considered good form for a developer not to touch the source code when you can create a separate file and describe the changes there. It's much smarter and more convenient.
How to install new Bootstrap themes downloaded from the Internet?There are quite a lot of sites, mostly foreign, where you can download a bunch of themes and templates for free. To avoid confusion, let's consider a website designed using Bootstrap as a template, and a theme as a set of CSS rules that override the standard appearance of elements.
Such themes can be downloaded, for example, from bootswatch.com/, and using a search engine you can find dozens of others.
The general principle of installing such themes depends on the site where you download them. If you can download it in bootstrap-theme format, great, download it and connect it. On bootswatch, for example, you need to download bootstrap.css and replace your standard framework style file with it. There is also an option with less sources.
Starting with this article, we will begin to study the Twetter Bootstrap 3 framework, which is most often used for creating websites, admin panels, landing pages and web applications, as it ensures ease of development, clear structure and adaptability of pages.
Installing a Basic Bootstrap 3 TemplateTo use Bootstrap 3 tools and methods, you need to go to http://getbootstrap.com and download the archive with the css, fonts, js folders and the corresponding files inside them.
If you don’t know how to connect CSS styles and js scripts, I recommend looking at this and this article, and in our case, CSS styles are connected in sections
and scripts before the closing tag
at the bottom of the page.I would also like to note that using the bootstrap.min.css and bootstrap.min.js files will benefit your site, since these files are smaller in size and will have a positive effect on loading speed.
Connecting fonts fonts can be done in two ways:
The second option is preferable, but no matter which method you choose, the connection will proceed like this
@font-face( font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- regular.ttf); ) h2( font-family: glyphicons-halflings-regular,sans-serif; )
or rather in the style tag for the first method, and insert all the text inside it into the css file for the second.
jquery installationFor Bootstrap 3 to work properly, you will need to additionally download the jquery library file from the official website jquery.com via the link and place it in the js folder of your site.
The jquery connection happens before the closing tag
Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
, but before the bootstrap.js file
since jquery should load before bootstrap.
Bootstrap 3 grid and screen sizesThe basis of Bootstrap is a set of classes on which a 12-column grid (col-) is built. Within the grid, 5 types of screens are supported -xs- -sm- -md- -lg- -xl-.
- -xs- screen size less than 575px;
- -sm- screen size more than 576px and no more than 767 px;
- -md- screen size more than 768px and no more than 991 px;
- -lg- screen size more than 992px and no more than 1199 px;
- -xl- screen size more than 1200px;
Thus, a div with class col-lg-12 means that on a large screen the div column will take up 12 columns or 100% of the width, similarly a div col-sm-6 on a smartphone screen will take up 6 columns or 50% of the width.
Types of mesh containers. Rubber layout layoutThe main types of containers for a grid are the container and container-fluid classes.
When used inside a container, your grid will visually occupy a third of the screen in the center, with all 12 columns located in this area.
By placing the grid in the container-fluid class, all layout elements will be located across the entire screen, like a rubber one, and as the width decreases, they will move towards each other.
There is no specific recommendation for using container and container-fluid, since everything depends on the design layout and the purpose of the layout, however, it is appropriate to use container-fluid for the admin panel of a site, and container.
In addition, the -fluid class can be applied not only to the container class, but also to the row string, to arrange elements in a row. However, if you place the row-fluid in a regular container, you won’t notice the difference. This combination is best used outside of the div.container, like this:
Hi, I'm a Bootstrap 3 template
My container is not fluid!
And I'm row-fluid! Lines for placing elementsThe row class is used to place grid elements in one row, this allows you to arrange them horizontally, but you need to take into account that the sum of the indices in the row should not be more than 12, otherwise the last element will be shifted to the second row.
Heading 1 Heading 2 Heading 3
If you reduce the browser page size, the headings will line up in a vertical list from a horizontal row.
Element visibility classesThe Bootstrap 3 layout system provides additional classes for showing or hiding elements on different devices and screens. They are designated as visible-*-* and hidden-*.
The class for displaying visible-*-* after the first dash there is usually a screen type identifier (xs, sm, md, lg, xl), and after the second dash the column size (1-12). For example, visible-lg-6 - the element is visible on a large screen, 6 columns wide.
Hiding class hidden-* After the dash there is a screen type identifier (xs,sm,md,lg,xl), for example, a markup element with the hidden-xs class will not be visible on small devices (screen size less than 575px).
Combining these elements will allow you to show or hide div containers:
Heading 1 Heading 2
The first title will be visible on large devices, while the second will disappear on small screens. To do this, reduce the size of the browser window so that the size is similar in width to the screen of a mobile device.
Also in the div container in the class, specify show or hidden, but in this case the display properties will not change when the screen changes: if visible, then it is visible, if hidden, then only removing the word hidden from the class will allow you to see the desired element.
Media queries in Bootstrap 3In order to use CSS media queries, you need to specify the special symbol @media in the css file and the minimum and/or maximum screen width in brackets. If in regular css markup you need to write screen sizes in pixels, in bootstrap 3 you can write the following construction:
@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- min)( ... )
Shifting the order of elementsAnother interesting class that allows you to move blocks inside a container, the push class will move the element to the right, and the pull class to the left.
When combining from adjacent containers, you can change the order of the latter when changing screen sizes. In this example, on a large screen (-lg-) Heading 2 is located on the left and Heading 1 on the right, when the screen width is reduced to medium size (-md-), the elements will shift and the order will become sequential.
Heading 1 Heading 2
Let me conclude this first acquaintance with the Bootstrap 3 layout system; you have learned how to install template styles and scripts, basic grid elements, media queries, container types, etc. In the following articles we will look at auxiliary and additional elements: menus, buttons, sliders, icons and much more.
February 24, 2012 at 09:25 pm Twitter Bootstrap based user interface for beginners- Web design
Introductory In my free time, as a hobby, I develop a one-page aggregator of interesting news feed headlines. At some point, the basic functionality of the prototype was ready, the only thing missing was the checkbox next to the “Design” task. Statement of the problem To get a beautiful user interface without mastering the magic of a designer (you only have basic knowledge of paint) and a programmer (you only have basic knowledge of html and css) .
The page consists of the following elements
- Name
- Form for sending a link to the news
- Form for sending a unique reader code by e-mail
- Unique reader code entry form
- List of news grouped by date (date, time, title-link, number of clicks, news can be read or new)
- Link to rss
- Link to chrome extension
- release id
- feedback email
... ...
The second line is needed to automatically adapt the interface to devices supported by Bootstrap. Step 2. Design the “meat”. By “meat” I mean the news list. The easiest way to do this is to use a table with frames disabled. The first column is the date (only once per group), the second column is the time, the third is the title and the number of transitions. All this, according to Bootstrap rules, needs to be packaged in a container:
| (Date of) | (Time) | (Title) ((Number of transitions)) |
For read news we indicate a special class:
(Headline) Step 3. Form for sending a link to the news. Here again everything is simple, Bootstrap provides several ready-made form styles: a regular form, a one-line form, a search form... We need a second one, add it to our container in front of the table:
Add ...
class="span10" - Bootstrap assumes building an interface based on a grid of 12 columns; our elements can be aligned along it. Through the scientific method of trial and error, I arrived at the input field width equal to 10. Step 4,5,6. A cap. My ideas about how a user-friendly website should look suggest a minimalist style: everything unnecessary is hidden, everything that could not be hidden is pale. We hide the forms in a drop-down menu, make links to rss and chrome extension pale. We pack all this into a header, which we glue to the top of the site (class = “navbar navbar-fixed-top”):
*** ...
The forms themselves:
... × Send a unique code by e-mail Cancel Send × Enter a unique reader code
Allows you to synchronize news read on different computers.
Cancel SendImportant point. For this to work, you need to connect a couple of scripts:
...
...
release 2012/02/19 23:49 *****
ResultEpilogue Twitter Bootstrap made it possible, without much effort and knowledge, without writing a single line of CSS and without much breaking of the html code, to get a very nice prototype interface that you are not ashamed to show to people. If you are interested, in the next article I will tell you how, without deep knowledge of PHP + MySQL (with only basic programming skills), you can implement functionality that allows you to show your million-dollar idea not just on paper, but in the form of a working prototype.Thank you for your attention!
UPD: I don’t want to remove the topic in “I’m PR”, I removed all the unnecessary links
Guys, I think Bootstrap is a very cool thing. I will try to explain why this is so in this article. Well, let's go. I immediately apologize for the fact that almost the entire first half of the article is written without pictures, there is only a theory, an explanation of how the grid works. But this is very important! Anyone of you who needs it will take it into his hands, read it, and, I hope, understand. 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. Let me give a brief overview of 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. 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 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:
Header Content... and Footer sidebar
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 most important issue related to 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 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.
Header Content Sidebar 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 Sidebar
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...
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:
Product 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 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.
Move me all the wayNext 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, 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 responsive templates and is actually very easy to implement. The example mobile menu code 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.
Drop-down menuAt 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 a more detailed look:
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.
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:
