移动web——bootstrap栅格系统
基本简介
1、Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
2、栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局
3、“行(row)”必须包含在 .container
(固定宽度)或 .container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
基本案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.row div {
border: 1px solid #000;
}
</style> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-10">10</div>
</div>
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-10">10</div>
</div>
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-10">10</div>
</div>
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-10">10</div>
</div>
</div> <br><br> <div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介1</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介3</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介5</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介6</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介7</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介8</div>
</div>
</div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
移动web——bootstrap栅格系统的更多相关文章
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
- Bootstrap栅格系统(布局)
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 入门——Bootstrap栅格系统
作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...
- Bootstrap栅格系统基本使用
1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...
- Bootstrap 栅格系统初识
以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...
- 第二百三十五节,Bootstrap栅格系统
Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...
随机推荐
- SVN提交时报错:Commit blocked by pre-commit hook (exit code 1) with no output.
可能的原因: 提交代码的SVN命令中,Comment长度短了.参考:http://tortoisesvn.net/docs/nightly/TortoiseSVN_en/tsvn-howto-minl ...
- *** + Polipo 配置全局代理(Linux 版本)
转,原文:http://blog.csdn.net/jon_me/article/details/53525059 我本来是想查这个问题: How to start server and local ...
- Analyze提示:Value stored to "***"is never read
text这个变量没有被使用,在当前类中搜索'text'这个变量发现仅仅是被赋值并没有被使用. 提示意思是:删除或者凝视这行代码;
- 自己动手写reg注册表文件
自己动手写reg注册表文件 2015-01-12 20:23 1161人阅读 评论(1) 收藏 举报 分类: 玩转Windows应用层编程(12) 版权声明:本文为博主原创文章,未经博主允许不得转 ...
- oracle11g 手工建库步骤
#create oracle instance parameter vi initkevin.or db_name='kevin' memory_target=0 sga_max_size=5G sg ...
- linux下非root用户怎样改动root权限的文件
在linux下会出现把一些配置文件參数配错.rootpassword忘记等导致系统无法启动或进入root的窘迫境界.本文以redhat enterprise linux server ...
- 批量ssh执行命令
[root@openfire1 script]# cat test.sh #!/bin/bash #本地通过ssh执行远程服务器的脚本 for ip in `cat iplist` do ...
- mp3播放时间
import os os_sep = os.sep this_file_abspath = os.path.abspath(__file__) this_file_dirname, this_file ...
- pygame save that Stream as video output.
python - how to save pygame camera as video output - Stack Overflow https://stackoverflow.com/quest ...
- python 循环高级用法 [expression for x in X [if condition] for y in Y [if condition] ... for n in N [if condition] ]按照从左至右的顺序,分别是外层循环到内层循环
高级语法 除了像上面介绍的 [x ** 2 for x in L] 这种基本语法之外,列表推导式还有一些高级的扩展. 4.1. 带有if语句 我们可以在 for 语句后面跟上一个 if 判断语句,用于 ...