Bootstrap入门 and CSS样式

最新推荐文章于 2024-05-30 15:01:09 发布

隔竹观尘世

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量5.9k

点赞数 13

文章标签： bootstrap css html

本文链接：https://blog.csdn.net/m0_64848027/article/details/124502173

版权

一.Bootstrap 简介

1.What? Bootstrap 是什么？

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

2) Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。

3) 用于快速开发Web应用程序和网站的前端框架

4) Bootstrap是基于HTML、CSS、JS的，简介灵活，使Web开发更加快捷

5) Bootstrap是一个建立在一个页面，可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架

2.Why? 为什么会使用 Bootstrap？

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

2）移动设备有限

3）浏览器支持

4）容易上手

3.Where? 在哪里使用 Bootstrap？

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

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

二.Bootstrap 环境安装

1.到Bootstrap官网下载Bootstrap库。官网：Bootstrap中文网

2.页面中引入库：

1) bootstrap.min.css：在Bootstrap中有很多CSS样式。所以要有CSS文件

2) bootstrap.min.js：Bootstrap核心库

3) jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】


 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
		<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

三.Bootstrap CSS

1.H5 文档类型

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

2.移动设备优先

现在页面不支持手机端。我们还需要在网页head标签中添加一句代码:

3. 布局容器

1) 固体容器 (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自动居中

2) 流体容器 (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)

1.What? 什么是栅格系统？

栅格系统：可以理解为就是网格，格子。每行最多12个格子，如果想要再多可以使用栅格嵌套实现。

2.案例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表示最小

3.案例2：演示列偏移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.案例3：演示栅格系统嵌套(某列中嵌套栅格)

以上面的代码为例，现在需要再第二个盒子内再添加三个盒子，每个盒子占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>
第二个盒子里面嵌套了三个盒子，每个盒子占了四个格子