掌握Bootstrap基础：教程与笔记详解

1星需积分: 15 184 浏览量更新于2024-07-20 收藏 3.51MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

TUTORIALS POINT

Simply Easy Learning

Bootstrap Grid System

n this chapter we shall discuss the Bootstrap Grid System.

What is a Grid?

As put by wikepedia:

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight

(vertical, horizontal) lines used to structure content. It is widely used to design layout and content structure in print

design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML

and CSS.

To put it simple words grids in web design organise and structure content, makes websites easy to scan and

reduces cognitive load on users.

What is Bootstrap Grid System?

As put by the official documentation of Bootstrap for grid system:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the

device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins

for generating more semantic layouts.

Let us understand the above statement. Bootstrap 3 is mobile first in the sense that the code for Bootstrap now

starts by targeting smaller screens like mobile devices,tablets, and then “expands” components and grids for larger

screens such as laptops, desktops.

MOBILE FIRST STRATEGY

 Content

o Determine what is most important.

 Layout

o Design to smaller widths first.

CHAPTER

WIQERXMG?WÓ"Q„RXÓOA À"ÀÞBþÀÞB

TUTORIALS POINT

Simply Easy Learning

o Base CSS address mobile device first;media queries address for tablet,desktops.

 Progressive Enhancement

o Add elements as screen size increases.

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Here's how the Bootstrap grid system works:

 Rows must be placed within a .container class for proper alignment and padding.

 Use rows to create horizontal groups of columns.

 Content should be placed within columns, and only columns may be immediate children of rows.

 Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can

also be used for more semantic layouts.

 Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first

and last column via negative margin on .rows.

 Grid columns are created by specifying the number of twelve available columns you wish to span. For

example, three equal columns would use three .col-xs-4.

Media Queries

Media query is a really fancy term for "conditional CSS rule". It simply applies some CSS based on certain

conditions set forth. If those conditions are met, the style is applied.

Media Queries in Bootstrap allow you to move, show and hide content based on viewport size. Following media

queries are used in LESS files to create the key breakpoints in the Bootstrap grid system.

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

Occasionally these are expanded to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }

Media queries have two parts, a device specification and then a size rule. In the above case, the following rule is

set:

Lets consider this line:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

TUTORIALS POINT

Simply Easy Learning

<h1>Hello, world!</h1>

<div class="col-md-6" style="background-color: #dedef8; box-shadow:

inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo.

</p>

</div>

<div class="col-md-6" style="background-color: #dedef8;box-shadow:

inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium.

</p>

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

consectetur, adipisci velit, sed quia non numquam eius modi

tempora incidunt ut labore et dolore magnam aliquam quaerat

voluptatem.

</p>

</div>

Details

 <div class="container">...</div> element is added to ensure proper centering and maximum width for

layout.

 Once container is added, next you need think in terms of rows. Add <div class="row">...</div>and

columns <div class="col-md-6"></div> inside rows.

 Every row in the grid is made up of 12 units and you can define the desired size of your columns using those

units. In our example we have two columns each made of 6 units wide i.e 6+6=12.

You can try some more options like <div class="col-md-3"></div> and <div class="col-md-9"></div>or <div

class="col-md-7"></div> and <div class="col-md-5"></div>

Experiment and make sure that the sum always needs to be 12.

Bootstrap Grid System Example: Medium and Large Device

We have seen the basic grid system in Example: Stacked-to-horizontal. Here we had used 2 divs and gave them

the 50%/50% split at the medium viewport width:

TUTORIALS POINT

Simply Easy Learning

But at large your design could really be better as a 33%/66%. So what we’re going to do is set it up to change the

column widths at the breakpoint:

Now Bootstrap is going to say “at the medium size, I look at classes with md in them and use those. At the large

size, I look at classes with the word lg in them and use those. In this case, our 2 divs will go from a 50%/50% split

and then up to a 33%/66%. Check it out in the following example. (Here styling for each column is used. You can

avoid it.)

<h1>Hello, world!</h1>

<div class="col-md-6 col-lg-4" style="background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo.

</p>

</div>

<div class="col-md-6 col-lg-8"" style="background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium.

</p>

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

consectetur, adipisci velit, sed quia non numquam eius modi

tempora incidunt ut labore et dolore magnam aliquam quaerat

voluptatem.

</p>

</div>

剩余192页未读，继续阅读

laxers

粉丝: 1
资源: 14

掌握Bootstrap基础：教程与笔记详解

李炎恢Bootstrap讲义笔记

李炎恢bootstrap 讲义笔记代码全套

bootstraptable进阶教程：自定义表格样式与布局

bootstrap完成笔记网站

bootstrap教程

bootstrap学习笔记

bootstrap笔记

bootstrap菜鸟教程瀑布流

bootstrap基础教程第二版 源代码

bootstrap下载安装教程

bootstrap 学习笔记 轮播（Carousel）插件

bootstrap-table 获取所有数据_Bootstrap table教程

bootstrap-table重载_BootstrapTable的使用教程

bootstrap参考文献

bootstrap安装教程

bootstrap W3school

bootstrap技术教程

bootstrap使用教程

Bootstrap怎么学？

bootstrap中带有输入框的下拉菜单有吗

最新资源

bootstrap基础教程第二版源代码

bootstrap 学习笔记轮播（Carousel）插件