01.Bootstrap入门、CSS样式【栅格系统】

最新推荐文章于 2023-11-07 19:25:47 发布

胡图图.Zzz

最新推荐文章于 2023-11-07 19:25:47 发布

阅读量746

点赞数 2

分类专栏： Bootstrap入门、CSS样式【栅格系统】文章标签： java eclipse jar tomcat java-ee

本文链接：https://blog.csdn.net/weixin_62356088/article/details/124114848

版权

Bootstrap入门、CSS样式【栅格系统】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目录

1. WWW：What、Why、Where 2

1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机) 2

2. 移动设备有限 2

3. 浏览器支持 2

4. 容易上手 2

1. 企业网站、博客、网站后台之类的网站 2

2. 注意：非电商(电商网站分类很多) 2

2. 环境安装 2

3. Bootstrap CSS 3

3.1. 概览 3

3.1.1. H5文档类型 3

3.1.2. 移动设备优先 3

3.1.3. 布局容器 3

3.2. 栅格系统(Grid System) 4

3.2.1. 概念 4

3.2.2. 案例：演示Bootstrap网格系统 4

3.2.3. 案例：演示列偏移offset。 5

3.2.4. 案例：演示栅格系统嵌套(某列中嵌套栅格) 5

3.2.5. 交换位置：右移动：push 左移动：pull 6

1.WWW：What、Why、Where

What:Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。

Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。
用于快速开发Web应用程序和网站的前端框架
Bootstrap是基于HTML、CSS、JS的，简介灵活，使Web开发更加快捷
总结：Bootstrap是一个建立在一个页面，可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架

Why:

响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
移动设备有限
浏览器支持
容易上手

Where:

企业网站、博客、网站后台之类的网站
注意：非电商(电商网站分类很多)

环境安装

到Bootstrap官网下载Bootstrap库。官网：Bootstrap中文网
页面中引入库：

bootstrap.min.css：在Bootstrap中有很多CSS样式。所以要有CSS文件
bootstrap.min.js：严格意义上来说，Bootstrap是基于jQuery的一个库，jQuery又是javaScript的一个库。所以又要引入一个bootstrap.min.js库
案例：在页面上创建一个Button,观察原生态的button和Bootstrap的button区别

原生button:

<button>原生button</button>

只有一个普通的按钮

Bootstrap的button:

<button class="btn">Bootstrap的button</button>

我们来刷新页面看一下效果对比，Bootstrap的按钮很明显样式不一样，加了背景色，加了按钮边框的样式

我们再来看一个效果：

<button class="btn btn-default">Bootstrap的button</button>

现在我们再来看效果，边框，背景色，而且还加了鼠标移动上来，和鼠标离开的样式。如果我们用js来写。想想是不是要复杂很多。现在这些效果全都封装在Bootstrap中。是不是很爽。

我们再来个更爽的：

<button class="btn btn-success">未读69条</button>

<button class="btn btn-success">未读<span class="badge">69条</span></button>

再来看这个效果，是不是很舒适

注意：这里class属性中的值格式一定要按要求来写

Bootstrap CSS
概览
H5文档类型

Bootstrap必须是基于H5的，我们来看一下网页的首行代码 <!DOCTYPE html>这个就是H5的

移动设备优先

现在我们在页面F12看效果，选中手机模式，我们可以看到效果很模糊，看不清楚。现在页面不支持手机端。我们还需要在网页head标签中添加一句代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

刷新页面，是不是页面美观多了

布局容器
固体容器【class=”container”】

示例代码:

<div class="container">

<button>原生button</button>

<button class="btn btn-default">Bootstrap的button</button>

<button class="btn btn-success">未读69条</button>

<button class="btn btn-success">未读<span class="badge">69条 </span></button>

</div>

我们给div加上背景色样式再来看一下效果

<style type="text/css">

.container{

background-color: pink;

}

</style>

Div自动居中了

固体布局就是页面两边后自动留白，div自动居中

流体容器【class=”container-fluid”】

示例代码：

<div class="container-fluid">

<button>原生button</button>

<button class="btn btn-default">Bootstrap的button</button>

<button class="btn btn-success">未读69条</button>

<button class="btn btn-success">未读<span class="badge">69条</span></button>

</div>

流体布局就是自动铺满，永远是占满整行

栅格系统(Grid System)
概念

栅格系统，可以理解为就是网格，格子

每行最多12个格子，如果想要再多可以使用栅格嵌套实现

1.案例：演示Bootstrap网格系统

<h1>栅格系统</h1>

<div class="row">

<div class="col-lg-1 b">1</div>

<div class="col-lg-1 b">2</div>

<div class="col-lg-1 b">3</div>

<div class="col-lg-1 b">4</div>

<div class="col-lg-1 b">5</div>

<div class="col-lg-1 b">6</div>

<div class="col-lg-1 b">7</div>

<div class="col-lg-1 b">8</div>

<div class="col-lg-1 b">9</div>

<div class="col-lg-1 b">10</div>

<div class="col-lg-1 b">11</div>

<div class="col-lg-1 b">12</div>

</div>

现在是一行12个格子，注意：格子的排列会受到页面的分辨率影响排位一列

如果再多一个格子就会自动换行

如果我们把第一个格子的col-lg-1写成：<div class="col-lg-3 b">1</div>

就表示第一个格子占12个格子中的三格格子

col:表示列，lg:大屏幕，3:表示占的格子数量

我们在看一个例子：

<div class="row">

<div class="col-lg-3 col-md-4 col-sm-6 b">1</div>

<div class="col-lg-3 col-md-4 col-sm-6 b">2</div>

<div class="col-lg-3 col-md-4 col-sm-6 b">3</div>

<div class="col-lg-3 col-md-4 col-sm-6 b">4</div>

</div>

默认一行四列，根据页面的缩小会变为一行3，剩下的自动到第二行。页面再缩小就会变为一行2个格子。继续缩小就会变为一行一个格子

如果我们想一行最少两个格子，只需要在加上：col-xs-6

<div class="row">

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">1</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">2</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">3</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">4</div>

</div>

xs表示最小

案例：演示列偏移offset。

示例代码：

<div class="row">

<div class="col-lg-4 col-lg-offset-4 b">1</div>

</div>

现在一行有一个盒子，这个盒子占了4个格子。如果我们想让这个盒子居中，占在第5个格子开始。就是以上代码

col-lg-offset-4

表示偏移格子，4表示偏移四个格子

<div class="row">

div class="col-lg-4 col-lg-offset-5 b">1</div>

<div class="col-lg-4 col b">2</div>

</div>

如果像这种有两个盒子，第一个盒子偏移就会把第二个盒子往后面挤

案例：演示栅格系统嵌套(某列中嵌套栅格)

以上面的代码为例，现在需要再第二个盒子内再添加三个盒子，每个盒子占4个该怎么写？这种情况我们就需要用到嵌套，在盒子内嵌套格子

<div class="row">

<div class="col-lg-4 col-lg-offset-4 b">1</div>

<div class="col-lg-4 col b">

<div class="row">

<div class="col-lg-4 b">1</div>

<div class="col-lg-4 b">2</div>

<div class="col-lg-4 b">3</div>

</div>

</div>

</div>

第二个盒子里面嵌套了三个盒子，每个盒子占了四个格子

交换位置：右移动：push 左移动：pull

列交换位置：

<div class="row">

<div class="col-lg-4 col-lg-push-8 b">1</div>

<div class="col-lg-4 b">2</div>

<div class="col-lg-4 col-lg-pull-8 b">3</div>

</div>

把第一个盒子和第三个盒子交换位置，首先每个盒子占了四个格子，第一个盒子要往右移动8个格子，第三个盒子要往左移动8个格子

注意：交换位置的移动不会把其它的格子挤走，会重叠。

胡图图.Zzz

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
01.Bootstrap入门、CSS样式【栅格系统】

目录1. WWW：What、Why、Where 21. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机) 22. 移动设备有限 23. 浏览器支持 24. 容易上手 21. 企业网站、博客、网站后台之类的网站 22. 注意：非电商(电商网站分类很多) 22. 环境安装 23. Bootstrap CSS 33.1. 概览 33.1.1. H5文档类型 33.1.2. 移动设备优先 33.1.3. 布局容器 33.2. 栅.
复制链接

扫一扫