Python web前端 10 bootstrp
1、媒体查询
<style> *{ margin: 0; padding: 0; } div{ width: 110px; height: 110px; background: yellow; } @media screen and (min-width: 500px) {#在浏览器宽度大于500px的时候,显示下面的布局 div{ width: 200px; height: 200px; background: black; }#这便是媒体查询(响应式布局):根据浏览器显示宽度不一样,展示出来的布局不一样 } </style> </head> <body> <div></div> </body>
2、布局容器
<body> <div class="container"> .container 类用于固定宽度并支持响应式布局的容器(宽度会变化) </div> <div class="container-fluid"> .container-fluid 类用于100%宽度,占据全部视口(viewport)的容器 </div> </body>
3、栅格系统
<body> <div class="container"> <div class="row"> <div class="col-md-1">1</div>#col-md-1最后面的1表示1份,总共是12份,一行不能超过12份 <div class="col-md-1">2</div> <div class="col-md-1">3</div> <div class="col-md-1">4</div> <div class="col-md-1">5</div> <div class="col-md-1">6</div> <div class="col-md-1">7</div> <div class="col-md-1">8</div> <div class="col-md-1">9</div> <div class="col-md-1">10</div> <div class="col-md-1">11</div> <div class="col-md-1">12</div> </div> <div class="row"> <div class="col-md-3">1</div>#如果浏览器屏幕小于992的时候,就会自动换行 <div class="col-md-4 col-sm-4">2</div>#若不想自动换行,就在后面加后缀sm,小于768前不会换行 <div class="col-md-5 col-sm-5 col-xs-5">3</div>#再加xs后缀,小于768也不会换行了 </div> </div> </body>
4、排版
<body> <span class="h1">我是h的标签</span>#通过加class的方式来设置字体 <span class="h2">我是h的标签</span> <span class="h3">我是h的标签</span> <span class="h4">我是h的标签</span> <span class="h5">我是h的标签</span> <span class="h6">我是h的标签</span> </body>
5、表格
#状态类 .active #鼠标悬停在行或者单元格上是所设置的颜色 .success #标识成功或者积极的动作 .info #标识普通的提示信息或动作 .warning #标识警告或需要用户注意 .danger #标识危险或潜在的带来负面影响的动作 <body> <table class="table(表格) table-striped(条纹) table-bordered(边框) table-hover(鼠标悬停) table-condensed(紧缩型)" >#单双行变样式是在table-striped里面修改的,修改样式不要再源码里面修改,将它复制到style里面改 <thead> <tr> <th>序号</th> <th>班级</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>19</td> <td>男</td> <td>18</td> </tr> <tr> <td>2</td> <td>18</td> <td>男</td> <td>18</td> </tr> <tr> <td>3</td> <td>17</td> <td>男</td> <td>18</td> </tr> </tbody> </table> </body>
6、表单
#表单 #单独的表单控件会被自动赋予一下全局变量。所有设置了.form-control类的<input>、<textarea>和<select>元素都会被默认设置宽度属性为width:100%,
将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列 <body> <div class="container"> <form class="form-inline "> #将下面的所有放在一行上面,默认是垂直排列form-horizontal <div class="form-group"> #必须写class <input type="text" class="form-control" placeholder="请输入你的账号">#输入账号 必须写class </div> <div class="form-group"> <input type="password" class="form-control" placeholder="请输入你的密码"> #输入密码 </div> <div class="form-group"> <label for=""> <input type="checkbox">点我啊 #点击框 </label> </div> <div class="form-group"> <label for="man"> <input type="radio" id="man" name="sex"> </label> <label for="woman"> <input type="radio" id="woman " name="sex"> #单选框name必须一样 </label> </div> <div class="form-group">#多选框 <select name="xz" id="xz" class="form-control"> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> <option value="1">4</option> </select> </div> </form> </div> </body>
7、按钮
<body> #以下4种方法都可以写按钮 <a class="btn btn-danger(这是颜色)" href="#" role="button">Link</a> <button class="btn btn-link btn-lg(大按钮)" type="submit">Button</button> <input class="btn btn-success btn-sm(小按钮)" type="button" value="Input"> <input class="btn btn-info btn-xs(超小按钮)" type="submit" value="Submit"> <input class="btn btn-primary" type="submit" value="Submit"> </body>
8、图片
<body> <img src="img/python.jpg" alt=""> <img src="img/python.jpg" class="img-circle" alt=""> #50% <img src="img/python.jpg" class="img-rounded" alt=""> #圆形小边角 <img src="img/python.jpg" class="img-thumbnail" alt=""> #边框 </body>
9、辅助类
<body> #修改字体颜色 <p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p> #修改背景色 <p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p> #关闭按钮 <button class="btn btn-danger"><span>×</span></button> #三角符号 <span class="caret"></span> #快速浮动 <div id="box" class="clearfix"> <div class="pull-left"></div> #左浮动 <div class="pull-right hide" ></div>#右浮动;hide能够让脱离文档流,对应的是show </div> </body>
10、字体图标
<body> <span class="glyphicon glyphicon-star-empty"></span> #添加字体图标,可以设置到大小 <button><span class="glyphicon glyphicon-star-empty"></span></button> #将字体图标放到其它东西(按钮) </body>
11、下拉框
#将下拉菜单触发器和下拉菜单都包裹在.dropdown里,或者另一个声明了position:relative;的元素,然后加入菜单的HTML代码 <body> <div class="container"> <div class="dropdown"> <button class="btn btn-info" data-toggle="dropdown">下拉菜单 <span class="caret" > </span></button> <ul class="dropdown-menu"> <li><a href="#">python</a></li> <li><a href="#">python</a></li> <li><a href="#">python</a></li> </ul> </div> </div> <br><br><br><br> <div class="container"> <div class="dropup"> #下拉菜单 <button class="btn btn-info" data-toggle="dropdown">上拉菜单 <span class="caret" > #data-toggle是来控制显示或者隐藏 </span></button> <ul class="dropdown-menu"> #必须写menu <li><a href="#">python</a></li> #必须写a标签 <li><a href="#">python</a></li> <li><a href="#">python</a></li> </ul> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="js/bootstrap.js"></script> </body>
12、按钮组
<body> <div class="container"> <h2>按钮组</h2> <div class="btn-group"> #这个作用是把他们放在一起,成为一组 <button class="btn btn-danger">Left</button> <button>Center</button> <button>Right</button> </div> <h2>按钮组嵌套下拉框</h2> <div class="btn-group"> #这个作用是把他们放在一起,成为一组 <button class="btn btn-danger">Left</button> <button>Center</button> <button>Right</button> <div class="btn-group"> #必须要加这一步,不然下面的菜单就不会对齐到下拉框了 <button class="btn btn-info" data-toggle="dropdown">上拉菜单 <span class="caret" > #data-toggle是来控制显示或者隐藏 </span></button> #这一步必须引入jQuery和js <ul class="dropdown-menu"> #必须写menu <li><a href="#">python</a></li> #必须写a标签 <li><a href="#">python</a></li> <li><a href="#">python</a></li> </ul> </div> </div> <h2>分裂式下拉菜单</h2> <div class="btn-group"> <button class="btn btn-info">首选项</button> <button class="btn btn-info" data-toggle="dropdown">首选项<span class="caret" > #data-toggle是来控制显示或者隐藏 </span></button> </button> </div> </div> </body>
13、输入框组
<body> <div class="container" > <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="请输入"> </div><br> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入"> <span class="glyphicon glyphicon-star-empty"></span> </div> </div> </body>
14、导航
<body> <div class="container"> <h2>标签是导航</h2> <ul class="nav nav-tabs"> <li><a href="#">python</a></li> <li class="active"><a href="#">C++</a></li> #active 表示现在定位在那一页 <li><a href="#">前端</a></li> </ul> <h2>胶囊式导航</h2> <ul class="nav nav-pills"> <li><a href="#">python</a></li> <li class="active"><a href="#">C++</a></li> <li><a href="#">前端</a></li> </ul> <h2>两端对齐式导航</h2> <ul class="nav nav-tabs nav-tabs-justified"> <li><a href="#">python</a></li> <li class="active"><a href="#">C++</a></li> <li><a href="#">前端</a></li> </ul> <h2>路径导航标签页</h2> <ul class="breadcrumb"> <li><a href="#">python</a></li> <li class="active"><a href="#">C++</a></li> <li><a href="#">前端</a></li> </ul> </body>
15、导航条
<body style="height: 2000px;"> <div class="container"> <div class="navbar navbar-default navbar-fixed-top(固定在顶部) "> <ul class="nav nav-bar"> <li><a href="#">python</a></li> <li class="active"><a href="#">C++</a></li> #active 表示现在定位在那一页 <li><a href="#">前端</a></li> </ul> </div> </div> </body>
16、分页
<body> <div class="container"> <ul class="pagination"> <li> #向左 <a href="#" > <span >«</span> </a> </li> <li><a href="#">1</a></li>#页数 <li><a href="#">2</a></li> <li class="active"><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> #向右 <a href="#"> <span >»</span> </a> </li> </ul> </div> </body>
17、进度条
<body> <div class="container"> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 60%;">60%</div> #60%进度条 </div> <div class="progress"> <div class="progress-bar progress-bar-danger(颜色) progress-bar-striped(条纹) active(动态) " style="width: 60%;">60%</div> </div> </div> </body>