bootstrap（一）

最新推荐文章于 2020-12-01 08:13:59 发布

都说网名长一点比较好看

最新推荐文章于 2020-12-01 08:13:59 发布

阅读量598

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/weixin_45026680/article/details/104690117

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootstrap的基础介绍：

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
其中一个特色是响应式的布局，不同于传统的使用固定分割点来布局网页。
实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

1.以下是课工场中关于bootstrap的基础内容介绍：
在这里插入图片描述

2.栅格系统的工作原理

1.行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment
）和内补（padding）。
2.通过行（row）在水平方向创建一组列（column）。
3.自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素。
4.类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。
5.通过为列设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消为.container元素设置的padding，也就间接为行（row）所包含的列（column）抵消掉了padding。
6.栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。
7.如果一行（row）中包含了的列（column）大于12，多余的列所在的元素将作为一个整体另起一行排列。
8.栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类。
在这里插入图片描述

栅格的简单使用：
进行简单的行、列使用。根据所占的比例来划分局域布局。

3.如何使用bootstrap进行响应式布局

首先需要head中引入meta标签，添加viewpirt属性，content中宽度等于设备宽度， initial-scale:页面首次被显示可见区域的缩放级别，取值1则页面按实际尺寸显示，无任何缩放；maximum-scale:允许用户缩放到的最小比例；user-scalable:用户是否可以手动缩放。

具体代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

以图片的响应式布局为例：
第一步：
在head处引入上面的两行代码。
第二步：
利用栅格将图片的区域大致划分，以及在各种屏幕上所占的比例为多少（大概即可）。
将计算好的比例，利用row、col代码进行简单规划。
第三步：
插入图片（为了让图片在屏幕上适应，因此需要为图片添加两个类）如下图所示：
在这里插入图片描述
效果图：

完整代码如下：
如有需要可根据需求适当修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../bootstrap-4.4.1-dist/css/bootstrap.min.css"/>
		<script src="../../bootstrap-4.4.1-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				margin-top: 30px;
			}
			div{
				outline: 1px solid red;
			}
		</style>
	</head>
	
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-9 col-sm-6 col-xs-12"><img src="image/oleg.png " class="table-responsive-md table-responsive-sm"/></div>
				<div class="col-md-3 col-sm-6 col-xs-12"  ><img src="image/oksana.png" class="table-responsive-md table-responsive-sm"/></div>
			</div>
			<div class="row">
				<div class="col-md-4 col-sm-4 col-xs-12">col-md-4</div>
				<div class="col-md-4 col-sm-4 col-xs-12">col-md-4</div>
				<div class="col-md-4 col-sm-4 col-xs-12">col-md-4</div>
			</div>
			<!--<div class="row">
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
			</div>
		</div>
	</body>
</html>

都说网名长一点比较好看

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap（一）

bootstrap的基础介绍：Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。其中一个特色是响应式的布局，不同于传统的使用固定分割点来布局网页。实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。...
复制链接

扫一扫

专栏目录