前端学习第73天bootstrap
一.ajax
1.后台 ```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") ``` 2. 前台 ```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>
二.bootstrap
1.引入
```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> <!--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 sr
<!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>
2.容器
- 容器 ```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>
