1-11. Bootstrap网格布局详解

最新推荐文章于 2023-07-24 22:23:07 发布

ROBIN.FANG

最新推荐文章于 2023-07-24 22:23:07 发布

阅读量691

点赞数

分类专栏： jQuery Library

原文链接：www.runoob.com

版权

jQuery Library 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

Bootstrap中class类的使用：

container：获得适当的对齐和内边距
row：声明行列
col-xs-：声明移动端
col-sm-：平板电脑设备
col-md-：普通pc端设备
col-lg- ：大型台式设备

例如，col-xs-6：表示一行2列，col-md-4：表示一行三列，bootstrap中一行最多分为12列

<!DOCTYPE html>
<html>
	<head>
		<!--Bootstrap中一行可以分为12个块-->
		<meta charset="utf-8">
		<!-- 兼容移动端声明设置 -->
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
		<title></title>
		<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
		<!-- 解决H5标签兼容性 -->
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<style type="text/css">
			.kk{
				padding: 15px;
			}
		</style>

		<style type="text/css">
			
		</style>
	</head>
	<body>

	<div class="container">
		
	<div class="kk">
		Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
		Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC
		(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
	</div>
	
	<div class="row">
	<div class="col-xs-6 col-md-4">    
	<div class="kk">
		基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
		CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
	</div>
	</div>
	
	<div class="col-xs-6 col-md-4">
	<div class="kk">
		组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
		JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
		定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
	</div>
	</div>
	
	<div class="col-xs-6 col-md-4">
	<div class="kk">
		Less 是一个 CSS 预处理器，让 CSS 具有动态性。另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。
		这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins（混合）和 nesting（嵌套）
	</div>
	</div>
			
	</div>    <!-- row -->
		
	</div>   <!-- container -->
	<script src="Bootstrap/js/bootstrap.js"></script>	
	<script src="bootstrap/js/jquery-1.11.3.min.js"></script>
	</body>
</html>

ROBIN.FANG

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1-11. Bootstrap网格布局详解

Bootstrap中class类的使用：container：获得适当的对齐和内边距 row：声明行列 col-xs-：声明移动端 col-sm-：平板电脑设备 col-md-：普通pc端设备 col-lg- ：大型台式设备例如，col-xs-6：表示一行2列，col-md-4：表示一行三列，bootstrap中一行最多分为12列<!DOCTYPE html>&l...
复制链接

扫一扫

专栏目录