响应式开发（bootstrap）

最新推荐文章于 2021-11-03 20:35:56 发布

佛系小菜鸡

最新推荐文章于 2021-11-03 20:35:56 发布

阅读量341

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_40224261/article/details/104288488

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

响应式开发

响应式开发原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目度。
响应式需要一个父级作为布局容器，来配合子级元素来实现效果变化。就是在不同的屏幕下，通过配体查询来改变这个布局容器的大小，再改变子元素的排列方式呵呵大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

常用的尺寸

在这里插入图片描述

手机：设置宽度为100%
平板：设置宽度为750px
桌面显示器：设置宽度为970px
大桌面显示器：设置宽度为1170px

Bootstrap

bootstrap中文网：https://www.bootcss.com/

本文章的bootstrap介绍的是bootstrap4版本

Bootstrap简介

Bootstrap来自Twitter（推特），是一个前端框架，是基于html、css和JavaScript开发的，它简介灵活，使得web开发更加快捷

优点：

标准的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更加简单，提高开发的效率

基础模板

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和pc端一致 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 要求当前页面使用ie浏览器的最高版本的内核来渲染 -->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<body>
	
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

布局容器

bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类（因此不需要想之前一样再去写那些媒体查询了），叫.container,它提供了两个作此用处的类

container类（响应式开发使用）

响应式布局的容器固定宽度
大屏( >=1200px)宽度定为1170px
中屏(>=992px)宽度定为970px
小屏(>=768px)宽度定为750px
超小屏(100%)

container-fluid类（使用移动端开发可以考虑使用）

流式布局容器百分百宽度
占据全部视口（viewport）的容器
适合单独做移动开发

Bootstrap栅格系统

栅格系统，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
bootstrap里面的container宽度死固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份。

栅格选项参数

栅格系统用于通过一些列的行（row）与列（column）的组合来创建页面布局
在这里插入图片描述

注意：

列数最好相加为12，若大于12则多与的列会另一行显示
行（row）必须放到container布局容器中
每一列默认有15px的padding
可以同时为一列指定多个设备的类名，以便划分不同分时，例如<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>

代码示例：

实现效果：
在大屏下每行四个，在中屏下每行3个，在小屏下每行2个，在超小屏下每行1个

css代码：
	<style type="text/css">
		[class^="col"]{
			border: 2px solid #008000;
		}
	</style>

html代码：
	<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>

			</div>
		</div>

列嵌套

在这里插入图片描述
注意：列嵌套和row更配哦，我们在列嵌套加一行row，可以取消父元素的padding值，而且高度自动和父级一样高

代码示例：

css样式：


			[class^="col"] {
				border: 2px solid #008000;
			}

			.bg div {
				background-color: #7FFF00;
				border: 2px solid black;
				
			}

	<!-- 列嵌套 -->
	<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
					<div class="row bg">
						<div class="col-lg-6">a</div>
						<div class="col-lg-6">b</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>

			</div>
		</div>

效果展示

列偏移

使用offset-md-份数来实现列向右偏移。这个类的实现其实是通过为当前元素添加左侧的外边距来实现的。
代码示例：

<div class="col-md-4 offset-md-4"></div>

列排序

通过order-（1-12）来进行顺序的排列，也能用.order-first and .order-last表示第一个和最后一个

代码示例：

			<div class="row box">
				<div class="col-md-4 order-3">1</div>
				<div class="col-md-4">2</div>
				<div class="col-md-4">3</div>
			</div>

效果图：
在这里插入图片描述

显示与隐藏

在这里插入图片描述

代码示例：

<div class="col-md-4 d-none d-md-block">2</div>

字体图标

font-awesome中文网：http://www.fontawesome.com.cn/

在bootstrap4中，去除了内置的字体图标，但是可以引用外部网站的字体图标。而我所用的则是font-awesome，去其官网下载，进行引用css即可。

<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />

佛系小菜鸡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式开发（bootstrap）

响应式开发响应式开发原理使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目度。响应式需要一个父级作为布局容器，来配合子级元素来实现效果变化。就是在不同的屏幕下，通过配体查询来改变这个布局容器的大小，再改变子元素的排列方式呵呵大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。常用的尺寸手机：设置宽度为100%平板：设置宽度为750px桌面显示器：设置宽度...
复制链接

扫一扫

专栏目录