Bootstrap学习
什么是Bootsrap
Bootsrap是一个前段框架。前段框架是干什么的呢?对于没有设计师和前端工程师资源、又想快速实现一套原型系统的人来说 , 有了前段框架,就可以快捷画出优美的界面。这里的画,实际上就是“搭积木”,Bootstrap提供了各种各样现成的“积木”。
框架功能:
- 页面脚手架:比如样式重置、浏览器兼容、栅格系统和简单布局
- 基础的CSS 样式:比如代码高亮、排版、表单、表格和一些小的样式效果
- 组件:提供 了很多常用组件,如 tab 、 pill 、导航、弹窗、顶部栏和 card 等
- JavaScript 插件: 主要是一些动态功能,比如下拉菜单、模态窗口和进度条等
基础模块:
- 容器container:
<div class="container">
用来存放Bootstrap定义好的其他块。容器有两种- 一种是:固定居中两侧留白的页面
- 一种是:无固定宽度(跟随屏幕宽度布局),始终占屏100%
- 栅格系统:把页面划分为 12 列,按内容占多少列来确定其宽度。
简单的入门
- container:容器,后面跟head main 等用来区分
- navbar:导航栏组件,包含很多的组件:navbar-brand narbar-bav dropdown
- jumbotron:超大屏幕。用来显示重要信息,如标题
- row和col-?(col-sm-?和col-md-?):就是栅格的具体实现,col-sm:small column,col-md:middle column,与col构成3级的分列宽度,分别对应大中小。
- card:卡片组件,以卡片的方式来组织内容的展示。
网上有很多优秀的Bootstrap案例,我们只需要挑选合适自己的开发,下载后修改即可。网站的地址:
Bootstrap中文文档:https://www.bootcss.com/网站右上角有很多优质的案例。入门学习的话选择Qiuck-satrt,里面也有初级的页面案例。传送门
学会套页面
把Bootsrap放入Django的模板里面,比如基模板base.html。我们需要做的就是
- 把那些重复的东西改为
for ... in...
这样 的循环语句 - 把写死的展示内容(比如标题名称、文本内容等)改为实际的变量渲染
<div class="masthead">
<h3 class="text-muted">Project name</h3>
<nav>
<ul class="nav nav-justified"></