Django博客实战T10-CSS框架协助前端布局
11.CSS框架协助前端布局
1、选定CSS框架
使用Bootstrap框架
特点：
- 文档齐全，使用简单（易用性）
- 兼容较多浏览器（兼容性）
- 非轻量级（大小）
- 扁平、简洁（效果）
- 组件齐全、响应式（功能）
2、部署Bootstrap
-
打开 www.bootcss.com
-
下载
Bootstrap
-
引用CSS文件
-
引用基本模板
lang用于修改语言meta第一条是选择最新内核meta第二条是设置响应式，使得网页根据屏幕大小自动适应布局jquery是boostrap需要依赖的部分js框架（先下载，然后放到static目录下）
3、导航栏修订
-
navbar-default设置导航栏 -
container-fluid设置容器 -
navbar-header设置logo -
navbar-brand设置部件具体内容（此处将下方原有个人博客网站代码移动到上部） -
navbar-nav和li(列表)结合设置导航栏logo以外的内容
删除下方原有个人博客代码后，还需要去base.css中删除相应代码
4、导航栏响应式布局
-
增加下拉按钮
span：表示设置下拉图标data-toggle：表示下拉图标的显示
-
导航栏添加选中状态
所有和博客、主页有关的页面都需要添加该条信息，注意
nav_xxx_active中的xxx要跟随home和blog变动 -
下拉时保持导航栏不变动
但此时会出现新的问题，导航条覆盖了标题
这里需要修改全局的
body设置，如果设置了还是没反应需要用shift+F5清理一下服务器缓存
推荐这些文章：
Django开发
1 新建项目
2 创建app
python manage.py startapp app01
注册app:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processor...
1.前端基础
html：看一下标签
css：装饰页面，操纵页面布局
js：前端专用语言
jquery：是js的一个封装库，语法和js稍微不太一样
2.快速美化页面
bootstrap库找到css链接：https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css
font awesome库是字体icon库
bootstrap.min.css中间min的意思是压缩版本，上线时候用
不带min的是开发版本
把这两个链接通过浏览子打开后下载下来
创建如下图所示文件夹，然后直接把下载下来的文件拷贝到bootstrap目录...
在制作的页面中，很多页面只有一小部分是有改变的，其他的部分都一样，这个时候就可以将没有变动的部分作为母版。
示例：新建一个base.html ，用来当作母版
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>书籍列表</title> <meta name="viewport" content="width=device-width, initial-scale=1"> {% load s...
1. html 的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
&...
基础页面
配置URL
# mysite/urls.py
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
# path('admin/', admin.site.urls),
path('', views.index),
]
从app01导入views视图，配置path路径，默认进入index视图
编写index视图
# views.py
from django.shortcuts import render
...
Django项目 使用Bootstrap样式来装饰book_list页面
一.book_list页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图书列表</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://www.cnblogs.com/static/bootstrap/css/bootstrap.min.c...
一、介绍
响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。
在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。
二、知识点
2.1 导航栏
官方解释：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
2.1.1 基础导航栏
使用 Bootstrap 之前，习惯用 <ul> + <li> 来构造一个导航栏...
基本框架
<nav>
<a href="#">Navbar</a>
<button type="button">
<span></span>
</button>
<div id="navtop">
<ul>
<li>
<a href="#">首页</a>
</li>
&l...
目录
前端之Bootstrap框架
一、简介
二、引入方式
本地引入(最完整的)
CDN引入
三、布局容器
四、栅格系统
五、列偏移
六、表格与表单
6.1表格
6.2表单form
七、按钮
预定义样式
八、组件
如何使用
前端之Bootstrap框架
一、简介
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
该框架是很多前端框架的鼻祖 学会它几乎可以熟悉很多框架的原理
二、引入方式
地址：https://v3.bootcss.com/
bootstra...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"&g...
文章链接：https://www.dianjilingqu.com/3969.html
本文章来源于网络，版权归原作者所有，如果本站文章侵犯了您的权益，请联系我们删除，联系邮箱：saisai#email.cn，感谢支持理解。