Bootstrap学习笔记-栅格系统

        栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了。一般如果我们用电脑作为显示器的我们用的样式是col-md

如果你用的显示期变小的情况下,他是会堆叠显示的。如果不想堆叠显示的话你就col-sm等其他的样式,如果是手机显示屏的话你需要用col-xs.

    代码:

<html>
<head>
	<meta charset="utf-8">
	<title>布局</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<script type="text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src = "bootstrap/js/bootstrap.js"></script>
	<meta name="viewport" content="width-device-width,initial-scale=1">

</head>
<body>
	<div class="container">

	<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 class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>

    </div>

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

   	</div>

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

   	</div>

   	<div class="row show-grid">
   		<div class="col-md-6">.col-md-6</div>
   		<div class="col-md-6">.col-md-6</div>

   	</div>

</body>
</html>

  

时间: 2024-10-11 11:16:24

Bootstrap学习笔记-栅格系统的相关文章

Bootstrap学习笔记之整体架构

之前有粗略地看过一下Bootstrap的内容,不过那只是走马观花式地看下是怎么用的,以及里面有什么控件,所以就没想着记笔记.现在由于要给部门做分享,所以不得不深入地去学习下,不然仅是简单地说下怎么用,那就无异于“谋杀”别人(浪费别人的时间等于谋财害命——鲁迅). 1.整体架构 下图为Bootstrap的整体架构图,共分为六大部分:  1.1.12栅格系统 12栅格系统就是把网页的总宽度平分为12份,我们可以自由按份组合.栅格系统使用的总宽度可以不固定,Bootstrap是按百分比进行平分.(保留

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont

bootstrap学习笔记(一)

默认栅格系统:  bootstrap的默认栅格系统为12列.形成一个940px宽的容器,默认没有启用 响应式布局 .如果加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整.在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠. 简单布局:对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可.由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数).

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

BootStrap 学习笔记二

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏

BootStrap 学习笔记三

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 I

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex