<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } /*通过css 去获取屏幕的宽度*/ .container{ height: 500px; background-color: green; } /*获取屏幕的宽度,指定区间的布局 1:大于1200px 我们叫做超大屏设备 2: 992---1200px 之间的,中等屏幕设备 1024 3: 768---992 之间 我们小屏幕设备 主要是paid 4:小于768px 的设备我们都叫做 移动设备。 */ /*最大的宽度是768px ,这个区间的样式*/ /* 中等屏幕设备 所谓的响应式布局,通过获取屏幕宽度去设置指定区间的布局,同样的样式,我要写四份。 */ @media screen and (max-width: 1200px){ .container{ height: 300px; background-color: #c9302c; } } /*针对的是小屏幕设备*/ @media screen and (max-width: 992px){ .container{ height: 100px; background-color: yellowgreen; } } /*针对的是移动设备*/ @media screen and (max-width: 768px){ .container{ height: 200px; background-color: pink; } } </style> </head> <body> <!-- container 容器 --> <div class="container"></div> </body> </html>
1、媒体查询;
<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 指定编码的,数据只要在网络上面传递,就会涉及到乱码问题。 请求的数据,我给服务器的,一般情况下get 方法,post 方式。 如果涉及到数据提交,你就使用post 方式提交的。 响应的数据 他后台的数据是什么样的编码 告诉客户端浏览器以什么样的编码去解析数据 Content-Type:text/html;charset=utf-8; --> <meta charset="utf-8"> <!-- 如果客户端的浏览器版本是ie,就以最高的渲染引擎去解析页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口,针对移动设备才会有效果--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>bootstrap 的基本使用</title> <!-- 这个是bootstrap 的核心的css 文件,这个里面有一些自带的样式 --> <link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <!-- html5的语义标签在ie8以下不能被解析,导入这个js 文件,就是处理语义标签的兼容性 --> <script src="../lib/html5shiv/html5shiv.min.js"></script> <!--respond 响应的意思 处理的是ie8 以下的响应式media query 这个文件不支持本地打开。 --> <script src="../lib/respond/respond.js"></script> </head> <body> <!-- 这个是jQuery 的文件,bootstrap 依赖jQuery --> <script src="../lib/jQuery/jquery.min.js"></script> <!--bootstrap 的核心js 压缩文件 ,处理轮播图,js 效果的--> <script src="../lib/boostrap/js/bootstrap.js"></script> </body> </html>
2、booststrap 的模板引用;
<!-- 引用字体图标 假设我想使用bootstrap 的字体 使用这个样式glyphicon 代表span 里面都使用bootstrap 的字体 glyphicon-menu-down 意味着boostrap 会给当前元素下面添加一个伪元素,伪元素的内容是\e259 <span class="glyphicon glyphicon-menu-down"></span> <!--
3、bootstrap的按钮
<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 指定编码的,数据只要在网络上面传递,就会涉及到乱码问题。 请求的数据,我给服务器的,一般情况下get 方法,post 方式。 如果涉及到数据提交,你就使用post 方式提交的。 响应的数据 他后台的数据是什么样的编码 告诉客户端浏览器以什么样的编码去解析数据 Content-Type:text/html;charset=utf-8; --> <meta charset="utf-8"> <!-- 如果客户端的浏览器版本是ie,就以最高的渲染引擎去解析页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口,针对移动设备才会有效果--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>bootstrap 的表单</title> <!-- 这个是bootstrap 的核心的css 文件,这个里面有一些自带的样式 --> <link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <!-- html5的语义标签在ie8以下不能被解析,导入这个js 文件,就是处理语义标签的兼容性 --> <script src="../lib/html5shiv/html5shiv.min.js"></script> <!--respond 响应的意思 处理的是ie8 以下的响应式media query 这个文件不支持本地打开。 --> <script src="../lib/respond/respond.js"></script> </head> <body> <!-- 按钮的使用 Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">(危险)Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">(链接)Link</button> <!-- 这个是jQuery 的文件,bootstrap 依赖jQuery --> <script src="../lib/jQuery/jquery.min.js"></script> <!--bootstrap 的核心js 压缩文件 ,处理轮播图,js 效果的--> <script src="../lib/boostrap/js/bootstrap.js"></script> </body> </html>
4、表单的使用;
<form > <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
5、轮播图的使用;
<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 指定编码的,数据只要在网络上面传递,就会涉及到乱码问题。 请求的数据,我给服务器的,一般情况下get 方法,post 方式。 如果涉及到数据提交,你就使用post 方式提交的。 响应的数据 他后台的数据是什么样的编码 告诉客户端浏览器以什么样的编码去解析数据 Content-Type:text/html;charset=utf-8; --> <meta charset="utf-8"> <!-- 如果客户端的浏览器版本是ie,就以最高的渲染引擎去解析页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口,针对移动设备才会有效果--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>bootstrap 的表单</title> <!-- 这个是bootstrap 的核心的css 文件,这个里面有一些自带的样式 --> <link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <!-- html5的语义标签在ie8以下不能被解析,导入这个js 文件,就是处理语义标签的兼容性 --> <script src="../lib/html5shiv/html5shiv.min.js"></script> <!--respond 响应的意思 处理的是ie8 以下的响应式media query 这个文件不支持本地打开。 --> <script src="../lib/respond/respond.js"></script> </head> <body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/slide_01_2000x410.jpg" alt="..."> <div class="carousel-caption"> 北京大学 </div> </div> <div class="item"> <img src="images/slide_02_2000x410.jpg" alt="..."> <div class="carousel-caption"> 清华大学程序员 </div> </div> <div class="item"> <img src="images/slide_03_2000x410.jpg" alt="..."> <div class="carousel-caption"> 酷丁鱼 </div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- 这个是jQuery 的文件,bootstrap 依赖jQuery --> <script src="../lib/jQuery/jquery.min.js"></script> <!--bootstrap 的核心js 压缩文件 ,处理轮播图,js 效果的--> <script src="../lib/boostrap/js/bootstrap.js"></script> </body> </html>
6、栅格系统
<!--现在要学习栅格系统,在学习栅格系统之前,需要学习一个叫做container 容器 这个容器是bootstrap 自带的容器,以后的栅格系统里面的内容都放在这个container 容器 里面 这个是一个响应式容器,如果是响应式容器的话,他就可以去适应各种屏幕 我们之前使用的是最大 max-width ,现在是min-width 假设是超大屏幕,大于1200px ,这个时候container 的宽度1170 假设是中等屏幕 992-1200px 这个时候container 的宽度 970px 假设是小屏幕设备, 768-992px 这个时候container 的宽度 750px 假设是移动设备,小于768px ,这个container 的宽度是适配整个屏幕的宽度 这个contanier 版心容器 说有padding 的一个间隔。响应式容器 栅格系统:这个是用来做响应式布局的,我们之前在页面里面学习布局,一般情况下我们使用div 布局, 我们还有table 布局。表格布局,表格布局多行,多列。 栅格系统,其实也是多行多列。 --> <div class="container"> <!-- 定义一行 --> <div class="row"> <!--这个行里面放置多少列 默认有一个样式,把container 的padding 清除掉了 margin-left:-15px; --> 大发发的 </div> </div> <!--这个是一个流式布局容器 width:100%; --> <div class="container-fluid"></div>
7、
<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 指定编码的,数据只要在网络上面传递,就会涉及到乱码问题。 请求的数据,我给服务器的,一般情况下get 方法,post 方式。 如果涉及到数据提交,你就使用post 方式提交的。 响应的数据 他后台的数据是什么样的编码 告诉客户端浏览器以什么样的编码去解析数据 Content-Type:text/html;charset=utf-8; --> <meta charset="utf-8"> <!-- 如果客户端的浏览器版本是ie,就以最高的渲染引擎去解析页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口,针对移动设备才会有效果--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>bootstrap 的基本使用</title> <link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <script src="../lib/html5shiv/html5shiv.min.js"></script> <script src="../lib/respond/respond.js"></script> <style> .container{ height: 700px; } .container .row>div{ height: 40px; background-color: green; border: 1px solid #fff; } </style> </head> <body> <div class="container"> <div class="row"> <!--定义列 列,水平方向摆放 在栅格系统看来,每一行默认是放置12列,col-lg-3 每一列占1/4 我们的屏幕的分为四种类型的屏幕 超小屏幕 移动设备,小于768 col-xs-6 小屏幕 paid 768-992 col-sm-3 中等屏幕 992-1200 col-md-2 设置的是中等屏幕 超大屏幕 大于1200 col-lg-1 设置的是超大屏幕的对应的列的所占的比例 --> <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6"> </div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6"></div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6"></div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6"></div> <div class="col-lg-2 col-md-2 col-sm-3 col-xs-6"></div> </div> </div> <!--这个是一个流式布局容器 width:100%; --> <div class="container-fluid"></div> <script src="../lib/jQuery/jquery.min.js"></script> <!--bootstrap 的核心js 压缩文件 ,处理轮播图,js 效果的--> <script src="../lib/boostrap/js/bootstrap.js"></script> </body> </html>
8、
<style> .container{ height: 700px; } .container .row>div{ height: 40px; background-color: green; border: 1px solid #fff; } </style> </head> <body> <!--控制列的偏移,向左偏移多少,向右偏移多少。 pull 拉 push 推 --> <div class="container"> <div class="row"> <!-- 向右推6个间隔 --> <div class="col-lg-3 col-lg-push-3">1111</div> <!-- <!–向左拉三个格子–> <div class="col-lg-6 col-lg-pull-3">adsfadsfadsfasdf</div>--> </div> </div> <!--这个是一个流式布局容器 width:100%; --> <div class="container-fluid"></div>
9、栅格系统列偏移
<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 指定编码的,数据只要在网络上面传递,就会涉及到乱码问题。 请求的数据,我给服务器的,一般情况下get 方法,post 方式。 如果涉及到数据提交,你就使用post 方式提交的。 响应的数据 他后台的数据是什么样的编码 告诉客户端浏览器以什么样的编码去解析数据 Content-Type:text/html;charset=utf-8; --> <meta charset="utf-8"> <!-- 如果客户端的浏览器版本是ie,就以最高的渲染引擎去解析页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口,针对移动设备才会有效果--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>bootstrap 的基本使用</title> <link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <script src="../lib/html5shiv/html5shiv.min.js"></script> <script src="../lib/respond/respond.js"></script> <style> .container{ height: 700px; } .container .row>div{ height: 40px; background-color: green; border: 1px solid #fff; } </style> </head> <body> <!--控制列的偏移,向左偏移多少,向右偏移多少。 pull 拉 push 推 --> <div class="container"> <div class="row"> <!-- 向右推6个间隔 --> <div class="col-lg-3 pull-right">1111</div> <div class="col-lg-3 pull-left">222</div> </div> </div> <script src="../lib/jQuery/jquery.min.js"></script> <!--bootstrap 的核心js 压缩文件 ,处理轮播图,js 效果的--> <script src="../lib/boostrap/js/bootstrap.js"></script> </body> </html>
10 栅格系统 列浮动
11 栅格系统响应式
<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 指定编码的,数据只要在网络上面传递,就会涉及到乱码问题。 请求的数据,我给服务器的,一般情况下get 方法,post 方式。 如果涉及到数据提交,你就使用post 方式提交的。 响应的数据 他后台的数据是什么样的编码 告诉客户端浏览器以什么样的编码去解析数据 Content-Type:text/html;charset=utf-8; --> <meta charset="utf-8"> <!-- 如果客户端的浏览器版本是ie,就以最高的渲染引擎去解析页面。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口,针对移动设备才会有效果--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>bootstrap 的基本使用</title> <link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <script src="../lib/html5shiv/html5shiv.min.js"></script> <script src="../lib/respond/respond.js"></script> <style> .container{ height: 700px; } .container .row>div{ height: 40px; background-color: green; border: 1px solid #fff; } </style> </head> <body> <div class="container"> <div class="row hidden-sm hidden-xs"> <!--如果是小屏幕或者是移动设备,我就把这个row 隐藏掉 hidden-sm 针对小屏幕隐藏,针对超小屏幕也隐藏 --> <div class="col-lg-3">1111</div> <div class="col-lg-3">大发发的</div> <div class="col-lg-3">1111</div> <div class="col-lg-3">大发发的</div> </div> </div> <script src="../lib/jQuery/jquery.min.js"></script> <!--bootstrap 的核心js 压缩文件 ,处理轮播图,js 效果的--> <script src="../lib/boostrap/js/bootstrap.js"></script> </body> </html>
<form >
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>