Python3项目初始化8-->css和bootstrap入门学习
24、CSS基础
HTML 盒模型div span
CSS 选择器， 常见属性值
Bootstrap 栅格系统，表单，表格，常用组件。
Div 一个盒子，默认站一行
Span 行内元素
P 段落元素
为什么需要div？
table或者form，每个浏览器都有默认样式，表现不太一样
没有默认样式，样式自己定制
确保所有浏览器下显示一致
div通过css定制样式
CSS负责往右的外观
HTML的style标签负责写css样式
CSS修改元素外观步骤：先通过html标签或属性找到对应html标签， 定义key-value值
自行使用调试，templates/user/testcss.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
</head>
<body>
<div style="background-color: red">aaaaa</div>
<span>11111</span>
</body>
</html>
url： path('testcss/', views.testcss, name='testcss'),
views： def testcss(request):
return render(request, 'user/testcss.html')
访问验证：http://127.0.0.1:8000/user/testcss/
Django引入静态文件。
创建目录和文件：F:\py3proj\07\cmdb\user\static\common.css
全局设置setting
STATICFILES = [
os.path.join(BASE_DIR, 'static/')
]
前端html引入
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<link rel="stylesheet" type="text/css" href="{% static 'common.css' %}">
访问，该静态文件正常显示。
设置templates全局
创建目录：F:\py3proj\07\cmdb\user\templates
设置全局，
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
如上，可以正常访问。
练习下Python模块
>>> import os
>>> os.path.exists('duixiang')
True
>>> os.path.exists('/tmp')
False
>>> os.path.join('duixiang', 'abc')
'duixiang\\abc'
>>> os.path.join('duixiang', '/abc')
'/abc'
>>>
25、bootstrap入门
自己不需要定制太多的css
使用行业最流行的css库--bootstrap
只在html里写class属性，就可以美化你的网页
中文官网地址：http://v3.bootcss.com/
bootstrap引入
link标签引入：<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
link标签的href属性，指定css的地址
学习bootstrap指定的class
输入html <html class="btn btn-success">test</html>
显示如图的绿色按钮，证明bootstrap安装成功。自行验证下。
bootstrap格栅系统：https://v3.bootcss.com/css/
用行和列组合来创建页面布局
行（row）必须在.container内部
行（row）把网页宽度分为12分
三等分
布局容器
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container">
<div class="row">
<div class="col-md-4">1->等分</div>
<div class="col-md-4">2->等分</div>
<div class="col-md-4">3->等分</div>
</div>
</div>
<div class="container">
.container 类用于固定宽度并支持响应式布局的容器。
<div class="col-md-1">我占一列</div>
<div class="col-md-8">我占八列</div>
</div>
<div class="row">
<div class="col-md-5">
<table>
<thead>
<tr>
<th>11</th>
</tr>
</thead>
<tbody>
<tr>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</div>
表格,设置表格信息
<table class="table table-scriped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>kk</td>
<td>30</td>
</tr>
<tr>
<td>2</td>
<td>kk22</td>
<td>31</td>
</tr>
</tbody>
</table>
