bootStrap

最新推荐文章于 2021-04-12 19:02:51 发布

数字世界

最新推荐文章于 2021-04-12 19:02:51 发布

阅读量165

点赞数

分类专栏：笔记文章标签： bootstrap html5 javascript css jquery

本文链接：https://blog.csdn.net/leiunit/article/details/114602606

版权

本文详细介绍了BootStrap框架，包括布局容器如.container和.container-fluid，栅格系统及其各种组合、偏移和排序，常用样式如代码块、表格和表单，以及导航、模态框等插件的使用方法。通过实例展示了如何利用BootStrap实现响应式设计。

摘要由CSDN通过智能技术生成

一、bootStrap介绍

BootStrap是一套现成的css样式集合

html,css,js框架，用于开发响应式布局

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
</head>
<body>
	<h1>hello world</h1>
	<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>

二、布局容器和栅格网格系统

1.布局容器

1 .container类用于固定宽度并支持响应式布局的容器

2 .container-fluid类用于100%宽度，占据全部视口（viewport）的容器

		<!-- 固定宽度，两侧有留白 -->
		<div class="container" style="background-color: wheat;height: 300px;"></div>
		<!-- 完整宽度， -->
		<div class="container-fluid" style="background-color: wheat;height: 300px;"></div>

2.栅格网格系统

container、row、xs、sm、md、ld

数据行（.row）必须包含在容器（.container）中

.col设置在.row中

	<div class="container">
		<!-- 栅格系统 -->
		<!-- 行 -->
		<div class="row">
			<!-- 列 -->
			<div class="col-md-4" style="background-color: bisque;">4</div>
			<div class="col-md-8" style="background-color: palegreen;">8</div>
		</div>
	</div>

2.1、列组合

通过改变数字合并列，总数不超过12在同一行，超过12换行

<div class="container">
		<!-- 栅格系统 -->
		<!-- 行 -->
		<div class="row">
			<!-- 列 -->
			<div class="col-md-2" style="background-color: bisque;">2</div>
			<div class="col-md-8" style="background-color: palegreen;">8</div>
		</div>
		<div class="row">
			<!-- 列 -->
			<div class="col-md-2" style="background-color: deeppink;">2</div>
			<div class="col-md-3" style="background-color: palegreen;">3</div>
			<div class="col-md-3" style="background-color: bisque;">2</div>
			<div class="col-md-3" style="background-color: palegreen;">3</div>
		</div>
	</div>

2.2、列偏移

在类中设置col-md-offset

			<div class="row">
			<!-- 列 -->
			<div class="col-md-2" style="background-color: deeppink;" >2</div>
			<div class="col-md-3 col-md-offset-1" style="background-color: palegreen;">3</div>
			<div class="col-md-3" style="background-color: bisque;">2</div>
			<div class="col-md-3" style="background-color: palegreen;">3</div>
		</div>

2.3、列排序

改变列的方向左右浮动

通过添加类名 col-md-push-* 和 col-md-pull-*

		<div class="row">
			<!-- 列 -->
			<div class="col-md-2" style="background-color: deeppink;" >2</div>
			<

最低0.47元/天解锁文章

数字世界

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录