day01 django框架之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 类用于固定宽度并支持响应式布局的容器。
    
   # 左右两边留白
      ...
    

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

栅格系统

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

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

  
.col-xs-12 .col-sm-6 .col-md-8
  
.col-xs-6 .col-md-4


4、列偏移
	参数：col-md-offset-2  # 从左向右移动2份
    

    
.col-md-4
    
.col-md-4 .col-md-offset-4


5、嵌套列：row里面可以在嵌套

  

    

      

      
	
  

排版

1、标题
	h1-h6
	
2、段落突出:.lead
	
字体
	
3、高亮显示：
    
我是最帅 的 
    
4、被删除文本： # 文件中间有删除线
	删除
	
5、插入文本：  # 文本下带有下划线
	帅哥
	
6、带下划线文本：
	帅哥
	
7、着重：
	帅
	
8、斜体：
	帅哥
	
9、对齐
    
Left aligned text.
      # 左对齐
    
Center aligned text.
  # 居中
    
Right aligned text.
    # 右对齐
    
Justified text.
    
No wrap text.

1、美化表格：.table

  ...


2、条纹状表格：.table-striped

  ...


3、带边框的表格：.table-bordered

  ...


4、鼠标悬停：.table-hover

  ...


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

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

    
姓名
    
密码
    

# 具体看bootstrap官网文档3
（默认样式）Default
（首选项）Primary
（成功）Success
（一般信息）Info
（警告）Warning
（危险）Danger
（链接）Link

# 具体看bootstrap官网文档3
1、图片形状

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

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起步
      

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')

import socket

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

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