一、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. EasyUI中对datagrid的扩展方法

    以下是给datagrid扩展一个方法的demo 1.给datagrid添加一个属性 $.extend($.fn.datagrid.defaults, { demo: "demo1" ...

  2. Core Data概述（转）

    Core Data是一个模型层的技术.Core Data帮助你建立代表程序状态的模型层.Core Data也是一种持久化技术,它能将模型对象的状态持久化到磁盘,但它最重要的特点是:Core Data不 ...

  3. AWK---linux系统三剑客（三）

    grep .sed.awk被称为linux中的"三剑客". grep 更适合单纯的查找或匹配文本 sed  更适合编辑匹配到的文本 awk  更适合格式化文本,对文本进行较复杂格式 ...

  4. Xshell终端连接CentOS7.0下Docker容器中的MySql镜像后无法键入中文问题

    首先在宿主机输入env 查看LANG 或者 locale 查看 LANG 发现本地使用的字符集是: zh_CN.UTF-8 然后执行 docker exec -it mysql bash 进入dock ...

  5. python 智能玩别踩白块

    # encoding :utf-8import pyautoguifrom PIL import Imageimport time pyautogui.FAILSAFE = True time.sle ...

  6. 最新 美图java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.美图等10家互联网公司的校招Offer,因为某些自身原因最终选择了美图.6.7月主要是做系统复习.项目复盘.LeetCode ...

  7. POJ 3274/洛谷 1360:Gold Balanced Lineup 黄金阵容平衡

    题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been able to na ...

  8. String、StringBuilder、StringBuffer的爱恨情仇

    第三阶段 JAVA常见对象的学习 StringBuffer和StringBuilder类 (一) StringBuffer类的概述 (1) 基本概述 下文以StringBuffer为例 前面我们用字符 ...

  9. 1.3.1 Lock接口及其实现

    1.锁的本质 2.Lock接口使用ReentrenLock 3.读写锁使用 4.读写锁实现 Lock接口方法 有点意思的是lockInterruptibly(), 只要没有获取到锁就会一直等待,直到某 ...

  10. Eureka【故障演练分析】

    1.应用服务启动前不可用 假设eureka server服务在client应用服务启动之前挂掉,或者没有启动,这时应用服务依然可以正常启动,但是会有报错信息: 2019-10-13 14:40:41. ...