没有合适的资源?快使用搜索试试~ 我知道了~
首页掌握Bootstrap基础:教程与笔记详解
掌握Bootstrap基础:教程与笔记详解
![](https://csdnimg.cn/release/wenkucmsfe/public/img/star.98a08eaa.png)
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的强大功能,并能够将其应用到实际项目中,提高工作效率。
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/9469365/bg10.jpg)
TUTORIALS POINT
Simply Easy Learning
Bootstrap Grid System
I
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
3
WIQERXMG?WÓ"Q„RXÓOA À"ÀÞBþÀÞB
![](https://csdnimg.cn/release/download_crawler_static/9469365/bg11.jpg)
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) { ... }
![](https://csdnimg.cn/release/download_crawler_static/9469365/bg12.jpg)
TUTORIALS POINT
Simply Easy Learning
For all devices no matter what kind with min-width: @screen-sm-min if the width of the screen gets smaller
than @screen-sm-max, then do something.
Grid options
The following table summarizes aspects of how Bootstrap grid system works across multiple devices:
Extra small devices
Phones (<768px)
Small devices Tablets
(≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Grid
behavior
Horizontal at all
times
Collapsed to start,
horizontal above
breakpoints
Collapsed to start,
horizontal above
breakpoints
Collapsed to start,
horizontal above
breakpoints
Max
container
width
None (auto)
750px
970px
1170px
Class prefix
.col-xs-
.col-sm-
.col-md-
.col-lg-
# of columns
12
12
12
12
Max column
width
Auto
60px
78px
95px
Gutter width
30px
(15px on each side
of a column)
30px
(15px on each side of a
column)
30px
(15px on each side of a
column)
30px
(15px on each side of a
column)
Nestable
Yes
Yes
Yes
Yes
Offsets
Yes
Yes
Yes
Yes
Column
ordering
Yes
Yes
Yes
Yes
BASIC GRID STRUCTURE
Following is basic structure of Bootstrap grid:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
Let us see some simple grid examples:
Example: Stacked-to-horizontal
Example: Medium and Large Device
Example: Mobile, tablet, desktops
Bootstrap Grid System Example: Stacked-to-horizontal
Let us see a simple grid example with simple layout: two columns, two paragraphs per column. (Here styling for
each column is used. You can avoid it.)
![](https://csdnimg.cn/release/download_crawler_static/9469365/bg13.jpg)
TUTORIALS POINT
Simply Easy Learning
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<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>
</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:
![](https://csdnimg.cn/release/download_crawler_static/9469365/bg14.jpg)
TUTORIALS POINT
Simply Easy Learning
<div class="col-md-6">....</div>
<div class="col-md-6">....</div>
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:
<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-4">....</div>
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.)
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<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>
</div>
剩余192页未读,继续阅读
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/8d58812e659b440c9f7bf6bade24317d_laxers.jpg!1)
laxers
- 粉丝: 1
- 资源: 14
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 多模态联合稀疏表示在视频目标跟踪中的应用
- Kubernetes资源管控与Gardener开源软件实践解析
- MPI集群监控与负载平衡策略
- 自动化PHP安全漏洞检测:静态代码分析与数据流方法
- 青苔数据CEO程永:技术生态与阿里云开放创新
- 制造业转型: HyperX引领企业上云策略
- 赵维五分享:航空工业电子采购上云实战与运维策略
- 单片机控制的LED点阵显示屏设计及其实现
- 驻云科技李俊涛:AI驱动的云上服务新趋势与挑战
- 6LoWPAN物联网边界路由器:设计与实现
- 猩便利工程师仲小玉:Terraform云资源管理最佳实践与团队协作
- 类差分度改进的互信息特征选择提升文本分类性能
- VERITAS与阿里云合作的混合云转型与数据保护方案
- 云制造中的生产线仿真模型设计与虚拟化研究
- 汪洋在PostgresChina2018分享:高可用 PostgreSQL 工具与架构设计
- 2018 PostgresChina大会:阿里云时空引擎Ganos在PostgreSQL中的创新应用与多模型存储
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)