本文目录：
一、栅格系统
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>栅格系统</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <style> .row div { height: 60px; } .box { width: 800px; height: 60px; /*margin: 0 0000;*/ background-color: black; } </style> </head> <body> <div class="container"> <div class="row bg-pink"> <!--栅格系统--> <!--1.将父级的width等分为12等分, 子级占父级宽度的多少等分--> <!--2.子级们的总占比不要超过12等分--> <!--3.在12等分内,子级同行显示--> <div class="bg-danger col-md-4"></div> <div class="bg-info col-md-9"></div> </div> <div class="row box bg-warning"> <!--4.总占比小于12等分,偏移通过col-?-offset-?来偏移--> <!--5.设置一个平面宽度下的栅格, 大于该屏幕尺寸,可以运用此套css 小于该屏幕尺寸,不适用, 但可以接着设置更小屏幕尺寸的栅格--> <div class="bg-danger col-md-4 col-sm-6 col-xs-10"></div> <div class="bg-info col-md-7 col-md-offset-1 col-sm-6 col-xs-12"></div> </div> </div> </body> <script src="js/jquery-3.3.1.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </html>
二、移动端适配
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移动端适配</title> <!--注: 当页面没有适配移动端设备--> <!--注; 移动端设备不再以屏幕像素px作为布局宽度, 以屏幕像素点作为屏幕布局宽度--> <meta name="viewport" content="width=device-width, user-scalable=no"> <!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">--> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <style> .row.bg-pink { height: 60px; width: 375px; } </style> </head> <body> <div class="container-fluid"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <div class="container"> <div class="row bg-pink"> </div> </div> </body> <script src="js/jquery-3.3.1.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </html>
三、栅格系统案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>案例</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <style> .row { /*background-color: yellow;*/ } .box { height: 60px; /*margin: 0 -15px;*/ } .left { margin-right: 25px; } .right { margin-left: 25px; } </style> </head> <body> <!--需求1--> <!--两个盒子之间间距为30px--> <div class="container"> <div class="row"> <div class="container col-md-6"> <div class="box bg-warning"></div> </div> <div class="container col-md-6"> <div class="box bg-danger"></div> </div> </div> </div> <!--两个盒子之间间距50px, 且左右没有留白--> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="box bg-warning left"></div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="box bg-danger right"></div> </div> </div> </div> </div> <!--重点: 在任何结构下, 需要容器就可以设置容器来嵌套显示内容, 需要row来配个容器布局,就可以在容器内部设置row--> </body> </html>
四、表格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <style> .row { /*border: 1px solid #333;*/ } th { text-align: center; } </style> </head> <body> <div class="container"> <div class="row"> <table class="table table-striped table-bordered table-hover"> <tr> <th>标题</th> <th>标题</th> <th>标题</th> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr class="success"> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td class="danger">单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td class="info" colspan="2" style="text-align: center">单元格</td> <!--<td>单元格</td>--> </tr> </table> </div> </div> </body> <script src="js/jquery-3.3.1.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> </html>
五、表单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <style> .form-group { /*margin-bottom: 0;*/ } </style> </head> <body> <div class="container"> <div class="row"> <form action=""> <div class="form-group"> <!--label的for是关联匹配的input的id, 当label点击时会让input获取焦点--> <label for="usr">用户名:</label> <input class="form-control" type="text" name="usr" id="usr"> </div> <div class="form-group"> <label for="pwd">密码:</label> <input class="form-control" type="password" name="pwd" id="pwd"> </div> <div class="form-group checkbox"> <!--复选框--> <label> <input type="checkbox" value="reading" name="sk">请阅读 </label> </div> </form> <!--总结: form中分行用form-group, 采用bs的js处理,input添加form-control--> </div> <hr> <div class="row"> <form class="form-inline"> <!--<div class="row">--> <div class="form-group"> <label for="usr1">用户名:</label> <input type="text" class="form-control" name="usr1" id="usr1" placeholder="请输入用户名"> </div> <!--</div>--> <!--<div class="row">--> <div class="form-group"> <label for="pwd1">密码:</label> <input type="password" class="form-control" name="pwd1" id="pwd1"> </div> <!--</div>--> <button type="submit" class="btn btn-default">提交</button> </form> </div> <hr> <div class="row"> <div class="col-sm-6"> <form action="" class="form-horizontal"> <div class="form-group has-warning"> <label for="usr2" class="col-sm-2 control-label">用户名:</label> <div class="col-sm-10"> <input type="text" class="form-control" name="usr2" id="usr2" placeholder="请输入用户名"> </div> </div> <div class="form-group has-success"> <label for="pwd2" class="col-sm-2 control-label">密码:</label> <div class="col-sm-10"> <input type="password" class="form-control" name="pwd2" id="pwd2"> </div> </div> <div class="form"> <div class="col-sm-6 col-sm-offset-6"> <div class="row"> <button type="submit" class="btn-block">提交</button> </div> </div> </div> </form> </div> </div> <div class="row"> <div class="row"> <button type="button" class="btn">按钮</button> </div> <button class="btn btn-danger">按钮</button> <div class="row"> <button class="btn btn-block">按钮</button> </div> <div class="row"> <button disabled class="my-btn btn btn-lg btn-warning" style="outline: none">按钮按钮按钮按钮按钮</button> </div> </div> <div class="row"> <i class="glyphicon glyphicon-step-backward" style="font-size: 100px"></i> </div> </div> </body> <script src="js/jquery-3.3.1.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script> $('.my-btn').click(function () { alert(123) }) </script> </html>
六、循环应用
l1 = [1, ] l2 = ['a', ] l1.append(l2) l2.append(l1) del l1 del l2 print(l1)