目的
上一篇很简单讲了如何在Django中使用bootstrap。这一次,大概会说说自己使用bootstrap做Body的框架。
分析
一般的页面分为顶部的导航条,内容和尾部链接、版权等信息。对于每个页面来讲,这三部分框架是基本相同的(内容有可能不同)。所以最基本的body就包括navbar(导航条)、content(正文)和footer(尾注)。
使用
接下来,依次看下上述三部分是如何搭建出来的。
**ps:bootstrap使用的是V3.3.5 **
1 navbar
在bootstrap网站导航条的组件里,在右侧选择导航条。将默认格式的导航条COPY到你的项目中,你就可以看到如官网的效果了(这就是开源让我们站着巨人的肩膀上)。
几点说明:
- 使用的标签名是nav。当然你也可以使用div,不过官网已经告诉:如果想用div做导航条,需要加一个role属性-navigation。
务必使用 <nav>
元素,或者,如果使用的是通用的 <div>
元素的话,务必为导航条设置 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中:
<script src="{% static 'js/jquery-2.2.3.min.js' %} "></script>
<script src="{% static 'js/bootstrap.min.js' %} "></script>
- 在很多网站可以看到:向下翻,导航条一直在顶部,这个是因为对
nav
标签采用了.navbar-fixed-top
的样式。但这样也会造成一个问题,就是导航条和正文重叠。这个问题困扰了我好久,search的解决方案是,需要给body设定margin-top(** 基础:盒子模型中重要的概念内填充是内容和标签的距离; **):
body {
margin-top: 70px;
}
*着色,一般来讲,如果没有美感(我是属于完全没有美感的童鞋),所以我使用navbar-inverse修饰nav
标签就好。
2 content正文
正文我做的比较简单,左边是side-bar(左边栏),内容。
这部分很基本来讲,就是用到bootstrap的栅栏,那就是div设置row
,然后再里面再分块(即再使用row
修饰div):
bootstrap中是分12格,所以看你的情况,做分割。
3 尾注
尾注一样可以用nav,只不过nav修饰的类是navbar-fixed-bottom
,同样,就需要设置body的margin-bottom。
结语
大致的框架就这样出来了,虽然简单,但是麻雀虽小,五藏俱全。