Python web前端 10 bootstrp
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>
