web开发：Bootstrap

一、ajax请求

二、前台服务器概念

三、bs导读

四、bs引入

五、bs容器与响应式

一、ajax请求

- 后台

```python
# 通过flask框架搭建后台
from flask import Flask, request
# 创建一个服务器对象
app = Flask(__name__)

# 解决ajax请求的跨域问题
from flask_cors import CORS
CORS(app, supports_credentials=True)

# 设置处理请求的功能(路由route => 接口)

# 设置一个主页路由, 对应一个处理主页的功能方法, 返回主页信息
@app.route('/')
def home_action():
return '<h1 style="color: red">主页</h1>'

# 为ajax登录请求配置一个处理登录的功能
@app.route('/login')
def login_action():
    # 拿到前台数据, 进一步判断处理
    # 需要: 需要账号与密码, 匹配成功与否决定返回结果
    user = request.args['user'] # 'user'是规定前台需要传入数据的key
    pwd = request.args['pwd']
    # print(user)
    if user == 'abc' and pwd == '123':
        return "登录成功"
    return "登录失败"

# 启动服务(该文件作为自启文件)
if __name__ == '__main__':
app.run(port="8888")

```

- 前台

```html
<h1>请登录</h1>
<form class="fm">
<input id="user" type="text" name="user" placeholder="请输入用户名">
<input id="pwd" type="password" name="pwd" placeholder="请输入密码">

<input class="sbm" type="submit" value="提交...">
</form>
```

```js
// 取消表单的默认事件
$('.fm').submit(function () { return false; })
// 表单提交完成的是ajax请求
$('.sbm').click(function () {
    // 前提: 准备发送的数据
    var user = $('#user').val();
    var pwd = $('#pwd').val();

    // 1.通过ajax发生请求, 获得后台响应的结果
    // 2.用得到的结果来局部渲染页面内容
    // 1.
    $.ajax({
        url: "http://127.0.0.1:8888/login", // 接口
        data: { // 数据
            user: user,
            pwd: pwd
        },
        success: function (data) { // 结果
            // 2.
            doSomething(data);
        }
    })
});
// 处理结果数据的功能
function doSomething(data) {
    // console.log(data)
    $('h1').text(data)
}
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ajax</title>

</head>

<body>

<h1>请登录</h1>

<form class="fm">

    <input id="user" type="text" name="user" placeholder="请输入用户名">

    <input id="pwd" type="password" name="pwd" placeholder="请输入密码">

    <input class="sbm" type="submit" value="提交...">

</form>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

$(function () {

    // form表单请求: 完成前后台数据交互,

    //      为后台提供数据, 后台反馈响应结果, 前台会发生页面转跳

    $('.fm').submit(function () { return false; })

    // ajax请求: 完成前后台数据交互,

    //      为后台提供数据, 后台反馈响应结果, 前台不需要页面转跳,

    //      可以完成页面局部刷新内容

    $('.sbm').click(function () {

        // 前提: 准备发送的数据

        var user = $('#user').val();

        var pwd = $('#pwd').val();

        // 1.通过ajax发生请求, 获得后台响应的结果

        // 2.用得到的结果来局部渲染页面内容

        // 1.

        $.ajax({

            url: "http://127.0.0.1:8888/login",

            data: {

                user: user,

                pwd: pwd

            },

            success: function (data) {

                // 2.

                doSomething(data);

            }

        })

    });

    function doSomething(data) {

        // console.log(data)

        $('h1').text(data)

    }

})

</script>

</html>

二、前台服务器概念

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <h1>请求</h1>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    $('h1').click(function () {

        $.ajax({

            url: "http://localhost:7777/test",

            success: function (data) {

               $('h1').text(data)

            }

        })

    })

</script>

</html>

三、bs导读

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>bs导读</title>

    <!--zero框架 样式帮你写好了 -->

    <link href="zero/css/zero.css" type="text/css" rel="stylesheet">

</head>

<body>

    <h2>Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。</h2>

    <h3>什么是bootstrap: 根据bs指定规则(通过标签结构与指定类名)完成快速的页面布局</h3>

    <hr>

    <!--按照 zero框架规定格式来书写html结构代码-->

    <div class="z-btn">按钮</div>

    <div class="z-btn z-btn-red">按钮</div>

    <div class="z-btn z-btn-green">按钮</div>

    <div class="z-btn z-btn-orange">按钮</div>

    <hr>

    <ul class="z-menu" z-text="爱好">

        <li><a href="">篮球</a></li>

        <li><a href="">足球</a></li>

        <li><a href="">洗脚</a></li>

        <li><a href="">按摩</a></li>

        <li><a href="">小鱼啃脚</a></li>

    </ul>

</body>

<!--zero框架 脚本帮你写好了 -->

<script src="zero/js/zero.js"></script>

</html>

四、bs引入

```html
<head>
    
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    
    <link rel="stylesheet" href="css/my.css">
</head>
<body>

...



<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>bs引入</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

    <!--可以在bs基础上进行样式修改, 一般修改样式要出现在引入bs之后-->

    <style>

        .btn {

            outline: none !important;

        }

        h1 {

            font-size: 100px;

        }

    </style>

</head>

<body>

<h1>一级标题</h1>

<button class="btn">按钮</button>

<div class="btn-group" role="group" aria-label="...">

    <button type="button" class="btn btn-default">1</button>

    <button type="button" class="btn btn-default">2</button>

    <div class="btn-group" role="group">

        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"

                aria-expanded="false">

            Dropdown

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu">

            <li><a href="#">Dropdown link</a></li>

            <li><a href="#">Dropdown link</a></li>

        </ul>

    </div>

</div>

</body>

<!--bs的脚本依赖于jq, 所以要提前导入jq-->

<!--脚本逻辑尽量放在html结构之下-->

<script src="js/jquery-3.3.1.js"></script>

<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

</html>

五、bs容器与响应式

```html


<div class="container">
    
    <div class="row">
        <h1 class="bg-info">标题</h1>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <h1 class="bg-info">标题</h1>
    </div>
</div>
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>容器于响应式</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

    <style>

        .box {

            /*width: 500px;*/

            height: 100px;

            background-color: orange;

            margin: 0 auto;

        }

        /*屏幕尺寸 >1200px 会激活该响应式分支*/

        @media (min-width: 1200px) {

            .box {

                width: 1200px;

            }

        }

        /*992px ~ 1200px*/

        @media (min-width: 992px) and (max-width: 1200px) {

            .box {

                width: 992px;

            }

        }

        /*小于992px*/

         @media (max-width: 992px) {

            .box {

                width: 50px;

            }

        }

        /*用来完成响应式布局

        @media (min-width: 768px) {

        }

        */

    </style>

</head>

<body>

    <!--响应式布局-->

    <div class="box"></div>

    <!--固定宽度容器(采用响应式布局)-->

    <div class="container">

        <!--缩放屏幕尺寸,发现宽度有四种状态存在 => 响应式布局-->

        <h1 class="bg-pink">标题</h1>

        <div class="container">

            <h1 class="bg-pink">子标题</h1>

        </div>

    </div>

    <!--动态宽度布局(采用流式布局)-->

    <div class="container-fluid">

        <h1 class="bg-pink">标题</h1>

    </div>

    <!--总结; 两种容器默认都有左右15px padding-->

    <!-- 行: .row, 可以取消容器的默认左右15px padding-->

    <div class="container">

        <div class="row">

            <h1 class="bg-info">标题</h1>

        </div>

    </div>

    <div class="container-fluid">

        <div class="row">

            <h1 class="bg-info">标题</h1>

        </div>

    </div>

    <!--行row就是配合容器来使用, 可以抵消容器默认padding, 且可以给内容按行分组-->

    <div class="container">

        <div class="row">

            ...

        </div>

        <div class="row">

            ...

        </div>

    </div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

</html>

web开发：Bootstrap的更多相关文章

Bootstrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单.
【转】利用 Bootstrap 进行快速 Web 开发
原文转自:http://blog.jobbole.com/53961/ 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS ...
如何利用 Bootstrap 进行快速 Web 开发
原文出处: IBM developerworks 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS 项目为基础,由 Twi ...
第五模块：WEB开发基础第3章·BootStrap&JQuery开发
01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...
Python Web开发:Django+BootStrap实现简单的博客项目
创建blog的项目结构关于如何创建一个Django项目,请查看[Python Web开发:使用Django框架创建HolleWorld项目] 创建blog的数据模型创建一个文章类所有开发都是数据 ...
【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
12款简化 Web 开发的 JavaScript 开发框架
前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...
移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
Visual Studio 2013 Web开发
cnbeta新闻:微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Ser ...

随机推荐

Cognos Framework操作记录：开发复杂报表
设计一张数据库的表:TEST_001_ADDRESS 表结构: | 编号 | 姓名 | 省 | 市 | 县 | 公司 | 部门 | 职位 | | ---- | --- | -- | - | - | - ...
Spring Security（20）——整合Cas
整合Cas 目录 1.1 配置登录认证 1.1.1 配置AuthenticationEntryPoint 1.1.2 配置CasAuthenticationFilt ...
使用mybatis的resultMap进行复杂查询
记录下mybatis的集合查询中碰到的问题 https://jaychang.iteye.com/blog/2357143 MyBatis ofType和javaType区别 https: ...
js或者jquery直接下载网页上的图片代码
1.jquery方式使用jquery直接下载图片 function downloadImage(src) { var a = $("<a></a>").a ...
解决zabbix中文乱码问题
进入Windows系统控制面板-->外观和个性化-->字体(选择一个字体文件simsun.ttc复制)进入zabbix的web服务器[root@test-zabbix]# cd ~/zab ...
vue8种通信方式
参考:https://juejin.im/post/5d267dcdf265da1b957081a3#heading-1(写的很详细) https://blog.csdn.net/songxiu ...
linux netfilter
yum -y install iptables//三张表 filter nat mangle [root@wang /]# iptables -t filter -nvL [root@wang /]# ...
大周末的不休息，继续学习pandas吧，pandas你该这么学，No.7
其实,写文章真的挺难的每天抽点时间,写写文采飘逸的文章坚持个几年,成为称霸一方的大佬坚持就会成功吧~ 最近碰到瓶颈了, 一直找不到好的运营公众号的方式(好想有人指导唉~,对了,橡皮擦有个100多 ...
[Agc029C]Lexicographic constraints_进制_二分答案_贪心
Lexicographic constraints 题目链接:https://atcoder.jp/contests/agc029/tasks/agc029_c 数据范围:略. 题解: 二分是显然的, ...
Scrapy payload 报错400
首先Scrapy 发送payload请求格式如下: def start_requests(self): querystr = { "ctoken": "U-ang1zmp ...

web开发：Bootstrap

web开发：Bootstrap的更多相关文章

随机推荐

热门专题