RESS Essentials
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Bootstrap custom compilation setup>

To get a customized version of Twitter's Bootstrap, we go to http://getbootstrap.com/customize/ where you can select which components you need and customize the LESS variables such as colors fonts. In the current version (3.0), the build script was improved and cleaned. Now it's easy to get a really lightweight setup. We just need basic styles and a responsive navigation bar. To get our custom build, first uncheck all the checkboxes. Then, in the Common CSS section, select the following checkbox:

  • Forms: This is required by the Navbar component

In the Components section, select the following checkboxes:

  • Navs
  • Navbar

In the JavaScript components section, do not select any checkbox.

In the Utilities section, select the following checkboxes:

  • Basic utilities
  • Component animations (for JS)

Under the jQuery plugins header in the Linked to components section, do not select any checkbox.

Finally, in the Magic section, select the following checkboxes:

  • Collapse
  • Transitions (required for any kind of animation)

Let's also get a version of Bootstrap with grids. To do this, we have to check Grid system in the Common CSS section.

We override the Bootstrap color settings with our own styles, so you can skip the following color setup section, and on the bottom of the page find the Compile and Download button. Let's name this version bootstrap_grid.zip.

Testing the Bootstrap grid system

The downloaded files are ZIP archives containing two directories (css and js) and some files inside each of them. First we'd like to see and test the default Bootstrap's grid system. So let's extract the bootstrap_grid.zip contents to the /assets/ subdirectory of our test website. I renamed the boostrap.css file inside the css directory to boostrap_grid.css and added grids_visual.css for styles necessary to visualize the grid in the browser. The file bootstrap_grids.html is an HTML document with markup describing a few rows of the Bootstrap grid system.

Files necessary to test Twitter's Bootstrap grids

The Bootstrap grid system consists of 12 columns that may be merged for some or all of its media queries defined for the following four stops:

  • Extra small: For phones (<768px)
  • Small: For tablets (≥768px)
  • Medium: For desktops (≥992px)
  • Large: For desktops (≥1200px)

It's worth noting that in this approach, everything smaller than 768 pixels is considered extra small.

Now we can create an HTML structure to preview and test Twitter's Bootstrap-responsive columns. In Version 3 of Twitter's Bootstrap, published in the middle of August 2013, several changes were introduced to allow more flexibility and simplify HTML at the same time.

The default 12-columns grid in Twitter's Bootstrap has fixed column count. Below 768px columns turn to rows in a one-column layout, as shown in the following figure:

To do this, we create a simple document with the following code snippet:

<!DOCTYPE html>
  <head>
    <title>Sample grid</title>
    <link rel="stylesheet" href="css/bootstrap_grid.css">
    <link rel="stylesheet" href="css/grids_visual.css">
  </head>
  <body>
    <div class="row">
    <div class="col-md-1 magenta_bar"></div>
      [12 lines]
    <div class="col-md-1 magenta_bar"></div>
    </div>

The 12 rows in the code we just saw <div class="col-md-1 magenta_bar"></div> placed inside <div class="row"> is a typical responsive row.

Class col-md-1 means that the coloumn width of this div will be one in all the resolutions and will extend to fullscreen width below 768px. The next row in our document contains more complex formatting, shown as follows:

  <div class="row">
    <div class="col-md-4 col-sm-5  col-xs-6 magenta_bar">
    </div>
    <div class="col-md-4 col-sm-2  col-xs-6 magenta_bar">
    </div>
    <div class="col-md-4 col-sm-5  col-xs-12 magenta_bar">
    </div>
  </div>
  </body>
</html>

Assigning three classes such as col-md-4, col-sm-5, and col-xs-6 to our div column is explained as follows:

  • col-md-4 means that it is four columns wide (33 percent) on medium and bigger screens
  • col-sm-5 means that it is five columns wide (41.6667 percent) on small and bigger screens
  • col-xs-6 means that it is six columns wide (50 percent) on extra small and bigger screens

The media queries are written in the Mobile First order, which means that statements for larger screens override those for smaller ones.

The document structure can be seen in the following image:

上一章目录下一章