bootstrap简介

最新推荐文章于 2022-07-21 16:20:20 发布

原创最新推荐文章于 2022-07-21 16:20:20 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

javaweb学习笔记专栏收录该内容

77 篇文章

订阅专栏

Bootstrap是一款由Twitter推出的开源前端框架，解决了项目开发中的界面设计和响应式布局问题。本文介绍了Bootstrap的下载、配置，重点讲解了其核心的十二栅格布局系统，包括基本概念、不同设备模式、跨越栅格、栅格调整等，并通过实例展示了如何实现栅格的推拉和空出操作，以适应不同设备的屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap是twitter出品格ige开源框架,其实就是twitter自己使用的产品后来因为使用的人较多,特地为此单独成为了一个开源项目.
实际上对于项目开发可能存在如下的鸡总问题:
向母校:没有专业的美工设计人员,所有的界面依靠程序员完成:
项目大:有美工,但是美工素质不到位,实现的页面没有良好的DIV布局,
在开发中可能需要有一系列的复杂组建出现,这个组建如果单独实现会非常麻烦.
所以在项目开发之中,就特别需要有一种可以便于所欧人快速上手开发的前端框架,因此bootstrap框架的推出弥补了此类问题
bootstrap开发包可以到官网中下载.

https://getbootstrap.com/

在这里插入图片描述

如果只是使用的话下载第一个即可,如果需要源码,可以下载第二个
但是需要注意一点,Bootstrap依赖于jQuery程序包,移位它里面的所有JavaScript组件,必须依靠jQuery中的选择器以及DOM处理完成.

bootstrap配置开发

bootstrap给用户提供的就是一组css,js文件,所以直接拷贝js和css文件到项目中即可
在项目中的建立css文件目录,而后将"bootstrap.min.css"文件复制到此目录之中
建立js文件夹,将jQuery开发包拷贝到目录之中,
同时将bootstrap中提供的开发包也拷贝到目录之中(bootstrap.min.js ),建立一个HTML页面进行相关资源配置
在导入js文件的时候要先导入jQuery.js文件,然后再导入bootstrap.js文件
bootstrap开发框架最大的好处在于可以适用不同的浏览器
- 例如:手机,平板,电脑
需要设置设备大小自动调整页面宽度

<meta name="viewport" content="width=device-width,initial-scal=1">

此处表示实在进行页面显示的时候,页面宽度为当前设备宽度,并且默认情况下不进行缩放
bootstrap都是用css+div控制的
编写html代码

<html>
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">
</head>
<body>
	<div class="continer">
		<span class="h1">你好!世界</span>
		<!-- 将这个超链接的样式变为一个按钮-->
		<a class="btn btn-primary ">www.maoshu.com</a>
	<div>
</body>
</html>

效果

在这里插入图片描述

十二栅格布局

十二栅格布局基本概念

所谓的十二栅格指的是讲一个页面划分为12个等快空间, 可以利用这个十二个等比的空间,来实现设备的自适应大小变化,所有的栅格都是用"col--"的命名风格
对于时而山歌必须清楚一点,他是与具体的设备有关的,所以在开发中针对于这样的掩饰提供有以下四种模式
- 及大型设备(col-lg-*)
- 中型设备(col-md-*)
- 小型设备(col-sm-*)
- 及小型设备(col-xs-*)
十二栅格可以直接存在,但是严格来讲为了保证程序可以出现多行数据,那么建议使用".row"样式来控制每行的栅格显示

在这里插入图片描述

示例:十二栅格布局

<html>
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<!--设置页面的宽度随着使用者的设备变化二变化 -->
	<meta name="viewport" content="width=device-width,initial-scal=1">
	<style>
		.redBorder{
			border:1px solid red;
		}
	</style>
</head>
<body>
	
	<div class="container">
		<div class="row">
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格1</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格2</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格3</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格4</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格5</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格6</div>			
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格7</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格8</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格9</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格10</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格11</div>
			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 redBorder">栅格12</div>

		</div>
	<div>
</body>
</html>

页面效果

在这里插入图片描述

但是很多时候组件有可能会很大,会出现一个栅格不够使用的情况,这个时候可以跨越栅格.
示例:跨越栅格

		<!-- 跨越栅格-->
		</div>
			<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder">栅格1</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder">栅格2</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder">栅格2</div>
		</div>

在这里插入图片描述

当跨越栅格之后,栅格的空间就会改变
但是并不是说每行的十二栅格都要使用
示例:非十二栅格

		<!-- 不占满栅格-->
		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder">栅格1</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder">栅格2</div>
		</div>

在这里插入图片描述

如果没有占满栅格,那么后面的上个空间将会进行空出.
虽然可以修改源文件将每行的栅格改为24或者其他数值,但是不建议这样使用.

调整栅格布局

默认情况下所有十二栅格的布局都是依次顺序进行出现,有时候需要改变栅格间的间距
bootstrap中提供有如下的栅格调整样式
- 向右推:col-log-push-*,col-md-push-*.col-sm-push-*,col-xs-push-*
- 向左拉/:col-log-pull-*,col-md-pull-*,col-sm-pull-*,col-xs-pull-*
示例:实现向右推

	<div class="container">

		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder col-md-push-1">栅格1**********************************************************</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder">栅格2</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder">栅格3</div>
		</div>	
	<div>

页面效果

在这里插入图片描述

发现如果向右推了一个单位长度,会与后面的栅格重叠.
示例:实现向左拉

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder col-md-pull-4" >栅格2</div>

页面效果

在这里插入图片描述

发现此时进行栅格的push和pull的操作,并不会影响其他栅格的布局.
除了推拉之外,还提供有一个"col-*-offset-*"的样式,表示空出多少个栅格
示例:实现栅格空出操作

	<div class="container">

		<div class="row">
			<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 redBorder col-md-offset-2 ">栅格1</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder " >栅格2</div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 redBorder">栅格3</div>
		</div>	
	<div>