一、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>
    <!-- 在head标签上部导入bs的css -->
 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <!-- 再导入自定义修改的css -->
    <link rel="stylesheet" href="css/my.css">
</head>
<body>
<!-- html代码结构 -->
 ...
   
<!--bs的脚本依赖于jq, 所以要提前导入jq-->
<!--脚本逻辑尽量放在html结构之下-->
<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
 <!--总结; 两种容器(container | container-fluid)默认都有左右15px padding-->
<!--固定宽度容器(采用响应式布局)-->
<div class="container">
    <!-- 行: .row, 可以取消容器的默认左右15px padding-->
    <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的更多相关文章

  1. Bootstrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

    Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单.

  2. 【转】利用 Bootstrap 进行快速 Web 开发

    原文转自:http://blog.jobbole.com/53961/ 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS ...

  3. 如何利用 Bootstrap 进行快速 Web 开发

    原文出处: IBM developerworks 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS 项目为基础,由 Twi ...

  4. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发

    01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...

  5. Python Web开发:Django+BootStrap实现简单的博客项目

    创建blog的项目结构 关于如何创建一个Django项目,请查看[Python Web开发:使用Django框架创建HolleWorld项目] 创建blog的数据模型 创建一个文章类 所有开发都是数据 ...

  6. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  7. 12款简化 Web 开发的 JavaScript 开发框架

    前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...

  8. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  9. Visual Studio 2013 Web开发

    cnbeta新闻:微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Ser ...

随机推荐

  1. RabbitMQ运转流程

    生产者发送消息的过程 生产者连接到RabbitMQ Broker(相当于是一个RabbitMQ服务器),建立一个连接(Connection),开启一个信道(Channel). 生产者声明一个交换器(E ...

  2. sonar:sonarqube6.7.6与mysql5.7版本不匹配

    问题 更换sonarqube的数据库为mysql后,启动sonarqube,提示Database was upgraded to a more recent of SonarQube. 解决: 将so ...

  3. 0《STL源码剖析》简介

    STL源码剖析 ----侯捷 STL主要包括六个组件: 1.配置器:负责空间配置和管理. 2.迭代器:扮演容器和算法之前的胶合剂,所谓“泛型指针”. 3.容器:各种数据结构,如vector,list, ...

  4. pytorch API中sgd.py的学习记录

    参考:PyTorch与caffe中SGD算法实现的一点小区别 其中公式(3)(4)的符号有问题 变量对应表 程序 参考文章 buf v momentum μ d_p Δf(θ) lr ξ p θ

  5. [转帖]被HTTP/2漏洞拖累，所有Kubernetes版本受影响

    被HTTP/2漏洞拖累,所有Kubernetes版本受影响 https://www.kubernetes.org.cn/5746.html 服务很重要啊... 低版本都不解决安全问题了.. 不过HTT ...

  6. Hadoop学习(2)-java客户端操作hdfs及secondarynode作用

    首先要在windows下解压一个windows版本的hadoop 然后在配置他的环境变量,同时要把hadoop的share目录下的hadoop下的相关jar包拷贝到esclipe 然后Build Pa ...

  7. 更新neo4j节点信息

    将多个属性的内容更新到节点上 def update_by_id(id,graph,**kwargs): """ 更新节点的属性 根据节点的ID来更新节点的属性,如果存在该 ...

  8. 如何使用RedisTemplate访问Redis数据结构之字符串操作

    Redis 数据结构简介 Redis 可以存储键与5种不同数据结构类型之间的映射,这5种数据结构类型分别为String(字符串).List(列表).Set(集合).Hash(散列)和 Zset(有序集 ...

  9. Django新手入门必看

    pip install django==2.1.7 (现在Django3.0出来,推荐大家可以使用一下Django3.0) pip list查看

  10. 消息服务百科全书——Kafka基本原理介绍

    架构 1.1 总体架构 因为Kafka内在就是分布式的,一个Kafka集群通常包括多个代理. 为了均衡负载,将话题分成多个分区,每个代理存储一或多个分区.多个生产者和消费者能够同时生产和获取消息. 一 ...