5.响应式布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/> <style type="text/css"> /* 手机 */ @media (max-width: 768px) { body{ background-color: red; } h1{ color: green; } img{ width: 200px; } } /* pad */ @media (min-width: 768px) { body{ background-color: yellow; } h1{ color: blue; } img{ width: 400px; } } /* 桌面显示器 */ @media (min-width: 992px){ body{ background-color: blue; } h1{ color: yellow; } img{ width: 800px; } } /* 大桌面显示器 */ @media (min-width: 1200px) { body{ background-color: green; } h1{ color: red; } img{ width: 1600px; } } </style> </head> <body> <h1>文本测试</h1> <img src="0.jpg" > <!-- 手机:文字绿 图片宽200px --> <!-- pad:文字蓝 图片宽400px --> <!-- 桌面显示器:文字黄 图片宽800px --> <!-- 大桌面显示器:文字红 图片宽1600px --> </body> <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> <script type="text/javascript" src="../bootstrap3/js/holder.js"></script> <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> </html>
6.栅格系统
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" /> <style type="text/css"> div { border: 1px solid red; } </style> </head> <body> <!-- 栅格系统必须有一个表示行的div class值为row --> <div class="row"> <div class="col-md-6">占6列</div> <div class="col-md-6">占6列</div> </div> <div class="row"> <div class="col-md-4">占4列</div> <div class="col-md-4">占4列</div> <div class="col-md-4">占4列</div> </div> <!-- 带有居中效果的一行 container容器--> <div class="container"> <div class="row"> <div class="col-md-6">占6</div> <div class="col-md-6">占6</div> </div> </div> <!-- 练习:1.创建5: 1的2部分--> <div class="row"> <div class="col-md-10">占10列</div> <div class="col-md-2">占2列</div> </div> <!-- 练习:2.创建1:2:1的3部分 --> <div class="row"> <div class="col-md-3">占1列</div> <div class="col-md-6">占2列</div> <div class="col-md-3">占1列</div> </div> <!-- 练习:3.创建1:2:3的3部分并且居中 --> <div class="container"> <div class="row"> <div class="col-md-2">占2列</div> <div class="col-md-4">占4列</div> <div class="col-md-6">占6列</div> </div> </div> <h3>栅格嵌套</h3> <div class="row"> <div class="col-md-5"> <div class="row"> <div class="col-md-6">占5中的6/12</div> <div class="col-md-6">占5中的6/12</div> </div> </div> <div class="col-md-7"> <div class="row"> <div class="col-md-4">占7中的4/12</div> <div class="col-md-4">占7中的4/12</div> <div class="col-md-4">占7中的4/12</div> </div> </div> </div> </body> <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> <script type="text/javascript" src="../bootstrap3/js/holder.js"></script> <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> </html>
7.响应式栅格系统
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/> <style type="text/css"> div{ border:1px solid red; } </style> </head> <body> <!-- 桌面显示器是一行显示4个 如果是pad一行显示2 栅格系统默认手机尺寸是一行显示1个--> <div class="row"> <div class="col-md-3 col-sm-6">刘德华</div> <div class="col-md-3 col-sm-6">刘德华</div> <div class="col-md-3 col-sm-6">刘德华</div> <div class="col-md-3 col-sm-6">刘德华</div> </div> <!-- 练习:大显示器一行显示6个 桌面显示器4个 pad一行2个 手机一行一个 --> <div class="row"> <div class="col-md-3">张学友</div> <div class="col-md-3">张学友</div> <div class="col-md-3">张学友</div> <div class="col-md-3">张学友</div> <div class="col-md-3">张学友</div> <div class="col-md-3">张学友</div> <div class="col-md-3">张学友</div> <div class="col-md-3">张学友</div> </div> </body> <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> <script type="text/javascript" src="../bootstrap3/js/holder.js"></script> <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> </html>
