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

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

Bootstrap教程是基于Tutorials Point网站的权威资源，它为学习者提供了深入理解和实践Twitter Bootstrap框架的机会。Twitter Bootstrap是当前最受欢迎的前端开发框架之一，以其优雅、直观和强大的功能著称，特别注重移动优先的设计理念，旨在简化网页开发流程并加快项目构建。本教程涵盖了Bootstrap的基本结构、CSS、布局组件以及插件等核心主题。通过以下几个部分的详细学习： 1. Bootstrap基础结构：这部分将介绍Bootstrap的核心组件和组织方式，包括网格系统（Grid System）、响应式设计的基础，让读者理解如何构建网页的基本框架。 2. Bootstrap CSS：深入解析Bootstrap预定义的样式类，如字体、颜色、间距、按钮、表单控件等，帮助用户快速创建一致且美观的界面元素。 3. Bootstrap布局组件：涵盖了导航栏、模态框、卡片、下拉菜单等实用组件的使用方法，让读者掌握如何构建复杂的页面布局。 4. Bootstrap插件：讲解如何利用Bootstrap的扩展插件，如轮播图、警告提示、工具提示等，提升网页交互性和功能性。受众对象主要是对HTML和CSS有一定基础，但希望进一步提升Web开发技能，特别是使用Bootstrap来加速项目的开发者。通过完成本教程，学员将能够达到中级水平，能够熟练地运用Bootstrap进行网站开发。在开始教程之前，建议确保对HTML和CSS基础知识有一定了解，因为本教程假设读者具备这些基础。随着教程的深入，读者将逐步掌握Bootstrap的强大功能，并能够将其应用到实际项目中，提高工作效率。

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

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

李炎恢Bootstrap讲义笔记

全套Bootstrap视频教程，Web前端响应式开发项目实战视频教程带源码

Bootstrap教程JS插件滚动监听学习笔记分享

Bootstrap笔记

Bootstrap教程JS插件弹出框学习笔记分享

Bootstrap学习笔记

Bootstrap教程.zip

bootstrap课堂笔记代码

Bootstrap4学习笔记与代码实践分享

Bootstrap排版教程：慕课笔记详解与实例

最新资源