一、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. CockroachDB学习笔记——[译]Scaling Raft

    原文链接:https://www.cockroachlabs.com/blog/scaling-raft/ 原作者:Ben Darnell 原文日期:Jun 11, 2015 译:zifeiy 在Co ...

  2. Entity Framework链接数据库设置

    本人不才,学习EntityFramwork同时做个记录供大家参考.不多说,直接上步骤 1.在WebConfig中添加如下代码段 <connectionStrings> <add na ...

  3. 解决报错Fatal error in launcher

    换电脑重装python,打算安装第三方库的时候出现错误: Fatal error in launcher 然而在网上搜到的大多数是解决 —— Fatal error in launcher: Unab ...

  4. webdriver(chrome无头浏览器)

    '''chrome无头浏览器''' from selenium.webdriver.chrome.options import Options # 导入相应的类 from selenium impor ...

  5. OpenGL学习（4）——纹理

    拖了半个多月的博客,这次学习如何使用纹理(Texture)贴图来实现更多的细节. 生成纹理对象 和创建VAO.VBO方法类似,调用glGenTextures函数. glGenTextures(1, & ...

  6. 【VS开发】fopen 文本文件与二进制文件区别

    在学习C语言文件操作后,我们都会知道打开文件的函数是fopen,也知道它的第二个参数是 标志字符串.其中,如果字符串中出现'b',则表明是以打开二进制(binary)文件,否则是打开文本文件. 那么什 ...

  7. 修改Ubuntu屏幕的分辨率

      最近重新装了一下环境,用vnc连接服务器,发现分辨率过低,于是查了一下如何修改分辨率,将其调高.   编辑/etc/default/grub 搜索"#GRUB_GFXMODE=640x4 ...

  8. 你除了在客户端上会使用Cookie,还能使用哪些可以作为数据缓存呢?

    问题如标题,直奔主题.介绍下另两种缓存. 1.sessionStorage.localStorage localStorage: 是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你 ...

  9. 2019南昌网络赛　 I. Yukino With Subinterval　树状数组套线段树

    I. Yukino With Subinterval 题目链接: Problem Descripe Yukino has an array \(a_1, a_2 \cdots a_n\). As a ...

  10. poj 2342 【Anniversary party】树形dp

    题目传送门//res tp poj 题意 给出一棵有权树,求一个节点集的权值和,满足集合内的任意两点不存在边 分析 每个点有选中与不选中两种状态,对于第\(i\)个点,记选中为\(sel_i\),不选 ...