Bootstrap 样式的中栅格系统的使用

最新推荐文章于 2021-11-18 16:21:57 发布

qq_121642675

最新推荐文章于 2021-11-18 16:21:57 发布

阅读量175

点赞数

分类专栏：响应式布局 java 文章标签： bootstrap java jquery javascript html

本文链接：https://blog.csdn.net/qq_27460209/article/details/105488100

版权

java 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

响应式布局

4 篇文章 0 订阅

订阅专栏

Bootstrap的基本模板：

<html>
<head lang="en">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
	<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
	<script src="js/jquery-1.12.4.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>

列组合：

<div class="container">
	<div class="row">
  		<div class="col-md-8">.col-md-8</div>
  		<div class="col-md-4">.col-md-4</div>
	</div>
</div>

以下为界面效果:
在这里插入图片描述
列嵌套:

<div class="row">
  	<div class="col-md-9">Level 1: .col-md-9
    	<div class="row">
      	<div class="col-md-6"> Level 2: .col-md-6</div>
      	<div class="col-md-6">Level 2: .col-md-6</div>
   	 </div>
  	</div>
	<div class="col-md-3"></div>
</div>

效果:
在这里插入图片描述
列排序:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

效果:
在这里插入图片描述
列偏移:

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

Bootstrap 样式的中栅格系统的使用主要就是指:列组合、列偏移、列嵌套、列排序四种方式，以上就是四种方式的介绍和使用方法，其中使用到的js文件大家可以去官网去下载！

qq_121642675

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 样式的中栅格系统的使用

Bootstrap的基本模板：<html><head lang="en"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0/><link href="css/bootstrap.css" rel="stylesheet"&gt...
复制链接

扫一扫