Bootstrap tutorials are available online, but Bootstrap documents are detailed on bootcss.com, but there are few practical examples. This is done using some of the most popular web layouts and styles from Bootstrap. Only talk about the knowledge points related to the case each time, learn while practicing, strengthen understanding. Exercise book cases should have HTML/CSS foundation.

I. Case introduction

Waterfall stream is a popular web layout in recent years. The visual performance is uneven multi-column layout. This case uses Bootstrap to achieve a waterfall stream layout.

Ii. Relevant Bootstrap knowledge points

2.1 configure the Bootstrap

2.1.1 First go to the official website of Bootstrap (bootcss.com) download “Bootstrap for production”.

2.1.2 in<head>Tag into the COMPRESSED CSS folderbootstrap.min.css.

2.1.3 Bootstrap JS plug-in relies on jQuery, so if you want to use Bootstrap JS plug-in, you must import jQuery first and then the JS folderbootstrap.min.js.

<! - BootstrapCSS file, Placed within the < head > -- > < link type = "text/CSS" href = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <! - the jQuery file, <script language="javascript" type="text/javascript" SRC = "http://libs.baidu.com/jquery/1.9.1/jquery.min.js" > < / script > <! - BootstrapJS file, <script language="javascript" type="text/javascript" SRC = "https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" > < / script > <! <meta HTTP-equiv =" x-UA-compatible "content="IE edge, Chrome =1"> <meta HTTP-equiv ="X-UA-Compatible" content="IE Edge, Chrome =1"> If the VERSION of IE is lower than IE9, make the browser support HTML5 and CSS3. -- [if lt IE 9] > < script SRC = "http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" > < / script > < script SRC = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" > < / script > <! [endif]-->Copy the code

2.2 Grid system

Official explanation: Bootstrap provides a responsive, mobile-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport size increases. It contains predefined classes that are easy to use.

In simple terms, Bootstrap writes three styles from the outside to the inside for fast layout:

  • Fixed width of outer layer.containerOr 100% width.container-fluidStyle;
  • line.rowThe style must be included in.container 或 .container-fluid;
  • column.col-md-*(*It can be 1 to 12, which is medium screen and that’s the standard display,.col-md-1 占 .row1/12,.col-md-12 占 .rowOf 12/12) or column offset.col-md-offset-*(*Can be 1 to 12), contained in.rowContainer for quick raster layout.

Col – md – * sample:

<! <div class="container fluid"> <div class="row"> <div class=" col-MD-1 ">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> </div> <div class="row"> <div class="col-md-1">1/12</div> <div class="col-md-3">3/12</div> <div class="col-md-4">4/12</div> <div class="col-md-4">4/12</div> </div> <div class="row"> <div class="col-md-6">6/12</div> <div class="col-md-6">6/12</div> </div> </div>Copy the code

.col-MD -* renderings:

Example using column offset.col-md-offset -* :

<! <div class="container fluid"> <div class="row"> <div class=" col-MD-1 ">1/12</div> <div class="col-md-1">1/12</div> <! Here, to the right to offset 4/12 -- > < div class = "col - md - 1 col - md - offset - 4" > 1/12 < / div > < div class = "col - md - 1" > 1/12 < / div > < div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-1">3/12</div> <div class="col-md-4 col-md-offset-4">4/12</div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4">6/12</div> </div> </div>Copy the code

. Col-md-offset -*

Col-md -* and.col-md-offset-* should be used together to ensure that the total of * does not exceed 12, otherwise line breaking will occur.

2.3 the thumbnail

Thumbnails are most commonly seen in product display pages, such as the most common display of goods on some shopping websites.

Thumbnails need to work with the grid system described above by wrapping the tag inside a container with an. Thumbnail-style caption. If you want to add a caption, add a container with an.

The thumbnail example:

<! <div class="container-fluid"> <div class="row"> <div class=" col-MD-4 "> <div class="thumbnail" SRC ="img/1.jpg"> <div class="caption"> <h4> <small> < img/1.jpg"> <div class="caption"> <h4> <small> </small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> < H4 > Title - thumbnail </h4> <small> I'm the description in the thumbnail, I'm the description in the thumbnail, I'm the description in the thumbnail. </small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> < H4 > Title - thumbnail </h4> <small> I'm the description in the thumbnail, I'm the description in the thumbnail, I'm the description in the thumbnail. </small> </div> </div> </div> </div> </div>Copy the code

. Thumbnail effect:

2.4 Responsive images

To make the image fit the size of the container, add an.img-responsive style to the image.

Img – responsive example:

<img SRC ="img/1.jpg" class="img-responsive" Alt =" responsive" >Copy the code

Another option is to add img-Rounded /img-circle/img-thumbnail to create rounded/ round/thumbnail shapes.

Example of changing the shape of a picture:

<! <div class="row"> <div class=" col-MD-4 "> <img SRC ="img/1.jpg" <img SRC ="img/1.jpg" class="img-responsive img-rounded" Alt =" rounded" > </div> <div class=" col-MD-4 "> <img SRC ="img/1.jpg" class="img-responsive "rounded Alt =" rounded" > <div class=" col-MD-4" <img SRC ="img/1.jpg" class="img-responsive img-thumbnail" Alt =" thumbnail" > </div> <div class=" col-MD-4 ">  </div> </div> </div>Copy the code

Change the shape of the picture:

Three, waterfall flow layout actual combat

3.1 Arranging pictures

Read the above content, the following began to combat. First, use the grid structure to create an area for the image. Here we leave 1/12 of the left and 1/12 of the left blank.

<! <div class="col-md-10 col-md-offset-1"> <div class=" col-md-offset-1"> </div> </div> </section>Copy the code

Effect:

Then use the thumbnail style with description as seen above, with each thumbnail making up 4/12 of the middle 10/12 (as a whole), three thumbnails per row, and three rows. Img-responsive and rounded. Img-rounded are used to decorate the picture in the thumbnail.

<! <div class="col-md-10 col-md-offset-1"> <div class=" col-md-offset-1"> <div class="thumbnail"> <a href="javascript:void(0);" > <img SRC ="img/1.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> Reading is an activity that uses language to obtain information, understand the world, develop thinking and gain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials are mainly words and pictures, but also symbols, formulas, charts and so on. </small> </p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="javascript:void(0);" > <img SRC ="img/2.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> Reading is an activity that uses language to obtain information, understand the world, develop thinking and gain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials are mainly words and pictures, but also symbols, formulas, charts and so on. </small> </p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="javascript:void(0);" > <img SRC ="img/3.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> Reading is an activity that uses language to obtain information, understand the world, develop thinking and gain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials are mainly words and pictures, but also symbols, formulas, charts and so on. </small> </p> </div> </div> </div> <! -- thumbnails 4 to 9 -->... . . . . . <! </div> </div> </section>Copy the code

Effect:

3.2 Implement waterfall flow

So far we have arranged the images, but it looks strange because there is a gap between the top and bottom images, which is not pretty. Our waterfall stream features consistent width and adaptive height layout. Width consistency is already implemented, and height adaptation is achieved using a style in CSS3 called column-width.

Set or retrieve the width of each column of an object. The corresponding script feature is columnWidth.

When you add column-width to the container, the browser will tell you how many columns the

container should display, calculating a relatively reasonable layout.

First we add an ID =”container” to the container outside the thumbnail.

<! <div class="row"> <div class="col-md-10 col-md-offset-1" id="container"> <! - pictures start -- > < div class = "col - md - 4" > < div class = "thumbnail" >Copy the code

And then I’m going to style this id column-width.

<! #container{-webkit-column-width:354px; /*Safari and Chrome*/ -moz-column-width:354px; /*Firefox*/ -o-column-width:354px; /*Opera*/ -ms-column-width:354px; /*IE*/ column-width:354px; } #container>div{ width:354px; /* Overflow :auto; /* overflow:auto; /* Prevent content overflow from layout mismatch */}Copy the code

Effect:

Because now the mainstream browser (Chrome/Firefox/Opera/Safari) all have already support CSS variables, in order to facilitate debugging and maintenance, the CSS code can also wrote above.

<! < span style = "max-width: 100%; clear: both; min-height: 1em; --img-width:354px; */} #container{-webkit-column-width:var(--img-width); / * "var (-- variable name)" using variables * / - moz - column - width: var (- img - width); -o-column-width:var(--img-width); -ms-column-width:var(--img-width); column-width:var(--img-width); } / * the other: Var (); var(--img-width,200px); / #container>div{width:var(--img-width); overflow:auto; }Copy the code

The Bootstrap waterfall layout is now complete. Step by step, it is easy to complete. The demo address is mazey.cn/bootstrap-b… , source address: github.com/mazeyqian/b… .

3.3 extensions

In addition to using CSS3 to implement waterfall flow, you can also use JavaScript to achieve this effect.

Onload = function(){// Col-mD-4 is referenced here because wrapping images in boxes has no other function, Create other Class loadWaterfall('container',' col-MD-4 ') if you don't want to conflict; } function loadWaterfall(boxID,thumbnailClass){var box = loadWaterfall(box,thumbnailClass){var box = loadWaterfall(box,thumbnailClass) document.getElementById(boxID); / / get array of thumbnails var thumbnail = box. The getElementsByClassName (thumbnailClass); Var thumbnailWidth = thumbnail[0].offsetwidth; / / calculation per box can be arranged a few thumbnail var colCount = math.h floor ((document. DocumentElement. ClientWidth * (10/12))/thumbnailWidth); Var thumbnailHeightArr = []; // Create a highlighted array for each instance. for(var i = 0; i < thumbnail.length; I ++){if(I < colCount){thumbnailHeightArr. Push (thumbnail[I].offsetheight); }else{// Get the minimum height before var minHeight = math.min. apply(null,thumbnailHeightArr); / / the first line of the minimum height index var minIndex = thumbnailHeightArr. IndexOf (minHeight); // Place this thumbnail below the minimum height of the top row [I].style.position = 'absolute'; Thumbnail [I].style. Top = minHeight + 'px'; Thumbnail [I].style.left = thumbnail[minIndex].offsetLeft + 'px'; // Update thumbnailHeightArr[minIndex] += Thumbnail [I]. OffsetHeight; // Update thumbnailHeightArr[minIndex] += Thumbnail [I]. }}}Copy the code

One of the most obvious benefits of implementing waterfall flow with JavaScript is that it is better compatible with IE, because Windows7 bundled with the installation of IE browser, the domestic use of IE is very large, which makes us have to consider the compatibility of IE browser when making web pages.

JavaScript implementation of waterfall flow reference source code address: github.com/mazeyqian/b… .

Four,

This article introduces the basic configuration of Bootstrap, the grid system, thumbnails, responsive images, and some CSS3 styles. The grid system is especially important because it enables responsive layout.

Copyright statement

All original articles in this blog are copyrighted by the authors. Reprint must include this statement, keep this article complete, and hyperlink the author and the original address of this article: blog.mazey.net/2399.html

(after)