前端bootstrap框架

内容概要

• 前端框架之bootstrap

  该框架支持cv编写前端页面
  

• 利用socket模块编写一个简易版本的web框架

• 利用wsgiref模块编写web框架

• 利用jinja2模块编写模板

• 动静态网页(结合MySQL)

今日内容详细

bootstrap框架和jQuery网址

bootstrap框架:https://www.bootcss.com/  # 选择版本3，不会 去看官方文档
jQuery网址：https://www.bootcdn.cn/     # 选择版本3

前端框架之bootstrap

使用3版本
响应式布局:根据显示器大小动态合理调整页面布局
CDN:内容分发网络
    为了加快对静态资源(图片、css文件、js文件)数据的访问速度
bootstrap涉及到动态效果需要使用jQuery

第一次使用bootstrap最好先下载源文件本地导入使用
        目的是为了让pycharm能够识别该框架提供的功能并自动提示
    如果直接使用CDN那么pycharm无法自动提示

选择器(为了查找我们需要查找的标签并操作)
        id选择器
        #d1 {}
    class选择器
        .c1 {}
    标签选择器
        div {}
    
    
# 使用bootstrap调节页面样式其实就是在修改标签的class值

布局容器

1、container 类用于固定宽度并支持响应式布局的容器。
    <div class="container">   # 左右两边留白
      ...
    </div>

2、container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
    <div class="container-fluid">   # 左右两边占满
      ...
    </div>
    
# 后续在使用bootstrap做页面的时候，上来先写一个div class="container"，之后在div内部书写

栅格系统

    栅格系统：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。  # 最多只等分12列
    
1、栅格
<div class="row">  # 写一个row就是将所在的区域划分成12份
  <div class="col-md-8">.col-md-8</div>   # 左边要了8份
  <div class="col-md-4">.col-md-4</div>   # 右边要了4份
</div>  
# 记住：写在使用row时候，一定要做12的加减法。不能超过12。

2、栅格参数：需要兼容哪个显示器，就加上对应的参数即可。
        超小屏幕 手机 (<768px)      ：.col-xs-
    小屏幕 平板 (≥768px)               ：.col-sm-
    中等屏幕 桌面显示器 (≥992px)：.col-md-
    大屏幕 大桌面显示器 (≥1200px)：.col-lg-
    
3、实例：手机、平板桌面
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

4、列偏移
        参数：col-md-offset-2  # 从左向右移动2份
    
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

5、嵌套列：row里面可以在嵌套
<div class="row">
  <div class="col-sm-9">
    <div class="row">
      <div class="col-xs-8 col-sm-6">
      </div>
        </div>
  </div>
</div>

排版

1、标题
        h1-h6
        
2、段落突出:.lead
        <p class="lead">字体</p>
        
3、高亮显示：<mark>
    <p>我是最<mark>帅</mark> 的 </p>
    
4、被删除文本：<del> # 文件中间有删除线
        <del>删除</del>
        
5、插入文本：<ins>  # 文本下带有下划线
        <ins>帅哥</ins>
        
6、带下划线文本：<u>
        <u>帅哥</u>
        
7、着重：<strong>
        <strong>帅</strong>
        
8、斜体：<em>
        <em>帅哥</em>
        
9、对齐
    <p class="text-left">Left aligned text.</p>      # 左对齐
    <p class="text-center">Center aligned text.</p>  # 居中
    <p class="text-right">Right aligned text.</p>    # 右对齐
    <p class="text-justify">Justified text.</p>
    <p class="text-nowrap">No wrap text.</p>

表格

1、美化表格：.table
<table class="table">
  ...
</table>

2、条纹状表格：.table-striped
<table class="table table-striped">
  ...
</table>

3、带边框的表格：.table-bordered
<table class="table table-bordered">
  ...
</table>

4、鼠标悬停：.table-hover
<table class="table table-hover">
  ...
</table>

5、状态类：通过这些状态类可以为行或单元格设置颜色
参数：
    .active     鼠标悬停在行或单元格上时所设置的颜色
    .success    标识成功或积极的动作
    .info       标识普通的提示信息或动作
    .warning    标识警告或需要用户注意
    .danger     标识危险或潜在的带来负面影响的动作
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>  

表单

# 具体看bootstrap官网文档3
1、美化表单：.form-control

    <p>姓名<input type="text" class="form-control"></p>
    <p>密码<input type="text" class="form-control"></p>
    

按钮

# 具体看bootstrap官网文档3
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

图片

# 具体看bootstrap官网文档3
1、图片形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

图标

# 图标网站：http://www.fontawesome.com.cn   兼容bootstrap所有组件的。

socket模块

HTTP协议
        1.四大特性
        1.基于请求响应
        2.基于TCP/IP作用于应用层之上的协议(OSI七层)
        3.无状态
        4.无连接/短连接
                长链接 websocket
    2.数据格式
        请求格式
                请求头(请求方法)
                请求首行(一大堆kv键值对)
            
            请求体(并不是所有的请求都有 携带一些敏感数据)
        响应格式
    3.响应状态码
        用数字来表示一堆中文意思
        1XX
        2XX  200
        3XX  302 304
        4XX  403 404
        5XX  500
        在公司中还会自定义更多的状态码
                一般都是以10000起步
      

server端

import socket

# 1.创建socket对象
server = socket.socket()
# 2.绑定ip和端口
server.bind((\'127.0.0.1\',8080))
# 3.监听
server.listen(5)
# 链接循环
while True:
    conn,addr = server.accept()
    # 接收客户端数据
    data = conn.recv(1024)
    print(data)
    # 回复HTTP响应时间
    conn.send(b\'HTTP/1.1 200 OK\r\n\r\n\')
    # 回复客户端消息
    conn.send(b\'hello\')

chient端

import socket

chient = socket.socket()
chient.connect((\'127.0.0.1\',8080))

while True:
    chient.send(b\'hi\')
    res = chient.recv(1024)
    print(res)