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</option>
<option value="">2</option>
<option value="">3</option>
<option value="">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>