一、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. 撸一个vue的双向绑定

    1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...

  2. 78 leetCode 位运算解法

    按照自己的理解题目,数组内所有的组合:假如[1,2,3,4]看成1111到0000里面的排列组合,取位运算. vector<vector > subsets(vector&nums ...

  3. Matlab求微分方程的符号解1

    一.常微分方程的求解 例1. 例2. 例3. 通常我们使用syms 和dsolve来求解: first: second:表示 third:如果有必要 功能函数diff可以完成一元或多元函数任意阶数的微 ...

  4. CF1190D Tokitsukaze and Strange Rectangle

    思路: 线段树 + 扫描线. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; ; int n ...

  5. OpenCV.3.4.6.附加依赖项

    ZC:VS2015 "项目属性 --> 链接器--> 输入--> 附加依赖项" 中 添加内容 1.E:\OpenCV_something\opencv-3.4.6 ...

  6. [AT2062] ~K Perm Counting

    AT2602 , Luogu 求对于 \(n\) 个数的排列 , 有多少种方案满足对于所有的 \(i\) , \(|P_i - i| != K\) , 答案对 \(924844033\) 取模 . \ ...

  7. 自动输入密码执行远程服务器上的java -version命令

    自动输入密码执行远程服务器上的java -version命令 for i in $(seq 1 253);do sshpass -p "W123hz" ssh weili@192. ...

  8. 在Linux环境下的对启动服务进行停止或在运行

    下面我以elasticsearch服务为例进行: 第一种: 1.前台运行: 运行结果 2.ctrl+c停止运行   第二种:后端运行 1.后端运行的命令./elasticsearch -d 这种启动后 ...

  9. 注意了,Mybatis中条件判断时遇到的坑

    1.mapper中比较字符串时需要注意的问题如下: mybatis 映射文件中,if标签判断字符串相等,两种方式:因为mybatis映射文件,是使用的ognl表达式,所以在判断字符串isComplet ...

  10. Git初始化配置以及配置github

    1,配置用户名和邮箱(这里是我github中配置的用户名和邮箱),执行下面命令后,在C:\Users\yaosq盘下会出现一个全局文件.gitconfig. git config --global u ...