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>&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>

原文地址：https://www.cnblogs.com/xuchengcheng1215/p/8808227.html

时间： 2024-11-12 12:38:16

Python web前端 10 bootstrp的相关文章

Python之Web前端jQuery扩展

Python之Web前端: 一. jQuery表单验证二. jQuery扩展三. 滚动菜单一. jQuery表单验证: 以下表单验证使用两种方式简单实现: (一). 使用DOM表单验证 (二). 使用jQuery表单验证 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证DOM<

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计.本文分享了10个顶级的CSS UI开源框架,有几个确实不错,一起来看看. 1.Bootstrap – 最流行的Web前端UI框架 Bootstrap是由twitter推出的Web前端UI框架,它由Twitter的设计师Mark Otto和Jaco

10个Web前端值得收藏的背景全屏效果展示（附源码）（上）

作为一个前沿的 Web 开发者,对于 HTML5 和现在流行的3D技术或多或少都有掌握.特别是在移动端大显身手.这篇文章挑选了10个绚丽的背景全景展示效果,希望对你有所帮助. 1. JS图片背景全屏代码实现物理效果玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标滑轮放大或者缩小,有不同的效果,赶紧来体验一下. 源码下载 / 在线演示 2. CSS3学习 - 网站背景拉伸平铺jQuery插件这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本

百度web前端面试2015.10.18

邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对一面试,人很多. 下面是面试过程:没让我自我介绍,有的会让先自我介绍,简单看了下我的简历开始问我是不是自学的,(计算机专业不开设这个专业,都是自学加项目经验)为什么选择前端开发,你怎么看前端开发这个岗位的.说那这样我就从简单到难的问你,由浅入深就知道你的水平了,面试官都很年轻,人都不错. 1:说一下

10款让WEB前端开发人员更轻松的实用工具

这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工具将让你的工作更有效率. Spritepad 借助 SpritePad,你可以在几分钟甚至几秒钟内创建你的CSS Sprite.只需拖放您的图片,立即可以生成 PNG 精灵图片以及CSS代码.不需要在 Photoshop

进击的Python【第十三章】：Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式一.web框架的本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

python基础下的web前端学习之HTML（一）

一.参考书籍: <Web 前端开发 HTML5+CSS3+jQuery+AJAX 从学到用完美实践> 备注:本书为工具书. 二.HTML5元素: 按功能划分:基础.格式.表单.框架.图像.音频/视频.链接.列表.表格.样式/节.元信息.编程.(参考P76) 元素属性:基本属性.语言属性.键盘属性.内容属性.延伸属性等.(参考P82) 三.结构基础: <!DOCTYPE html> #<!DOCTYPE>元素定义文档类型为html <html lang="

python web服务常见的部署方式

引自 - 全面解读python web 程序的9种部署方式 python有很多web 开发框架,代码写完了,部署上线是个大事,通常来说,web应用一般是三层结构 web server ---->application -----> DB server 主流的web server 一个巴掌就能数出来,apache,lighttpd,nginx,iis application,中文名叫做应用服务,就是你基于某个web framework写的应用代码 DB server 泛指存储服务,web开发中用

如何成为一名优秀的Web前端工程师?

何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript!它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性.组件的易用性.分层语义模板和浏览器分级支持等.随着近两三年来RIA(Rich Internet Applications的缩写,中文含义为:丰富的因特网应用程