Django系列之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。我们需要做的就是

1. 把那些重复的东西改为for ... in...这样 的循环语句
2. 把写死的展示内容(比如标题名称、文本内容等)改为实际的变量渲染

<div class="masthead">
        <h3 class="text-muted">Project name</h3>
        <nav>
          <ul class="nav nav-justified">