Django博客实战T10-CSS框架协助前端布局

11.CSS框架协助前端布局

1、选定CSS框架

使用Bootstrap框架

特点:

  • 文档齐全,使用简单(易用性)
  • 兼容较多浏览器(兼容性)
  • 非轻量级(大小)
  • 扁平、简洁(效果)
  • 组件齐全、响应式(功能)

2、部署Bootstrap

  • 打开 www.bootcss.com

  • 下载Bootstrap

  • 引用CSS文件

  • 引用基本模板

    • lang用于修改语言
    • meta第一条是选择最新内核
    • meta第二条是设置响应式,使得网页根据屏幕大小自动适应布局
    • jqueryboostrap需要依赖的部分js框架(先下载,然后放到static目录下)

3、导航栏修订

  • navbar-default 设置导航栏

  • container-fluid 设置容器

  • navbar-header 设置logo

  • navbar-brand 设置部件具体内容(此处将下方原有个人博客网站代码移动到上部)

  • navbar-navli(列表)结合设置导航栏logo以外的内容

删除下方原有个人博客代码后,还需要去base.css中删除相应代码

4、导航栏响应式布局

  • 增加下拉按钮

    • span:表示设置下拉图标
    • data-toggle:表示下拉图标的显示
  • 导航栏添加选中状态

    所有和博客、主页有关的页面都需要添加该条信息,注意nav_xxx_active中的xxx要跟随homeblog变动

  • 下拉时保持导航栏不变动

    但此时会出现新的问题,导航条覆盖了标题

    这里需要修改全局的body设置,如果设置了还是没反应需要用shift+F5清理一下服务器缓存

推荐这些文章:

Django实现简单用户管理

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...

Django 学习四--bootstrap

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目录...

Django项目 母版和继承的基本使用

在制作的页面中,很多页面只有一小部分是有改变的,其他的部分都一样,这个时候就可以将没有变动的部分作为母版。
 
示例:新建一个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">
&...

Django小项目_用户管理系统【第二篇】:基础页面

基础页面

配置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...

Bootstrap实战 - 响应式布局

一、介绍
响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的角色。
在响应式布局中,要求导航栏能够根据终端屏幕大小显示不同的样式。
二、知识点
2.1 导航栏
官方解释:导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
2.1.1 基础导航栏
使用 Bootstrap 之前,习惯用 <ul> + <li> 来构造一个导航栏...

Bootstrap实现基本导航栏折叠效果

基本框架

<nav>
<a href="#">Navbar</a>
<button type="button">
<span></span>
</button>
<div id="navtop">
<ul>
<li>
<a href="#">首页</a>
</li>
&l...

前端之Bootstrap框架

 

目录

前端之Bootstrap框架

一、简介
二、引入方式

本地引入(最完整的)
CDN引入

三、布局容器
四、栅格系统
五、列偏移
六、表格与表单

6.1表格
6.2表单form

七、按钮

预定义样式

八、组件

如何使用

 
前端之Bootstrap框架
一、简介
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
该框架是很多前端框架的鼻祖 学会它几乎可以熟悉很多框架的原理
二、引入方式
地址:https://v3.bootcss.com/
bootstra...

【CSS】实现两栏布局

<!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...

文章标题:Django博客实战T10-CSS框架协助前端布局
文章链接:https://www.dianjilingqu.com/3969.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>