一、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. Core Data概述(转)

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

  2. Flutter之Dio引入和简单的Get/Post请求

    先在pubspec.yaml中引入Dio包如图所示 认识Dio库:dio是一个dart的 http请求通用库,目前也是大陆使用最广泛的库,国人开发,完全开源. flutter的插件包管理:学了引入di ...

  3. Linux学习笔记:vim

    目录 模式 命令模式 编辑模式 底行模式 .vimrc .viminfo .swap 本文更新于2019-09-05. 说明:下文中,使用{}引起表示自定义变量,根据实际情况填写.使用[]引起表示内容 ...

  4. 关于antd form表单getFieldsError方法

    getFieldsError()方法其实只有required:true时,双向数据绑定. {getFieldDecorator('note', { rules: [{ required: true, ...

  5. Flutter中的基础组件之一

    一.Text文本组件(单一格式的文本) 是具有单一风格的文本字符串,可以跨多行显示,也可全部显示在同一行中,具体显示样子,取决于布局约束. 常用属性: 1.overflow : TextOverflo ...

  6. Git速成学习第三课:创建与合并分支

    本来第三课想记录一下远程仓库的创建与克隆0.0但是想了想还是不写了. 这里写一下分支管理中的创建与合并. Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng. ...

  7. 3rd.botan

    1.HOME 1.官网:https://botan.randombit.net/ Win下 编译步骤:https://botan.randombit.net/handbook/building.htm ...

  8. 【数据结构】P1996 约瑟夫问题

    [题目链接] https://www.luogu.org/problem/P1996 题目描述 n个人(n<=100)围成一圈,从第一个人开始报数,数到m的人出列,再由下一个人重新从1开始报数, ...

  9. shell习题第18题:检查新文件

    [题目要求] 有一台服务器作为web应用,有一个目录(/data/web/attachment)不定时会被用户上传新的文件,但是不知道什么时候会被上传.所以,需要我们每5分钟做一次检测是否有新文件生成 ...

  10. Codeforces 1097E. Egor and an RPG game

    传送门 首先考虑怎么算 $f(n)$ (就是题目里面那个 $f(n)$) 发现可以构造一组序列大概长这样: ${1,3,2,6,5,4,10,9,8,7,15,14,13,12,11,...,n(n+ ...