Django bootstrap基本页面的搭建

目的

上一篇很简单讲了如何在Django中使用bootstrap。这一次，大概会说说自己使用bootstrap做Body的框架。

一般的页面分为顶部的导航条，内容和尾部链接、版权等信息。对于每个页面来讲，这三部分框架是基本相同的（内容有可能不同）。所以最基本的body就包括navbar（导航条）、content（正文）和footer（尾注）。

接下来，依次看下上述三部分是如何搭建出来的。
**ps：bootstrap使用的是V3.3.5 **

在bootstrap网站导航条的组件里，在右侧选择导航条。将默认格式的导航条COPY到你的项目中，你就可以看到如官网的效果了（这就是开源让我们站着巨人的肩膀上）。
几点说明：

务必使用

元素，或者，如果使用的是通用的

元素的话，务必为导航条设置 role="navigation"
属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

就拿nav来讲（其他也一样），第一层子元素通常需要一个div（基础知识：div通常没有什么含义，常作为逻辑划分。div属于块状元素。块状元素特别是每个都重起一行，可设置宽度高度）。在bootstrap中这个元素可用container或者container-fluid，被称为布局容器。区别在于：

container: 类用于固定宽度并支持响应式布局的容器。
container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

导航栏中如果直接用a标签，会发现便签贴得很近，ul的class设置为nav navbar-nav。然后再在下一层使用li和a标签。
*导航栏的左右可以设置navbar-left或者navbar-right来居左或者居右。
*导航栏的响应式效果：注意如果想比如设置下拉，如果按照bootstrap起步里讲的，是没有效果的。原因是没有加jquery在bootstrap的前面，如果想用响应式效果需要在head中：

在很多网站可以看到：向下翻，导航条一直在顶部，这个是因为对nav标签采用了.navbar-fixed-top的样式。但这样也会造成一个问题，就是导航条和正文重叠。这个问题困扰了我好久，search的解决方案是，需要给body设定margin-top(** 基础：盒子模型中重要的概念内填充是内容和标签的距离； **)：

body {
    margin-top: 70px;
}

*着色，一般来讲，如果没有美感（我是属于完全没有美感的童鞋），所以我使用navbar-inverse修饰nav标签就好。

正文我做的比较简单，左边是side-bar（左边栏），内容。
这部分很基本来讲，就是用到bootstrap的栅栏，那就是div设置row，然后再里面再分块（即再使用row修饰div）：
bootstrap中是分12格，所以看你的情况，做分割。

尾注一样可以用nav，只不过nav修饰的类是navbar-fixed-bottom，同样，就需要设置body的margin-bottom。

大致的框架就这样出来了，虽然简单，但是麻雀虽小，五藏俱全。