Responsive bootstrap design. Requires HTML5 doctype

Adaptive design is a layout method where the width of the web page layout is adjusted to the width of the device. The simplest option is a proportional change in scale, but in reality it is better to change both the location of the elements and their sizes. This way we will get the most optimal view for smartphones, tablets and monitors.

Bootstrap already has responsive design capabilities built into it. If you make a simple multi-column layout and then start to reduce the width of the browser window, you will notice that the layout itself changes. But it’s not limited to this; it’s much more interesting to slightly change the layout itself so that it best suits the device. For this purpose, keywords that appear in class names have been introduced; they are presented in table. 1.

To set the width of the columns for smartphones, just include the col-xs-N class in the code; for monitors it will already be called col-md-N. Any classes can be combined with each other; if the class for the selected device is not specified, then it is inherited from bottom to top. This means that the smartphone layout will look the same as the monitor layout. But not the other way around. This is why layout always starts with a layout for a smartphone, then a tablet and a monitor.

Since we are now focusing on mobile devices, we need to add the following line inside.

Now our design will scale to the width of the device and look optimal, especially on devices with small screens.

Taking into account this line and the new classes, we will make a simple layout with two columns (example 1).

Example 1. Responsive Layout

Responsive layout ( background-color: #eee; text-align: center; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; font-size: 2rem; ) Heading Column 1 Column 2

To test the layout, it is not necessary to view it on a specific device; it is enough to reduce the width of the browser window and we will immediately see the changes. In Fig. Figure 1-3 shows the result of this example for different window widths.

Rice. 1. View on a smartphone

Rice. 2. Tablet view

Rice. 3. View on the monitor

We considered the simplest case, when the arrangement of elements practically does not change relative to each other. What if you need to rearrange elements or remove something for small screens? We can’t do this directly, so let’s use a little trick - add two identical elements to different places and we will hide one and display the other. Bootstrap offers two sets of classes for hiding and showing elements depending on the width of the window - hidden-xs and visible-xs-block . The principle is the same as when working with columns; instead of xs we substitute the desired keyword. Example 2 shows how to “move” the title in this way.

Example 2: Changing the title position

Heading Column 1 Column 2 Heading

The result of this example is shown in Fig. 4.

Requires HTML5 doctype

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. Include it in all your projects.

Design and links

The main components of Bootstrap include display elements, styling, and link styles. In particular, we:

Removed the margin of the body element
Installed white background background-color: white; for body
We use the attributes @baseFontFamily , @baseFontSize and @baseLineHeight as the main ones
Set the base color of the link using @linkColor and apply underlining only to the selector:hover

You can find these styles at scaffolding.less.

Resetting settings using Normalize

In Bootstrap 2 we implemented the old browser default reset using Normalize.css, a project from Nicholas Gallagher which also includes HTML5 Boilerplate. Since we use Normalize a lot in our reset.less , we removed some elements specifically for Bootstrap.

Default Design Grid Demo

The main layout grid consists of 12 columns, providing container widths of 940px without active dynamic features. By adding a dynamic CSS file, the grid can stretch from 724px to 1170px wide, depending on your monitor. On displays that are less than 767px wide, the columns become floating and line up vertically.

Basic HTML Grid

For a simple two-column layout, create a .row class and add the appropriate number of columns.span* . Since this is a 12-column grid, each two-.span* range has 12 columns and will always add 12 columns to each row (or whatever number of columns is specified in the parent element).

...

IN in this example We have .span4 and .span8 created and 12 columns and one continuous row.

Moving Columns

Move the columns to the right using classes.offset* . Each class increases the left margin of a column by the size of the column itself. For example, .offset4 moves .span4 four columns.

...

Column layout

To layout content using the default grid, add a new .row class and set the .span* distance for columns within an existing .span* column. Layout rows must consist of a set of columns, which is added to the number of parent columns.

Level 1 column

Level 2

Level 1 column

Level 2

Floating Mesh Demonstration

A floating grid uses percentages to indicate column widths instead of pixels. A floating grid has the same dynamic capabilities as a fixed grid, providing the desired proportions for screen resolutions of different devices.

Basic floating grid HTML

Makes any row float by changing .row to .row-fluid . The columns will remain the same, making it easy to switch between fixed and floating design patterns.

...

Floating movement

Installed in the same way as in a fixed grid: add the .offset* class to any column to move multiple columns.

...

Floating layout

The layout of a floating grid is slightly different: the number of layout columns should not match the number of parent columns. Instead, each level of stacked columns is "reset" because each row takes on 100% of the properties of its parent column.

Level 1 of column

Level 2

Layouts Fixed layout

Basic fixed-width layout (optional dynamic) with only one requirement: .

Floating markup

Create a two-column floating page using . Ideal for applications and documentation.

Responsive Design Enabling responsive capabilities

Include in your project responsive css by adding appropriate meta tags and additional style sheets to your document. If you have compiled Bootstrap downloaded from our page, then you just need to add a meta tag.

Attention! By default, Bootstrap does not have responsive capabilities enabled because it is not required everywhere. Instead of developers disabling this functionality every time, it would be more logical to give them the opportunity to enable it when necessary.

About Bootstrap's responsive features

Media queries change regular CSS, based on a large number of conditions and ratios, sizes, display types, etc., but most often - on focus within min-width and max-width .

Changes the width of columns in a grid
Where necessary, aligns elements vertically instead of using wrapping.
Changes the size of headings and text for better display on different devices.

Use the adaptive capabilities of Media Queries only to create a mobile version of the site. For large projects, we recommend creating a separate version of the design and website.

Supported devices

Bootstrap supports multiple media queries in one file, which allows your project to work on different devices and environments. different resolutions screens. This includes the following devices:

/* Large desktop */

@media (min - width: 1200px) (...)

/* Portrait tablet to landscape and desktop */

@media (min - width : 768px ) and (max - width : 979px ) ( ... )

/* Landscape phone to portrait tablet */

@media (max - width: 767px) (...)

/* Landscape phones and down */

@media (max - width: 480px) (...)

Additional adaptive classes

The class table shown here provides dynamics for different devices and how they work in conjunction with the layout grid and media queries (separated by device). You can find these classes in responsive.less.

Class Phones 767px and less Tablets 979px to 768px Laptops and desktops Default.visible-phone .visible-tablet .visible-desktop .hidden-phone .hidden-tablet .hidden-desktop

Viden	Hidden	Hidden
Hidden	Viden	Hidden
Hidden	Hidden	Viden
Hidden	Viden	Viden
Viden	Hidden	Viden
Viden	Viden	Hidden

When to use?

Use limited functionality and avoid creating completely different versions on the same site. Instead, use these features to create different presentations on different devices.

Testing Adaptive Classes

Resize the window in your browser or run the site on other devices to test responsive classes.

Visible on…

Green marks indicate that the class is visible on this display.

Telephone? Telephone
Tablet? Tablet
Desktop? Desktop

Hidden on…

In this case, green marks indicate that the class is not shown on this display.

Telephone? Telephone
Tablet? Tablet
Desktop? Desktop

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 great 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 include it after bootstrap.css.

After that, in order to change the Bootstrap styles you need to change them in your styles.css something like this:

A ( color: #beceda; )
The obvious disadvantage of 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. The Customize tool can be of some 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.

Using LESS This method assumes that all Bootstrap variables are stored in .less files. The developer works with these variables and, if necessary, manually or automatically compiles them into CSS files, and the HTML itself includes only the compiled CSS files. It is this option that will be considered in the article as the most flexible.

Exists large number 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 in the direction of 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 the 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?

Only after you mentally answer these questions for yourself, you can move on to layout. Let's look at these questions in order. General images At this stage, you need to cut and save only general images that will be on all pages of the site and do not relate to the content. In our case, this will be a light gray page background, a header background, a map image, two logos and buttons social networks.

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 into a minimum piece sufficient to form full image repetition vertically and horizontally.

/images/bg.png
/images/h1-bg.png

It is convenient to save social network icons with the same sizes in one file and use them 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

Components The main difference between layout using Bootstrap and layout using native means is that Bootstrap introduces the concept of components. Components are frequently used ready-made HTML blocks with predefined styles. Sometimes components use JavaScript. The layout designer can use either a ready-made component or define his own appearance for it. To do this, you often just need to change the value of variables in Bootstrap. If more flexible changes are needed, the layout designer can always change the HTML and CSS at his discretion.

If you take a look at our template, you can see that we will need the following components:

For layout with columns - grid system (row, col)

For search – inline form (form-inline), grouped controls (input-group), button (btn)

For navigation - the navigation bar (navbar) and the navigation itself (nav)

To display submenus – grouped list (list-group)

For the map block – visual panel (panel)

To display a large central block - jumbotron

To display photo frames - thumbnails

We will look at each component in more detail when we encounter it in the layout. Basic styles In Bootstrap, all default styles are already set, we only need to customize them if they differ from our design. Let's do this in the file src/less/variables.css.

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 have removed the shadow from the form elements, and given the text in the buttons a specific page font.

Then we will 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.

HTML framework We start the website layout traditionally with an HTML framework. We paste the code of the simplest template from the Getting started page into the index.html file, having previously removed all unnecessary things:

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 on 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.

Layout B in this case, we see that the site consists of two parts: the main container with content, which is centered on the screen, and the stretching footer. The main container consists of two columns: main content and sidebar. Above them is the header, navigation (nav) and page title (.heading).

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 the HTML structure right inside the CSS and gives some kind of “scope” to the rules.

Logo

Insert the logo into the header tag:

No additional styles required.

In order to create a search, we will 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 button is given the class “btn-primary”, meaning that it 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; ) ) ) )

To 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 title

The 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); padding: 0 10px; ) )
Here we draw a gray stripe as the background on the div, and insert an inline h1 into it with the desired font and page color background to create the impression of a transparent background for the h1.

Submenu

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".

Sidebar content In addition to the submenu, the sidebar content also contains an image with the location of the offices.

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 specify 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.

Quote Let's start laying out the content by adding a quote.

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 Ipsum
Using variables for the jumbotron component, we will set the text color to white and the 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.

Content

Lorem ipsum dolor sit amet…

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 margin 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.

Footer The footer consists of four large blocks: Twitter feed, site map, social links and logo with copyright.

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 the area centered on big screens and sets the height and indentation of the footer. We use columns to align blocks within the footer.

Twitter feed Layout the contents of the Twitter feed:

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 The sitemap consists of two equal columns with links:

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 ones (.social-icon-small). We set these classes to display as an inline block with fixed dimensions and the same background. And then using CSS we moved this background so that the corresponding image was displayed on each link.

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. Ready project can be downloaded

Nowadays, a lot of web designers and developers talk and write about Twitter Bootstrap. Some call it a real gift for developers with zero knowledge of web design. While others call it a blessing for designers. Be that as it may, Twitter Bootstrap makes many things easier and faster.

In many cases, web developers have a ready-made idea, but cannot get started because they cannot technically create the project they want to take on. They must turn to web designers to implement the client side.

This process can drag on for a damn long time and seriously slows down the developer, for whom it is very important that his/her idea is realized as quickly as possible. In these cases, Twitter Bootstrap comes to their aid, like a comic book superhero!

Twitter Bootstrap is a CSS framework that helps in developing web applications. It is one of the simplest CSS frameworks available today and is being used en masse. It is assumed that you may not have any knowledge of web designing at all and all you need to do is just write some HTML codes according to Bootstrap specifications.

In short, Twitter Bootstrap already has ready-made lists CSS styles, built-in jQuery support, and also has several popular JavaScript tools.

Wow! Isn't it great? You get a whole bunch useful tools already ready for use. All you have to do is simply paste the correct HTML code in the right place.

In this article, I will explain how you can get started using Twitter Bootstrap. To do this, I will show you a demo page layout. I’ll also tell you how you can customize the framework to suit your own needs.

Let's get started

First, you will have to download the bootstrap.zip file from the official Twitter pages Bootstrap on github. It contains a set of files with css, js and img extensions that we will need to start creating a site on Twitter Bootstrap. The "css" folder contains style sheets (for responsive and non-responsive design), as well as simplified versions of them.

You'll use minified versions to quickly create a website once the design is complete and the project is ready to go live. The "js" folder contains the bootstrap.js file and its minified version.

These JavaScript files contain various JavaScript components that we will use in developing the design of our site. The last folder, "img" contains two sets of icons.

Both sets are almost identical, and the images in them differ only in color. The icons were provided by glyphicons, who kindly donated them to the Twitter Bootstrap project.

So, let's get to work. Before we begin, open a text editor and create the first file "index.html". Save it in your project's home folder.

Basic HTML Templates for Working in Bootstrap

In order to activate the Bootstrap framework, you need to include all the relevant files and create an HTML structure. But first we will create the structure and then see what files we will need. The first thing you should write is, as required by HTML5, the document type declaration at the very top:

We set the encoding to UTF-8 because we will be using special characters in our project and we need the browser to recognize them correctly. Twitter Bootstrap also recommends using UTF-8 for better compatibility.

After that, set the usual HTML tags: , and . These are the basic HTML tags. Your index.html page should look like the image below.

Now we need to include the necessary styles contained in the bootstrap.css file.

Once the styles are included, we include the necessary JavaScript files. Firstly you have to include the JQuery file, for this I suggest connecting them from the JQuery CDN as shown below.

Then we include the Bootstrap.

For performance reasons on your web page, all of these scripts should be placed right before the closing tag.

Now all the necessary files are included. You can start creating the various components of your site. Your index.html file should look like this.

How does this work

First, we must understand that Twitter Bootstrap relies heavily on 12 grids. What kind of meshes are these?

Let's say you want to create two equal sections inside the body of your index.html page. You must assign a "span6" class to each block of these elements. This will mean that Bootstrap must create two equal sections, each with six grids.

Hope this gives you some idea of how Bootstrap works. It has a set of pre-assigned classes for each element. If necessary, you must assign appropriate classes to each of them.

Coding with Bootstrap

Let's break the demo page down into five main parts:

Title;
Marketing area;
Left side bar;
Content area;
Basement.

To wrap all of our site's content, we'll create a container class that will be centered on the screen and also surrounded by different sides other blocks.

For this purpose, Bootstrap has a special class called “container”. We will use it as a mother shell. So, let's move on to writing codes:

Now inside the DIV container, we will write the site title. For this we use the h1 title tag.

Bootstrap Site

Check your index.html page in the browser to see if the elements are laid out nicely. Now it's time to work on the navigation bar. Twitter Bootstrap defines the markup for the navigation bar as follows:

Home
Projects
Services
Downloads
About
Contact

"navbar" must be a class defined in the main navbar DIV. You should adhere to the above navigation menu markup to match Twitter Bootstrap styles.

Place this code a little below the h1 tag. Make sure all elements are inside our parent wrapper class, i.e. "container" Open the page in a browser and check if the navigation menu is laid out nicely.

Obviously, you'll want your title to be different from the standard one. At the end of this tutorial, we'll look at how you can add custom styles to existing Bootstrap styles and add CSS to change the design of the header area. Now let’s move on to creating the second part, which we called “Marketing Area”.

Twitter Bootstrap has a beautiful pre-assigned class specifically for the marketing domain. It's called "hero-unit". Copy the code below and paste it below the navigation menu block.

Marketing stuff!

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Get Started

Check your page in the browser, it should look like this:

Well, isn't it wonderful? Without writing a single piece of CSS, you get this: beautiful block areas of marketing. Okay, let's take a look at this code.

“hero-unit” has CSS that is intended for the h1 tag. So, what you write inside h1 tags will be output in bold and be slightly separated from other elements of the block. Then, through the tag, we need to create a paragraph in which our advertisement or description of our product will be displayed.

And here's the fun part: links and buttons. You can make any link into a button by adding the “btn” class and then adjusting its size by adding a few more additional classes, such as btn-large/btn-small/btn-mini .

To change the color of the buttons, add the classes btn-success (green), btn-info (blue), btn-warning (yellow) and btn-danger (red). You can find more information about buttons and link styling in the CSS Base section. These classes can be applied to HTML button elements.

I hope the story has been interesting to you so far. Twitter Bootstrap is so simple that you don't even have to do anything inside CSS style sheets. You simply use the tools that the system provides. This is what makes Bootstrap one of the most powerful CSS frameworks.

Now let's move on to the following sections: the left sidebar and the content section. You'll see how I divided the area into two unequal vertical sections, and how you can make even more of these segments. As noted earlier, Twitter Bootstrap is a 12-grid system.

You must always remember this. This means that you can create a maximum of 12 vertical grids within any parent element.

IN at the moment we are working inside our parent wrapper class "container". We will divide it into two unequal parts using 12 grids. For the left sidebar we will use the "span4" class, and for the content section that will be located to the right we will use the "span8" class.

The class names reflect the idea: the left sidebar will occupy up to four grids, and the right side should be distributed across the remaining eight grids.

Your page should now look like this:

It should have two separate columns, side by side. Now you should think about creating additional block shell that I added above via the "row" class. The reason is that, by default, span* classes are left-aligned.

To position both columns below all the content, we added a “row” block. It acts like a regular separator in tables. You should now remove the paragraph stub elements from your code.

Then fill the left sidebar with a list of navigation items.

The navigation list should have the following markup:

In addition to the "nav" class, you must add a "nav-list" class that will list the navigation menu items. If you add the "nav-header" class to any "li" element of the "nav" class, it will look like a link section header. Let's move on and see how our page now looks in the browser.

Moving on to the content area, we'll simply fill it out using general h3 tags, and paragraph tags. There is no need to install additional classes here. After all, we want paragraphs of text to appear one below the other. Below is the code I placed inside "span8".

How did we start?

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

How do we market?

Refresh the page in your browser and it should look like this:

As you can see, we are already very close to the end point. All we have to do is complete the footer of the page.
For the footer, we will again divide the “row” into three parts. As shown in the demo version. This time we divide the area into three equal parts, that is, we use “span4”.

This will create another “row” block, right below the “row” we created earlier for the sidebar and content area.

Write down the following code for yourself:

Meet Our Clients

Our Clients Know Our Employees

Our Employees Reach Us

Simple enough! We split the line into three equal parts using the "span4" class, and then filled each of the segments using h4 tags, paragraph tags, and links that look like buttons. Check what we got in your browser.

You should have small images of customers and employees inside the buttons. Use the tag to add the appropriate image classes such as icon-user, icon-star, icon-glass, etc.

To make icons white, use the icon-white class with the icon-user and icon-star classes. You can find a complete list of icon classes in the Bootstrap documentation, which is located here.

To slightly separate the page footer from the content area, we'll add a tag between the "row" blocks. After we added the tag, let's see what we got.

Now we have completely created a simple, but quite presentable landing page. And at the same time, we used exclusively the tools of the Twitter Bootstrap framework.
Adding Custom Styles to Twitter Bootstrap
If you have some knowledge of CSS and want to change the default Twitter Bootstrap styles, then your best bet is to create your own stylesheet, import the Bootstrap styles, and then rewrite them in your own CSS file. Make sure the link refers to your styles and not CSS files Bootstrap.

If the default Twitter Bootstrap styles are enough for you, then obviously there is no need to create a style sheet. But since many websites use the same framework, these styles will become common and can be seen on many other websites built with Bootstrap. Therefore, it will be better if you add your own styles on top of the Twitter Bootstrap CSS.

@import url("bootstrap.min.css");
A Few More Important Components of Twitter Bootstrap Highlighted Items
To highlight certain fragments in the body of a long document, you can add the “lead” class to them. This will make the fonts of that particular paragraph slightly larger than those in the rest of the document.
Selection tags
You can also use basic HTML highlighting tags on your page, such as, and . You can also use tags and .
Text alignment
Align text within any paragraph or div block can be set using the classes: “text-left”, “text-center” and “text-right”.
Text color
You can set default colors for paragraph text using various color highlighting classes, such as "muted" - gray, "text-warning" - red, "text-error" - maroon, "text-info" - light blue and “text-success” - green.
Table styles
Twitter Bootstrap also supports table layout by default. The following code is used for this:

…..

Working with Images
You can add images using a regular tag . To make your designs look more interesting, you can add classes "img-rounded" for images with rounded corners, "img-circle" for scrolling images, and "img-polaroid" to create a shadow and border around the perimeter of the image.
Dropdown Menus
To add a dropdown menu to an existing navigation bar (as shown on the demo page), you need to add the following markup inside the "li" element.

Drop Down

Item1

Item2

Item3

To create a dropdown list you must wrap the parent element using the "dropdown" class and then use "a" markup to insert it. Then place the list item in this element.

I showed you the basic principles of using Twitter Bootstrap and how to get started with the system. Now that you know how it works, I hope you will find it much easier to work with the description of the framework elements from the original documentation.

After studying it, you will definitely find many new opportunities for use.

In the next article, I will tell you about creating responsive websites using Twitter Bootstrap.

The translation of the article “Twitter Bootstrap Tutorial – Handling Complex Designs” was prepared by the friendly project team.

Good Bad

Would you like to improve the responsiveness of your website using Bootstrap? The most important aspect of this framework is its basic 12-column grid, which is used to create a flexible template.

We'll create a simple site using Bootstrap and learn how to use its grid.
Before following this guide
Before you follow the guide below you need to:

Have a general understanding of what Bootstrap is;

How Bootstrap's grid system works;

Download Bootstrap to your hard drive;

Create a basic Bootstrap index.html file.

What is Bootstrap
Bootstrap 3 is a platform for HTML, CSS and JavaScript developers creating responsive websites. The framework consists of created responsive CSS styles for columns, lists, navigation menus, forms and other elements.
Bootstrap grid system
Bootstrap's grid system classifies screen sizes into four types: extra small, small, medium and large;

Ultra-small are smartphone screens. Small - tablets such as iPad. Medium - stationary and large monitors;

To help fine-tune responsive features for these types of screens, Bootstrap divides the screen width into 12 columns;

Each of these four Bootstrap grid types only becomes responsive if it is given a separate CSS class;

For example, to make a div responsive on small devices, this div should have its own Bootstrap class .col-xs- , for example .

Download Bootstrap
Go to getboostrap.com and click the "Download Bootstrap" button:

You will see the "Getting Started" page. Click the "Download Bootstrap" button:

Save the file to your hard drive. It does not need to be saved on the server. Unzip the file and rename the extracted folder to "bootstrap".
Preparation of basic Bootstrap pages index.html Step 1: Create a Bootstrap index.html file
Return to the "Getting Started" page and click the "Basic Template" link in the right sidebar:

You will see the Bootstrap template code. Click the "Copy" button to copy the code:

Paste the "Basic Template" code into a text editor and save it as an index.html file in the same folder as the "bootstrap" folder. This will now become the home page of the Bootstrap site.

Open the newly created index.html file in your browser and view your basic Bootstrap site:

Open the index.html file in text editor and between tags and add (1). Close this new div after tag (2) and save the file:

Reload the page in your browser and notice that the text “Hello World! " is no longer flush with the edge of the page, but is shifted slightly to the right. The Bootstrap "container" class that we assigned to the div added this padding:

Go back to the index.html file. Between tags and replace "Hello World! " on Trusthub. Save the file and browse the site.
Step 2: Add Content and Sidebar
Go back to the index.html file and under the Trustub line paste the following code:

What Trusthub can do for you
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Our Team
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel ague. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.

Browse the site again. You should now see the content and Our Team sidebar, but it is not yet set to a responsive template:

Return to getbootstrap.com, and in the top menu click the “CSS" button:

In the sidebar, click the “Grid System” button:

Scroll down to the "Grid options" section (1) and notice Bootstrap's 12-column grid system with four types of screen sizes, widths, and class prefixes (2):

Don't worry, all this will become clear in a matter of seconds when you start creating your first Bootstrap project.

Open the index.html file again and immediately below the line for the existing one, set the class to “col-md-9”. It should now look like:

Go to the div located above the "Out Team" header and give it the CSS class "col-md-3". Save the file.

Categories

Internet

Windows 10

Multimedia

Utilities

Network and Internet

System programs

Setting up programs

OS problems