that you can use it in any way, edit the source code and alter the framework as you like. It is perfectly.
Installing Bootstrap
I will not dwell on this topic in detail, because I have already written a separate article about the installation -. Installation on wordpress is described there. If you just need to connect the framework files to an html document (for example, for practice), just download the framework from the official site getbootstrap.com, copy its files into the project and connect the ones you need. I will do short review these files:
- bootstrap.css and bootstrap.min.css are uncompressed and compressed versions of the css code of the framework. It is recommended to connect to the working project compressed file, this way you will slightly improve the download speed. But if you plan to view the code in a file, include the uncompressed version.
- bootstrap.js and bootstrap.min.js - file with scripts
- the fonts folder and in it the glyphicons files is the Bootstrap icon font. It contains about 200 icons. For most cases, they will be enough for you, sometimes you need to connect others. We'll talk about the icon font later.
This is the standard set of frameworks. In fact, you can easily customize and change it for yourself. For example, do not use scripts at all or connect only the grid. In general, we will also talk about this.
Bootstrap Russian Documentation
By going to getbootstrap you probably noticed that everything is in English. The Russian help on the framework would be useful to us. Finding it is easy. To do this go with home page to section Getting started... Scroll to the 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-language version of the site. True, not everything is translated here, but somewhere 70-80% is accurate, so you can figure it out.
Bootstrap mesh
Whatever one may say, the main element of Bootstrap is the responsive grid. In general, without it, the framework would have lost almost all of its value, therefore it is thanks to the grid that you can quickly create responsive templates. At the same time, you may not be familiar with media queries at all, you do not need them, because the framework takes over the implementation of adaptability, you just need to set 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 section CSS - Grid System. General rules working with the mesh is simple, now I will list them.
How to work with a grid?
Imagine it as an html table. If you've ever written html code for tables, then you know that all content is placed in the table tag, one row is placed in the tr tag, and the cells are already placed in it - td.
So, everything is the same in the grid. The container class serves as a general container for the grid. There are 2 variants of the bootstrap mesh - completely rubber and still having a finite maximum width. So, when setting the container class to the general block, the site will have a maximum width of 1170 pixels. It will not expand anymore. Naturally, the content will be centered.
If you set the class container-fluid, then the mesh will be completely fluid, that is, there will be no size restrictions. For example, if a person opens a website on a 1920px wide monitor, he will see it at its full width.
Accordingly, the first step in developing a website is to decide what the template will be - completely rubber, or its width still needs to be limited.
Great, a row of grid should be placed in the container block. All blocks that are on the same line need to be placed in it. That is, if we take the most typical template: header, body, right column and footer, then there are 3 columns. The first will only have a header, the second will have content and a sidebar, and the last will have a footer. The markup for such a site would be something like this:
But for now, this is the wrong markup, because it is missing ... what? That's right, cells! In the case of Bootstrap, they are also called columns. The bootstrap grid has 12 columns. It can be embedded in any block of any width, at least 1200 pixels, at least 100. 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 question related to the framework. Believe me, if you get it, the rest is bullshit. The main thing is to understand how the grid works, and the path to a fast responsive layout will be open for you.
To do this, scroll down the documentation 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 just never write col-. Bootstrap has 4 special classes that are designed to control the size of blocks at different widths, here they are:
- ld - for large screens over 1200 pixels wide (desktop computers);
- md - for medium screens, width from 992 to 1199 (computers, netbooks);
- sm - for small screens, width from 768 to 991 pixels (tablets);
- xs - extra small screens, less than 768px wide.
These are 4 classes, well, numbers from 1 to 12 are used to control the size of the elements, because, as you remember, there are exactly 12 columns in the grid.
It is quite simple to understand it. First of all, we create a header, it does not need to be placed in the grid at all, since it will occupy 100% of the width anyway (usually). But we will still place. What is this col-md-12 class? As I already told you, just col- nobody writes, with this class we, in fact, tell the browser:
This is a cell | speaker
On medium devices (class md), its width should be 12 columns out of 12, that is, 100% of the row width (row).
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 screens 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. Here is such a feature, remember it.
Well, if the width value is not saved on smaller screens, then what happens? It is reset. This is how it works:
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, the width will be reset to 100%. So, remember one more simple rule: If nothing is specified for smaller screens, then the block will be displayed on them at 100% width.
Basically, we tell 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 100% occupied. This is correct, usually on mobile devices ah sites go exactly in 1 column.
Let the side column be one third of the row width on the same small, medium and large screens, but on the smallest ones, as you already understood, its width is also reset to 100%. It's that simple.
Well, there is nothing to understand with the footer. Well, basic principles We have analyzed the work of the grid, but we still need to see how it works ...
Bootstrap nested grid
The fact is that now with you we have split the template only into main blocks, but they can also have a division into columns inside them. For example, the content can display products in several columns. How to be? It's very simple - we create the exact same mesh inside. It will be nested, but it also contains 12 columns. If we summarize all this, then here is the conclusion we come to:
Any block can contain an unlimited number of grids. For example, in the block with goods, a grid for dividing goods, in the block with one item itself, you can create another grid, for example, to divide the price, information on availability, and additional. 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 the content:
And we write to it:
Product Name
Product description
As you can see, we have created inside the content new grid- put a row inside, and in the row there will already be 3 blocks with goods. Just copy the col-sm-4 block with the product card and paste it 2 more times, you get this (you can take any picture of the product, I took a large one):
I missed one more important point, so that the images adapt to the blocks in which they are located, each of them needs to be assigned the img-responsive class. If you, like me, think that this is inconvenient to do, then just write in your own style.css like this:
Img (max-width: 100%; height: auto; display: block;)
Everything, save this code and connect your css file to the project. Pictures will now be responsive by default.
Well, did it work out quite smoothly? Yes, and 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 it unnecessary? Because the block in which the grid is created serves as the 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 utilities
This is another great bootstrap feature. It consists in the fact that you can hide or make visible any blocks at the width you need. For example, completely hide the sidebar on narrow screens, add some new elements on mobile devices, add a column on wide screens, etc.
There are a lot of applications, but I did not tell you about the most important thing, how to use these utilities? To do this, just add classes to the required block. If you need to hide it, you just need to specify a class like this:
What will the hidden-xs class do in this case? It will hide the footer on extra small devices. For 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, the classes of adaptive utilities are written like this:
- The word hidden or visible, whichever you want
- The abbreviation xs, sm, md, or lg, indicating which screens to hide or show the block on.
- For visible, you also need to add one of three values: block - display the element as block, inline-block - as inline-block, inline - inline.
Well, a couple of examples to make it clear:
- hidden-xs hidden-lg - will hide the element on the smallest and largest screens. As you can see, you can specify several classes separated by a space.
- visible-xs-inline visible-md-block - on small and large screens, the element will not be displayed at all. On extra small ones it will be lowercase, and on medium ones it will be a block.
- visible-lg-block - the element will be visible only on the largest screens, on all others it will be hidden
This is how it works. Exactly this way and nothing else. Hope you get it. Let's fix it in practice. We have a test pattern, albeit a very primitive one.
Task: make it so that the sidebar disappears on small screens, and one product disappears on the smallest screens. And so that on xs devices the products are already in 2 columns, and not in 3.
Try to do it yourself, editing only the html-code. What needs to be done? First, let's deal with 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 product block will disappear at this width, both product blocks will be neatly arranged in 1 row, like this: 
Fine! Having understood this, you can already manipulate the blocks on the web page in almost any way you want. Try to come up with tasks for yourself and implement them.
Move me completely
Next I will show you 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 take up the entire width. And your task is to align it to 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 nudged 4 columns to the left on medium and large screens, and 3 columns on small screens. This is how it looks:
The col-md-offset-4 class says: on medium and large screens, move the box to the left by 33% of the width of the parent container (1/3 padding to the left, 1/3 padding to the box, ⅓ padding to the right, resulting in centering).
Class col-xs-offset-6: on extra small and small screens, shift left by 25% (¼ left margin, ½ block width, ¼ right margin).
I hope you get the point and apply these classes if necessary.
Bootstrap components and examples of their use
I congratulate you. We've just gone through the most important framework-related topic. It is the mesh and working with it that are important. Working with components already means that you just go to the documentation, copy the code of the required component there and, if necessary, change it for yourself. But I will still give you a few examples of how to use components.
Fast floats and wrap cancellation
The pull-left and pull-right classes allow you to quickly float any block by sending it to the left or right. Do not forget about the cancellation of the wrapping. You can use the clearfix class for this.
Bootstrap: Horizontal Responsive (Mobile) Menu
We 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 for me.
Actually, on Bootstrap it is very easy to make not just a responsive menu, but a so-called mobile menu, which completely collapses on small screens and hides under one button. This can be seen in many responsive templates and is actually very easy to implement. The code for the example mobile menu is in the documentation, I'll take it from there and redo it a bit.
So, the first thing I do is remove the header block, because our menu, in fact, will be the header in the case of my template. The menu code should be placed in front of 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:
The fact that there is a lot of code, do not be alarmed by this. This is how the site looks now: 
But if your menu will not occupy 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:
As you can see, we added a logo to the menu, two simple items, a drop-down item, and a search form. That is, there are a lot of elements. You can easily customize the menu for yourself by adding your own classes. But for now, my goal is just 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 menu
At the same time, from the example above, you can understand how a drop-down menu item is done in Bootstrap, let's pull out this code for more detailed consideration:
Simulators
So, the container for the dropdown 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 prescribe to her data-attribute that you see in the code, nothing will work without it. You also need to make sure the bootstrap.js file is connected to your webpages.
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, but below the menu itself is formed using a standard bulleted list. That's it, everything is simple enough, you can use this code to implement dropdown items.
Adding breadcrumbs with Bootstrap (breadcrumbs)
In many stores, you can find the so-called block of breadcrumbs, which contains the full path to the current page. With the help of a framework, this is also easy to do, see the code.
Bootstrap is a special framework (i.e. a set of tools) that includes HTML, CSS and JavaScript solutions. The main idea of this framework is to conveniently create web projects that have adaptive property. Adaptability in this case means that the layout of the web document should be adjusted to the device that displays it - PC, tablet, smartphone, etc. The visual design of the individual elements of the web page layout is also included in the framework.
Connection ... To connect the framework, you either need to download a package of files and connect them in the tag , or connect them remotely - in the same place. For example,
To display the content of the page in the framework, the so-called. grid system ( grid system ), which allows you to create (by default) up to 12 columns (and corresponding rows) per page, and this design may depend on the device on which the page is viewed.
For example, for medium-sized devices ( medium devices ), it is possible to define columns like this:
That will mean two columns, the first of which has a conditional length of 8, and the second - 4 out of 12. These values obviously add up to 12. In fact, the width of the column is set proportionally. Another example:
Means that there will be 3 columns of the same width. Or
Means 1 column stretched across the entire width of the screen.
Obviously, a mockup designed for a PC will not fit on a mobile device. The above layouts on a mobile device will not be displayed in columns, but one below the other - because they will not have enough horizontal space. The framework has developed special classes for working with mobile devices. These classes can be specified for an alternate layout in the case of a mobile device ( xs - mobile devices, sm - small devices ). For example,
Means that there are two cells in the layout, but the proportion of their width will be different when displayed on a PC or on a mobile device: 8 and 4 on a PC in one row, or 2 and 10 on a mobile device. In total, both pairs of values give 12, therefore they will be placed on one line.
Menu creation. To create a menu, use the class nav (buttons or links are placed in the block of this class) and the class navbar into which the finished navigation is placed. For example,
Navbar - adaptive component that is used as a block with site navigation.
The adaptability in this case lies in the fact that these components "collapse" when displayed from mobile devices, if the navigation items do not fit horizontally.
Hello everybody! Everyone who works on the design and functional part of their blog, at some point thinks about how to speed up and simplify this process. Frameworks serve this purpose. These are special libraries that make it possible to use already written code snippets that are valid and cross-browser compatible. Today I would like to present to your attention one of such solutions - Bootstrap. Within the framework of this article, we will not study in detail all the subtleties of working with it. Our task is to learn about its main advantages, how to connect Bootstrap to WordPress and how to edit blog styles and structure using this framework.
What is Bootstrap?
Bootstrap is a free framework on css base and JavaScript, which provides a range of built-in tools for creating responsive websites, or rather their front-end development. It was originally created for internal use by Twitter and bore the name "Twitter Bootstrap", but later grew into a standalone project. This library can be used with both static html files and different systems content management in which external styles are supported.
You can edit or even create yourself using Bootstrap's capabilities, WordPress theme for your blog. To do this, the arsenal of the framework provides everything you need and defines the basic styles for the main components that can be used on the site: navigation and forms, modal windows and notifications, accordions and carousels, drop-down lists and much more.
On the Internet, you can find many diverse resources made with this library. Readers of my blog will most likely be interested in Bootstrap WordPress Themes. In Runet, you will find a large number of themes based on the framework, including free ones. They are distinguished by their stylish design and functionality.
What makes Bootstrap popular with developers? Let's look at a number of indisputable advantages that we get in working with it:
- open source, that is, all functionality is provided completely free of charge;
- built-in 12-column grid. It is enough just to add the required class to the html-element in order to set it to positioning relative to other objects and the page framework;
- adaptability. Earlier I wrote about why and why it is definitely necessary to do it. In Bootstrap, this option is enabled by default and assumes site optimization for desktop devices, tablets and smartphones. In addition, you can manually install any extension options yourself;
- variability in the design of the most frequently used elements on web pages. Using special classes, you can easily control the display and behavior of events, tabs, buttons, and more. There are also ready-made solutions for dynamic elements. So, for example, to create a slider, it is enough to find the necessary code in the documentation, copy it and place it on your blog, replacing the pictures from the example with your own. How this works in practice, I will show you further on the example of installing the Bootstrap menu in WordPress;
- icon font. A nice bonus in the form of several hundred Glythicons icons in vector graphics;
- customization, i.e. the ability to selectively use certain features of the framework, for example: connecting only the grid and fonts to the project, or only media, or a combination of several options;
- ease of customization - standard styles redefined simple creation new css rules, without applying " ! important»;
- excellent documentation with examples. Despite the fact that the official site is in English, it will not be difficult to find its Russian-language counterpart on the Internet.
The main disadvantage in working with the library can only be that when editing or creating a responsive WordPress theme, Bootstrap components cannot be simply added from the CMS console. Using them will require inserting additional code or installing auxiliary plugins.
Connecting the framework to WordPress
First, download the library from the official site - https://getbootstrap.com: click "Download Bootstrap" and in the "Getting started" tab that opens, select the "Download Bootstrap" option. Bootstrap 3 remains the stable version at the moment, but the fourth version has already been released in testing mode. It has some differences from the current one, but if you study Bootstrap 3, then the updated version of the framework will not raise any questions.
We unpack the archive and see 3 main folders: css, js, fonts... Files containing "min" in their name are no different from those of the same name without this particle. It means that the code is written without spaces, in one line, to reduce the weight of the file without loss in functionality. This format is unreadable, but it is precisely this format that is often connected to the project. This has a positive effect on. In folders css and js there are styles and scripts files, respectively, and in the folder fonts- the same vector icons that were mentioned above. Basically, we see one font here, presented in several formats.
One of convenient ways placing framework files in a project - creating a separate folder. To do this, at the root of the site in the directory wp-content - themes - your_theme_name a folder is formed libs, where in the future other libraries used in the project may be located. And already in it is a folder bootstrap, where we copy all the content extracted from the archive.
As we noted earlier, it is possible to download only individual Bootstrap functionality, such as a grid or icons. This is implemented on the "Customize" official site page.
Here you need to uncheck those components and plugins of the library that you do not want to connect to the project. And then scroll down the page and download your custom Bootstrap by clicking Compile and Download.
Additionally, to override the bootstrap styles and "native" styles of the theme, you can create in the template folder in the directory css file style.css... If you are not familiar with the structure of the WordPress template, this article is a must-read.
To connect Bootstrap to WordPress, open in text editor file functions.php which lies in the directory of your active template. We find the function of connecting scripts (it can be called, for example, functiontwentysixteen_scripts () (), by topic name) and paste the following code:
| 1 2 3 | // Bootstrap stylesheet. wp_enqueue_style ("bootstrap-style", get_template_directory_uri ()., array (), ""); |
// Bootstrap stylesheet. wp_enqueue_style ("bootstrap-style", get_template_directory_uri (). "/libs/bootstrap/css/bootstrap.min.css", array (), "");
- this line connects the minimized style file of the framework. The first parameter of the function ( " bootstrap— style") - arbitrary name of the connected object.
The next parameter ( get_ template_ directory_ uri() . "/ libs/ bootstrap/ css/ bootstrap. min. css" ) - the path to the file. Here using the function get_ template_ directory_ uri() we get the path to the folder with the active template, and then "dock" directly the path to the file in this template - . "/ libs/ bootstrap/ css/ bootstrap. min. css" .
We continue to paste in the code:
| 1 2 3 4 | // Mytheme stylesheet. wp_enqueue_style ("mytheme-style", get_template_directory_uri (). "/css/style.css", array (), ""); |
// Mytheme stylesheet. wp_enqueue_style ("mytheme-style", get_template_directory_uri (). "/css/style.css", array (), "");
- in a similar way, we include our own stylesheet, in which we can change the rules of Bootstrap. Please note that for this to be possible, our styles must be loaded after the framework styles. Those. you need to place this line of code so that it is located after the code responsible for linking the library styles.
And the last line we need to connect Bootstrap to WordPress:
| 1 2 3 4 | // Bootstrap js wp_enqueue_script ("bootstrap-js", get_template_directory_uri ()., Array ("jquery"), ""); |
// Bootstrap js wp_enqueue_script ("bootstrap-js", get_template_directory_uri (). "/Libs/bootstrap/js/bootstrap.min.js", array ("jquery"), "");
- at the end we include the minified script file. Here we need the third parameter of the function - array (), which is responsible for the order in which scripts are connected. The point is that Bootstrap depends on the jQuery library. If at the moment when the server loads our framework, jQuery is not yet connected to the project, the Bootstrap scripts will not work. We don't need to load the jQuery library itself, since WordPress does it automatically. But for the connection to occur in the sequence we need, we will define that Bootstrap js scripts must always come after jQuery. This is exactly what the line does array ("jquery").
If you are creating a Bootstrap WordPress theme from scratch, or you just do not want to mix all the scripts in one place, I suggest you create a separate function to connect Bootstrap 3 to WordPress. At the end of the file functions.php place the following code:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function load_bootstrap () (function load_bootstrap () (// Bootstrap stylesheet.wp_enqueue_style ("bootstrap-style", get_template_directory_uri (). "/libs/bootstrap/css/bootstrap.min.css", array (), ""); // Mytheme stylesheet. wp_enqueue_style ("mytheme-style", get_template_directory_uri (). "/css/style.css", array (), ""); // Bootstrap js wp_enqueue_script ("bootstrap-js", get_template_directory_uri (). "/libs/bootstrap/js/bootstrap.min.js", array ("jquery"), ""); ) add_action ("wp_enqueue_scripts", "load_bootstrap"); |
function load_bootstrap () (function load_bootstrap () (// Bootstrap stylesheet. wp_enqueue_style ("bootstrap-style", get_template_directory_uri (). "/libs/bootstrap/css/bootstrap.min.css", array (), ""); // Mytheme stylesheet.wp_enqueue_style ("mytheme-style", get_template_directory_uri (). "/Css/style.css", array (), ""); // Bootstrap js wp_enqueue_script ("bootstrap-js", get_template_directory_uri (). "/libs/bootstrap/js/bootstrap.min.js", array ("jquery"), "");) add_action ("wp_enqueue_scripts", "load_bootstrap");
- where load_ bootstrap() - an arbitrary name of the function we have created, and the last line gives it to the engine for execution.
Key features of Bootstrap and how it works
To understand how WordPress and Bootstrap can interact, let's take a look at how the framework works.
So, in the Bootstrap style file, special classes are written that are added to the html markup, thereby determining the display or behavior of elements.
Layout: containers and cells... Bootstrap's markup framework is based on the nested element block system. The highest-order containers that act as wrappers are formed by adding classes to them .container or .container-fluid, depending on whether we want to get a block with an adaptive fixed width or "rubber".
Below are nested blocks with the class .row... These structural elements are rows that organize horizontal groups of cells.
Content is placed in cells. Each line is split into 12 cells - html elements with classes .col -lg- *,col-md- *,col-sm- *,col-xs- *... These classes define the width of the cell for phones ( xs), tablets ( sm), desktop devices with a small monitor ( md), for a large screen ( lg). And here is the number in pixels meant by each of these extensions:
Instead of an asterisk in the name of the class, a number from 1 to 12 is indicated, equal to the number of cells that the element should occupy. But the sum of all cells within one line should not exceed 12. Here is an example of the code:
And this is how it will look in the browser:
Details and examples of how to work with the Bootstrap grid are described in the framework documentation on the official website in the section "CSS" - "Grid system".
Tables... The framework provides a number of classes for table elements that allow you to easily style tables:
- . table- basic style, only horizontal borders;
- . table-striped- alternation of gray and white lines in the table;
- .table-bordered- formation of all borders of rows and columns;
- . table-hover- highlighting the table row on hover;
- . table-responsive- this class makes the table adaptive to all devices.
Buttons... To create stylish buttons, Bootstrap also offers a number of format classes. .btn- *, where instead of an asterisk, you can substitute any value from the screenshot below and get the corresponding button:
For example, this is how you need to write your "button" element to get a green Bootstrap 3 style button:
Images... There are also interesting solutions for the "img" elements:
This is just a small part of Bootstrap's capabilities. The framework provides classes for working with typography, icons, shapes, tooltips, navigation, and more. If you've appreciated the benefits of Bootstrap's functionality for a WordPress blog, be sure to check out the documentation for this library.
How to build a Bootstrap menu on WordPress
We already know how to connect Bootstrap to WordPres. s, and now we can consider an example practical application framework for the blog. To do this, we will replace the existing active theme menu with responsive bootstrap navigation. I will use in the example a test template based on the WordPress theme "Twenty Siхteen", where I have already created a two-level menu.
We find the menu code "Default navbar" offered on the official website of the framework in the section "Components" - "Navbar":
Editing as needed. I will remove, for example, the link to the logo (Brand), the form and the list with the class . navbar-right... And this part:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
- we replace with the following code:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | "top_menu", "depth" => 2, "container" => false, "menu_class" => "nav navbar-nav", // Process nav menu using our custom nav walker "walker" => new wp_bootstrap_navwalker ()) ); ?> |
"top_menu", "depth" => 2, "container" => false, "menu_class" => "nav navbar-nav", // Process nav menu using our custom nav walker "walker" => new wp_bootstrap_navwalker ()) ); ?>
Place the final navigation result in the corresponding file instead of the existing one. I have this file header.php:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
|
In line " menu" => " top_ menu" the menu that you have designated as the main one in the admin panel is indicated. " depth" => 2 - nesting level for those cases when there are drop-down items. " menu_ class" => " nav navbar— nav" - here are the menu classes from Bootstrap that we used.
But to integrate Bootstrap navigation in WordPress, we need another file with a special class - wp_ bootstrap_ navwalker. php... It can be downloaded from GitHub at the link -. Here we click the "Clone or Download" button and select "Download ZIP".
We extract the files from the archive and copy the required file in the "wp-bootstrap-navwalker-master" folder.
wp_ bootstrap_ navwalker. php we place it in the folder of our theme. We return to the functions.php file and first connect the downloaded class:
// Register custom navigation walker
require_once ("wp_bootstrap_navwalker.php");
Our responsive navigation Bootstrap for WordPress Template is ready. Then the matter remains with the styles. Here is the menu I got:
On hover, a drop-down list opens, and on small screens, navigation links are hidden and called up using the menu icon.
All the details of connecting Bootstrap to WordPress and creating a menu based on the framework can be found in the video:
If you don't have time to learn all the nuances of working with the library on WordPress, use the Bootstrap plugins, the most popular of which are - WordPressTwitterBootstrapCSS and EasyBootstrapShortcode.
This concludes our acquaintance with the framework. Today we learned how to connect Bootstrap to WordPress, the main advantages of this library and the functionality of the framework that can help us create a modern responsive theme. Explore tutorials and experiment!
How do I install bootstrap? First, we need to get the distribution on the official bootstrap website. The man page will offer several installation options:
Download production version (end product that can be used ) and development version ( contains all sources)
The difference between these versions is that the production version is already compiled and optimized, that is, completely ready for use, while the development version, on the contrary, contains the source code that will need to be compiled.
I will add that the development version can be installed using package managers such as: bower or composer, and the production version- with help CDN.
After we have downloaded the distribution kit we need and unpacked it, in our case it is the production version, we will consider the structure of the application. And so we have three directories: css, js, and fonts.
Bootstrap / ├── css / │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme .css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js / │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts / ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings- regular.woff └── glyphicons-halflings-regular.woff2
The css directory contains minified css versions (usually carry the min prefix) and non-minified, which are easy to read and can be used as source code. Also, a source map is attached to each file. (code) *.map (required for browser debugging) .
bootstrap.css is the main file where you can find everything that makes bootstrap such a cool and popular css framework.
bootstrap-theme.css is a small theme that overrides the styles of the main file and adds a new display for some components (It is considered good practice not to touch the source code of libraries and frameworks, this will avoid a lot of problems if we suddenly decide to update) so bootstrap-theme.css can be used as a good base.
JS also includes two file versions (minified and not) and contains standard plugins (carousel, modal windows etc.) , as well as a small set of tools, more detailed information can be found on the official bootstrap website in the javascript section.
Now you can start directly connecting the bootstrap files. Let's create an index.html at the root of our application and set the basic markup by adding our files to it:
Hello, world!
Before the closing tag add styles: bootstrap.min.css and bootstrap-theme.min.css (important! the file with styles, which will override the styles of another file, must be placed last, so the bootstrap-theme.min.css file is located exactly at the end) .
As for scripts: if you noticed, the jQuery library has been added as bootstrap has a hard dependency and plugins simply won't be able to function. The order of connection will be as follows: jquery.min.js, bootstrap.min.js Why in this order? It's simple: plugins need jquery like cars need fuel, so you need to refuel the car first. The last nuance, it is best to include scripts at the end of the document, before the closing tag