移动web——bootstrap栅格系统
2024-08-23 00:45:36
基本简介
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>
最新文章
- HDFS shell
- SQL Server 2008中SQL增强之三:Merge(在一条语句中使用Insert,Update,Delete) 一条语句实现两表同步(添加、删除、修改)
- 初探接口测试框架--python系列3
- c/c++中主线程退出,子线程也会退出
- js 数组去重复键
- spring使用ehcache
- 2015必须推荐的Android框架,猿必读系列!
- 教你使用vim表白
- java IO类图
- Linux 开放端口
- yum -y 与yum有何区别(转载)
- Gson解决字段为空是报错的问题
- easyui combobox下拉框文字超出宽度有横向滚轮
- 【转载】SQL Server - 使用 Merge 语句实现表数据之间的对比同步
- hibernate hql where语句拼接工具类
- jQuery下拉框操作系列$(";option:selected";,this) &;&;(锋利的jQuery)
- SQL必知必会 -------- 聚集函数、分组排序
- Spark2.0机器学习系列之1: 聚类算法(LDA)
- MAC通过SSH使用PEM文件登录
- CentOS 7安装Perl环境
热门文章
- hdu 1533KM算法
- [K/3Cloud] KSQL日期常量用法注意
- Linux下汇编语言学习笔记74 ---
- 在DJANGO中如何定义get_absolute_url
- windows 2008 64位在指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配
- POJ 2485 Highways 最小生成树 (Kruskal)
- OC中APPDelegate[[UIApplication shareApplication]delegate]]Swift实现
- HDOJ题目4417 Super Mario(划分树求区间比k小的个数+二分)
- NSDate 格式化 及 互转
- YOCTO