初学bootstrap ---栅格系统
2024-10-19 08:45:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 处理低版本IE 4.0不考虑IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口的设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入bootstrap.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<style>
div[class*="col-"]{
background: #999;
border:1px solid blue ;
height: 50px;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-11">col-lg-11</div>
</div>
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-4">col-lg-4</div>
</div>
<div class="row">
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-6">col-lg-6</div> </div>
</div>
</body>
<!-- 引入jqurry.js bootstrap.js 基于JQ开发的-->
<script src="js/jqurry-1.11.3.min.js"></script>
<script scr="js/bootstrap.js"></script>
</html>
<!-- bootstrap栅格系统 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 处理低版本IE 4.0不考虑IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口的设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入bootstrap.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<style>
div{
border:1px solid #000 ;
}
</style>
</head>
<body>
<div class="container-fluid">
aaaaaaaaaaa
</div>
<div class="container">
bbbbbbbbbb
</div>
</body>
<!-- 引入jqurry.js bootstrap.js 基于JQ开发的-->
<script src="js/jqurry-1.11.3.min.js"></script>
<script scr="js/bootstrap.js"></script>
</html>
<!-- bootstrap栅格系统 -->
<script>
/*
bootstrap栅格系统
概念
- 分12列
》row
》col
- 阈值
》1200>=
》992>=
》768>=
》768<
语法
》col-lg-
》col-md-
》col-sm-
》col-xs-
容器
container-fluid
》 流体 布局
container
》 固定 布局
》 1170
》 970
》 750
》 auto
其它
-列偏移
》col-{*}-offset-* 往后
-列排序
》col-{*}-push-* 往后
》col-{*}-pull-* 往前
-嵌套
-清浮动 clearfix
注：使用固定宽度 设置：width:1000px !important;
栅格跟浮动的区别是：浮动换行的时候会留下空隙，而栅格不会;
*/ </script>
最新文章
- 瞎BB
- python 培训之Django
- 横竖屏切换时,Activity的生命周期
- 判断图片的类型（图片是data类型 ）
- 《DSP using MATLAB》示例Example4.6
- Delphi Virtual String Tree 基本用法
- JSP显示不完全问题
- CCNP第一天 Rip综合实验
- 【转】Kinect使用
- PCB流程-外型加工
- delphi实现图象灰度处理的3种方法
- 运算符重载 与 sort()
- Druid VS Antlr4
- Could not HEAD 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.0/gradle-3.2.0.pom'.
- JavaScript时间日期函数
- 一加将在欧洲推出第一款商用 5G 手机
- SDUT 3002-素数间隙（素数筛+暴力）
- 【CLR】解析CLR的托管堆和垃圾回收
- Linux查看访问IP
- day32-常见内置模块一(random、time、datetime、os、sys)