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>&times;</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 >&laquo;</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 >&raquo;</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>

Python web前端 10 bootstrp的更多相关文章

Python web前端 06 运算符循环
Python web前端 06 运算符循环一.运算符 #JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未 ...
Python web前端 07 函数及作用域
Python web前端 07 函数及作用域一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...
Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板复制内容--->SETTING---> Editor -----> ...
Python web前端 03 CSS属性
Python web前端 03 CSS属性一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
Python web前端 04 盒子模型
Python web前端 04 盒子模型盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的一.边框 border #border 边框 ...
Python web前端 05 JavaScript
Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...
Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
Python web前端 11 form 和 ajax
Python web前端 11 form 和 ajax 一.打开服务器将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可二.ajax ...

随机推荐

RQNOJ 622 最小重量机器设计问题：dp
题目链接:https://www.rqnoj.cn/problem/622 题意: 一个机器由n个部件组成,每一种部件都可以从m个不同的供应商处购得. w[i][j]是从供应商j处购得的部件i的重量, ...
Linux_异常_03_Failed to restart iptables.service: Unit not found.
启动防火墙时出现: Failed to restart iptables.service: Unit not found. 解决方案: 1.https://stackoverflow.com/ques ...
listen 66
Frog Species Found in Big Apple Scientists discover new species all the time—on the order of 15,000 ...
PHP实现简单爬虫-抓取网页url
<?php /** * 爬虫程序 -- 原型 * * 从给定的url获取html内容 * * @param string $url * @return string */ function _g ...
BZOJ-4819: 新生舞会(01分数规划+费用流)
Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴.有n个男生和n个女生参加舞会买一个男生和一个女生一起跳舞,互为舞伴.Cathy收集了这些同学之间 ...
【Python】数组排序
1.numpy库:argsort() argsort函数返回的是数组值从小到大的索引值(升序排列) 一维: In [1]: import numpy as np In [2]: x = np.arra ...
JSOI2008星球大战——联通块数量
题目:https://www.luogu.org/problemnew/show/1197 此题不能按时间顺序进行删点.求连通块数量,而应打破时间的思维,先形成一张没有要删去的点的图,再从后往前逐个加 ...
利用正则表达式类解析SQL语句，达到Worklist兼容各个RIS数据库的目的
在做RIS的项目中遇到一个问题, 因为Worklist要兼容各个RIS数据库, 因此设计了目前这个架构. 1.xml文件来配置RIS数据库的数据源, 2.xml文件来存储关于查询/更新数据库的SQL语 ...
jmeter设置默认为中文
1.编辑jmeter目录/bin/jmeter.porperties文件 2.点击将language的注释去掉,并将值变为zh_CN保存.
algo: 冒泡排序（Java实现）
package com.liuxian.algo; public class MySortClass implements Comparable<MySortClass> { public ...

Python web前端 10 bootstrp

Python web前端 10 bootstrp的更多相关文章

随机推荐

热门专题