Using bootstrap. Adaptive layout for gadgets


Grid system in Twitter Bootstrap 3 is the fastest way to creating html site layout. This is exactly the most basic part in bootstrap, because... thanks to the grid you can create adaptive version site, provides correct location all elements. And the development of the layout begins with css class container.

Container (container) with a fixed width.

From the name it is obvious that container contains a given width, changes in which occur as a result of changes in the working browser window.

Alignment occurs in the center using css properties: .container(   margin-left: auto;   margin-right: auto; ) Container has padding: .container(   padding-left: 15px;   padding-right: 15px; )

The table below shows the width of container, which depends on the width of the user's web client window:

Container with rubber width. Unlike a fixed container, container-fluid has no width, and the only thing it has from the CSS classes is: .container(   padding-left: 15px;   padding-right: 15px; )

A row inside a container.

Once you have decided on the container, you need to move on to the rows. The row takes the same width as the container. Has negative margin:

Row(   margin-left: -15px;   margin-right: -15px; ) As a result, our construction already looks like this (for example, I’ll take a fixed width):

Using blocks in Twitter Bootstrap. As I wrote before, the css class row is used to create rows. And inside these same rows you need to place blocks:

The content of the site is placed inside the block. You can also place another rows. One row contains 12 blocks.

The block width is specified in relative format using the required number of columns. Starting width – 1 – corresponds to one Bootstrap column, maximum width – 12 – maximum amount columns in one row.

For example: if we need to have 4 blocks with identical width in one row, then we need to set the width to 3 (div class ="col-*-3" > ... div >). The total is 12 (3+3+3+3).

Adaptive layout for gadgets

I previously wrote that Twitter Bootstrap 3 is famous for its grids that are suitable for various user devices, be it a phone, a tablet, or a monitor for your home/work computer). And the time has come to fully understand this.

In the example above, I put an asterisk after the word col. And just instead of an asterisk you need to indicate for which device it will be used given block:

  • – col-xs-* – used to create a grid with small screens. Telephones fit this definition;
  • – col-sm-* – for devices with a slightly larger screen width than a phone, for example a tablet;
  • – col-md-* – medium screen sizes, i.e. netbooks;
  • – col-lg-* – for large screens. If you believe Yandex.metrics, then at the moment the number of users is on sites under these screens. But this indicator very much depends on the topic of the site.
The tables below provide data regarding these classes: Twitter Bootstrap 3 Tiny Screen View of the Twitter Grid System
Smartphones
(Small screen
Tablets
(≥768px and Middle screen
Laptops
(≥992px and Large screen
Computers
(≥1200px)
Fixed layout (class ="container" )Fits 100% web client width750px970px1170px
Rubber layout (class ="container-fluid" )Fits 100% of the web client screen width
Class prefixclass="col-xs-*"class="col-sm-*"class="col-md-*"class="col-lg-*"
Bootstrap maximum column width for fixed layout(class="container" )62px (750px / 12)81px (970px / 12)97px (1170px / 12)
Maximum column width for fluid layout (class ="container-fluid" )The web client width is divided by 12
Padding15px around the edges

But be careful here! For example, if you use class ="col-sm-*" , it will apply not only to tablets, but also to netbooks and large screens, but this only works if you do not specify "col-md-*" " and "col-lg-*" . Those. if your row will have one block for all screens, then it is enough to write div class ="col-xs-12" > ... div >, and not div class ="col-xs-12 col-sm-12 col-md -12 col-lg-12" > ... div >.

An example of adaptive layout on Twitter Bootstrap 3

In theory, everything seems to be clear, but at the same time nothing is clear. In order to somehow understand and secure all these blocks, rows and understand the meaning of this entire grid, I will consider a small piece of code with the help of which everything will fall into place.

I'm not a designer, and in this lesson you don't need to invent anything super beautiful. For a general idea, schematic images will suffice.

As an example, I am putting together a layout consisting of three blocks, which are located in the same row, but will be displayed differently on user devices. The figure below shows just all this. And, by the way, when you order the development of a layout, you need to tell the designer in advance that the layout will be done for the Twitter Bootstrap 3 framework, because the designer will immediately depict the elements in accordance with the grid.

Large screen width

Styles applied to the layout will be applied when the active area of ​​the browser window (width) is greater than 1200px. From the picture you can see that the containers occupy the entire space of the row and divide it into three equal parts. It turns out that 12 blocks need to be divided into 3 containers (since they are all the same), we get that there are 4 blocks in one such container.

Bottom line for large screen width:

Container No. 1

  

Container No. 2

  

Container No. 3

Average screen width

Styles applied to the layout will be triggered when the active area of ​​the browser window (width) is greater than or equal to 992px and less than 1200px. Two containers are located horizontally and occupy 100% width (each container takes up 6 blocks), and one is located with new line and also occupies 100% of the width (container No. 12 occupies 12 blocks). To clearly explain to the browser that the container needs to be placed without wrapping around other containers, twitter bootstrap provides a css class class ="clearfix" . But, one more point, because... this class should apply to this type of screen; you need to add another class - class ="visible-md-block" (md is the name of the screen, similar to classes for the block).

The result for the average screen width (be careful, I will add new classes and elements to the already written code):

Container No. 1

  

Container No. 2

     

Container No. 3

Small screen width and “tiny screen” Using the same principle, you need to add classes for the remaining screens. I won’t describe the same thing, I’ll just give a general summary:

Container No. 1

     

Container No. 2

     

Container No. 3

 

For “crumb-screen” you can omit the css class class ="col-xs-12" , because it takes up 100% of the screen width automatically and in order not to clutter the code with unnecessary characters, you can remove them.

The final code for this template will look like:

Container No. 1

     

Container No. 2

     

Container No. 3

Different elements on different screens Previously, I used the class ="visible-md-block" - which is displayed on medium screens. More details about the "visible" class: Class name Description
class="visible-xs-*"This class adds visibility to a "tiny screen" whose width is less than 768px. If the screen is larger, the element will not be visible.
class="visible-sm-*"This class adds visibility only on gadgets that have a screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. If the screen does not meet these characteristics, the element will not be displayed.
class="visible-md-*"This class adds visibility only on gadgets that have a screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. If the screen does not meet these characteristics, the element will not be displayed.
class="visible-lg-*"This class adds visibility only on gadgets that have a screen width greater than or equal to 1200px (i.e. ≥1200px). If the screen does not meet these characteristics, the element will not be displayed.
class="visible-*-inline"display:inline
class="visible-*-block"Part of the layout gets the CSS property display :block
class="visible-*-inline-block"Part of the layout gets the CSS property display :inline-block

The class ="hidden" is used to hide elements.

Class name Description
class="hidden-xs"This class adds stealth to an element only on gadgets that have a screen width less than 768px. On other screens, parts of the layout will be visible.
class="hidden-sm"This class adds stealth to an element only on gadgets that have a screen width greater than or equal to 768px (i.e. ≥768px), and less than 992px. On other screens, parts of the layout will be visible.
class="hidden-md"This class adds stealth to an element only on gadgets that have a screen width greater than or equal to 992px (i.e. ≥992px), and less than 1200px. On other screens, parts of the layout will be visible.
class="hidden-lg"This class adds stealth to an element only on gadgets that have a screen width greater than or equal to 1200px (i.e. ≥1200px). On other screens, parts of the layout will be visible.

You can also simultaneously apply several classes to one element, for example:

This element will not display on medium and large user screens

The developers of Twitter Bootstrap 3 did not forget about printing documents/web pages and added several classes specifically designed for these purposes:

Another example: If you have an element in one row that is 6 blocks wide and in the center, then you need to specify an offset of 3 blocks:

   ...   

     ...  

Before downloading, make sure you have a code editor (we recommend Sublime Text 3) and some knowledge of HTML and CSS. Here we will not touch upon source files, but you can always download and study them yourself. We'll focus our attention on getting started with compiled Bootstrap files.

Loading compiled files

Most quick way Get started: Get compiled and minified versions of our CSS, JS, and images. No documents or source files.

2. File structure

In 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 . md

This 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 included

Bootstrap 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 elements

Common body styles to reset the type and background, link styles, template grid, and two simple markup elements.

CSS Styles

Styles for general HTML elements: design, code, tables, forms and buttons. Also includes Glyphicons, a great icon set.

Components

Basic styles for simple interface components: tabs and buttons, navigation bars, messages, page headers, etc.

Javascript plugins

Like components, these Javascript plugins are interactive components for tooltips, information blocks, modal components, and more.

List of components

Together, 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
4. Basic HTML template

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:

  • Bootstrap 101 Template
  • Hello World!

    • To make a Bootstrap template like this, simply attach the appropriate CSS and JS files:

  • Bootstrap 101 Template
  • Hello World!

    • And everything is set! By adding these two files, you can develop a website or application using Bootstrap.

    “We got acquainted with the framework, looked at its advantages, briefly looked at its so-called grid, now it’s time to figure out in practice how to use Bootstrap.

    You can download Bootstrap from the official website getbootstrap.com. On the main page, click on the button “ Download Bootstrap».

    After clicking, we are taken to a page that offers several types of downloads. In this article we will look at regular downloading full version framework.

    After downloading and unpacking the archive, we get three folders:

    • CSS- folder with styles
    • JS- folder with js scripts
    • FONTS- folder with icon fonts

    This is the entire framework. To further work with Bootstrap, I will create a folder with the same name bootstrap , in the folder I will create one empty file index.html and will fill the folder and file along with the analysis of the framework in this article, and at the end of the post I will give a link so that you can see the result. If you follow me, you will understand that working with the framework is really easy.

    From the downloaded framework we will need the entire fonts folder, one style file from the css folder called bootstrap.css or bootstrap.min.css and similarly one script from the js folder called bootstrap.js or bootstrap.min.js .

    The difference between files with “.min.” from ordinary ones in that files with “.min.” optimized, that is, the code is written in one line without line breaks and spaces, so they weigh less than usual, and the contents of the files are absolutely the same.

    Now I will create a css folder in my bootstrap folder, put the bootstrap.min.css file in it and create a js folder in which I will put bootstrap.min.js. Additionally, in the css folder, I will create an empty style.css file for adding my own styles.

    The necessary framework files have been moved, and now we will only work with the index.html file. In order not to write the code yourself, let's turn to the documentation; on the download page of the official website below there is a ready-made HTML skeleton of the document, copy it and paste it into our index file.

    Our style file, js script and jQuery library are already included in the skeleton, but if you don’t use “ bootstrap» template, but on some of your own, then you need to connect the styles file bootstrap.min.css between the tags, and after it the created style.css .

    Then before the closing tag we first include jQuery library.

    And after the library we connect the js script.

    In general, the HTML skeleton of the document looks like this.

    Bootstrap

    The preparatory process is complete, Bootstrap is connected, we can move on and start filling our WEB page with framework components.

    How to use the documentation

    The documentation of the framework is very good, which makes it easy to use. The main menu of the official website has several sections: “ Getting started», « CSS», « Components», « JavaScript" And " Customize", on the page of each section in the right column there are names different components, clicking on them shows their description and use cases in the form of ready-made code.

    If there are difficulties with English language, then there are several resources on the network with translated documentation, here is the address of one of such sites www.oneskyapp.com/ru/docs/bootstrap. You can also use some kind of browser translator, the translation will, of course, be crooked, but the essence of what is written will be clear. In general, you just need to read the documentation, take code examples and practice.

    Working with the Bootstrap Grid

    As I said in the previous article, the grid works like a table, including rows .row and speakers .col, there can be a maximum of twelve columns. Prefixes (lg , md , sm , xs) are added to the class.col to indicate the width of this column at a specific screen resolution.

    Rows and columns are wrapped into a block with a class .container or class.container-fluid . The difference between them is that the .container class has a maximum width of 1170 pixels, while the .container-fluid class has an unlimited width, that is, the entire width of the screen, even if the screen resolution is very large. Full information For information about the Bootstrap grid, see the documentation in the " CSS».

    Using the framework grid, we will make the classic layout of our page (header, content, side column and footer), for this we will create three rows and four columns, this is the code we get.

    HEADER CONTENT SIDEBAR FOOTER

    To separate the blocks, I wrote two additional classes: .block, .block2 and added a couple of rules to them in the created style.css file.

    Block( background: #eee; border: 1px solid #000; ) .block2( background: #ccc; border: 1px solid #000; )

    Let's add an icon font to our headings. In chapter " Components» select the icons you like, copy the text under the image, this text is a class. Create a tag inside the header tag and paste the copied class.

    HEADER

    Now it didn’t hurt to add some kind of menu. To do this, in the section " Components" go to " Navbar", select the menu you like, copy the code and paste it after the opening tag.

    All that remains is to fill out " content t" and " sidebar" We do everything according to the same scheme: select a component in the documentation, read the description, copy and paste it into the right place. I will add a form and a button, clicking on which will open a modal window with a table.

    Just like that, in just 5 minutes, we sketched out simplest layout pages, adaptive for all devices, and practically no code was written on their own. Follow the link and see the result.

    This is where I will end the article. We have looked at only a tiny part of the framework’s functionality, but I think you understand how to work with Bootstrap. The next step is to change the styles of the framework to suit your needs and download only those components that are needed. We will analyze all this in the article “

    Advantage using CSS frameworks is that the layout designer does not need to think about many of the layout nuances that the creators of the frameworks have already thought through for him. Such nuances include cross-browser compatibility, support for different screen resolutions and much more. The layout designer only indicates what, how and when to show, the rest is done by the framework itself. This approach can greatly speed up website layout. The advantages of Bootstrap include its popularity. This means that it will be easier for another code designer to maintain your code.

    The disadvantage of using frameworks is that the page will have to carry the entire framework's extra styles, even if it only uses a small part of them. The framework is an excellent tool for prototyping and creating pages for which design is secondary, such as admin pages. If you have a very specific design, then laying it out using a framework may be more difficult than using native tools. However, this is also possible.

    About using Bootstrap Currently, there are several ways to work with Bootstrap styles. Without using LESS For beginners, Bootstrap itself recommends the following approach: you need to download compiled Bootstrap from the site and put it in your project without changing anything. Then you need to create your own empty css file and 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.

    There are a large number of ways to compile LESS files and Bootstrap leaves this up to the discretion of the developer. Bootstrap itself uses Grunt for compilation, you may prefer a plugin for JetBrains products, and we, since the article is aimed at beginners, will look towards simpler solutions. Such solutions are WinLess for Windows, SimpLESS for Mac or Koala for Linux. All these programs do approximately the same thing: they receive a folder with LESS files as input and listen for changes in them. As soon as you make changes to any file, it is immediately compiled into the specified CSS file. This way you don't need to run manual compilation after every change. You change the LESS file, save it and immediately see the changes on the site in an already compiled, compressed form.

    Creating a Project The first step is to create a simple file structure for our project.
    Preliminary inspection After creating the file structure, open psd file in Photoshop. It is important to carefully examine the template and evaluate it. We need to understand the following things:
    • How will the images be cut?
    • What components will be used?
    • What will be the main styles?
    • What page layout will we get?
    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 On at this stage just need to cut and save general images, which 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 social media buttons.

    Save the map image:

    Let's save the logos as follows:

    Images/logo.png
    images/footer-logo.png

    Repetitive background images it is necessary to cut out a minimum piece sufficient to form a complete image, repeating 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 him. 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 - navigation bar(navbar) and the navigation itself (nav)
  • To display submenus – grouped list (list-group)
  • For a 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 removed the shadow from the form elements, and specified the specific page font for the text in the buttons.

    Then we describe the page background and the top bar:

    Body ( border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); )
    Further in the text it will not be indicated in which file the styles are written. Just remember that we save all the variables in the file variables.less, and the CSS styles will be stored in styles.less.

    HTML framework We traditionally start the website layout 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 is mobile devices ax 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 a 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 HTML structure right inside the CSS and gives some “scope” to the rules.

    Logo

    Insert the logo into the header tag:

    No additional styles required.

    Search

    In order to create a search, we need the following Bootstrap components: inline form, grouped controls and button.
    In the header tag we create an inline form, aligned to the right. The fields of such a form must have a “form-control” class and a label.

    We place the “grouped controls” component into the form. Grouping controls allows you to remove the space between the text input and the button and, as it were, merge them into a single element.
    It is a div with the “input-group” class and fields, and the button of such a component is placed in a block with the “input-group-btn” class.

    Since we don’t need to show the label for the search field, we’ll hide it with the “sr-only” class. This is needed for dedicated screen readers.

    The “btn-primary” class is added to the button, meaning that this is the primary button of this form.

    …Search GO
    All we have left is to set the width of the search form in the styles.

    Body ( … .wrapper ( … header ( … .form-search ( width: 200px; ) ) ) )

    Menu

    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); margin: 0; padding: 0 10px; text-transform: uppercase; ) ) ) )
    Here we draw a gray stripe as a background on the div, and put an inline h1 into it with the desired font and background color of the page to create the impression transparent background for 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 indicate that the “primary” panel will have the default panel’s gray border, rather than the default blue one:

    @panel-primary-border: @panel-inner-border;
    Now in the site styles you need to change the standard panel settings, which 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
    Through variables for the jumbotron component we will set White color text and branded blue background:

    @jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
    And let's describe our styles:

    Body ( … .wrapper ( … .jumbotron ( border-radius: 0; padding: 0; margin: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; ) small ( text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before ( content: ""; ) ) ) ) )
    In them, we remove the corner rounding, component padding, and quote decorations that are set by Bootstrap by default. We will also add styles for our fonts.

    Content

    Lorem ipsum dolor sit amet…

    Donec vel nisl nibh…

    Donec vel nisl nibh…


    The next step is to add two images that are at the end of the content text. This is done using two columns:


    The "thumbnail" class turns images into a "thumbnail" component. He will do all the work of stylizing the images for us. The only thing left for us is to set our padding and border color in the variables for this component:

    @thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

    Block "Our team"

    When laying out this block, let's first add a title:

    Our team
    with style:

    Body ( … .wrapper ( … h2 ( background: none repeat scroll 0 0 #29C5E6; color: #fff; font: 300 30px @brand-font; padding: 0 10px; text-transform: uppercase; ) ) )
    And then we’ll add a block with the “team” class, which consists of two lines containing employee cards. Each card is a column. The card has a width equal to four columns of our grid. All cards except the first one in the line have a left indent, which is created by the “col-md-offset-1” class. The card content consists of an image and a description (.caption)

    John Doe Saundra Pittsley

    team leader

    … Ericka Nobriga

    art director

    Cody Rousselle

    senior ui designer

    …
    After creating the markup, let's give these elements the following styles:

    Body ( … .wrapper ( … .team ( .row ( margin-top: 20px; .col ( white-space: nowrap; .thumbnail ( margin-bottom: 5px; ) ) .col-md-offset-1 ( margin- left: 3.7%; ) .caption ( h3 ( font: 300 16px @brand-font; margin: 0; ) p ( font: 300 14px @brand-font; color: @brand-primary; margin: 0; ) ) ) ) )
    In addition to the indents and font styles that are set here, we changed the “col-md-offset-1” class. He had to set the indent to 3.7% because... the standard indentation was too large.

    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 inside 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 with using CSS We moved this background so that the corresponding image is displayed on each link.

    Copyright A block with copyright and logo is a picture with a link and a paragraph with text underneath it.

    Copyright 2012 Whitesquare. A pcklab creation


    Styles are done similarly to the previous blocks, with the only difference being that the block is nailed to the right edge and the alignment inside it is also to the right:

    Body ( … .footer ( … .container ( … .footer-logo ( float: right; margin-top: 20px; font-size: 10px; text-align: right; a ( text-decoration: underline; ) ) ) ) )

    This completes the layout. The finished project can be downloaded

    2 votes

    Welcome to the pages of the start-luck blog. Luck starts here. If you are trying to create a good, competent website as easily as possible, but do not yet fully understand the programs, all the terms and code, then this article is for you.

    Adaptive Bootstrap layout– how is it all interconnected? Why do you need a framework, what is it, how does it help and does it really make life easier? I will also tell you how to use the program to the maximum without harming the future project, and where to find good lessons. Well, shall we begin?

    A little about Bootstrap

    I assume that not all of my readers understand well what a framework is and have already managed to download and figure it out on their own. I'll start with information specifically for them. Recently I wrote about adaptive layout and called Bootstrap a program. I did this to simplify perception, although the framework is not that at all.

    This is a set of applications, scripts or plugins, so to speak, that make it easier to create special forms on the site, carousels with images, show the site on mobile devices or not do this, and so on.

    As you probably already know, for each of these actions the programmer must come up with and write code. If you use Bootstrap, you don't have to do this. you just take ready-made template and change it as you wish. As a result, work time is reduced significantly.

    In addition to speeding up, the priorities of this framework also include reducing the requirements for the webmaster. Ideally, the site is created by a person who is very well versed in JavaScript and can write everything himself. If you work with Bootstrap, then your knowledge may not be as deep. A basic level will be sufficient.

    Possibilities

    You can see what Bootstrap 3 is capable of on the website with Russian documentation in the sections css, JavaScript and components. After clicking on the desired tab on the right, a very convenient menu, which allows you to go to the desired location in the document.

    Specific examples here show what the part of the code responsible for a particular action looks like, as well as the result. You can set the content visibility for any mobile devices. Permissions and other settings have already been completed.

    The course itself Practice from A to Z"lasts about 17 hours. During this time, you gain important theoretical knowledge, and then practice how to use certain elements correctly: which elements to remove from the code, what is needed to make the site work faster, what it is and much more.


    Well, one more bonus course, TOP 4 add-ons for Bootstrap that will help the framework work more efficiently.

    Well, that seems to be all. Subscribe to the newsletter and learn more about simple solutions to complex problems and the right approach when working with not quite the right products.
    

    2024 gtavrl.ru.