导航条

bootstrap-导航菜单_官网

bootstrap-导航菜单_响应式_02

注,要先写导航条,再写菜单

是导航条包container

开始

bootstrap-导航菜单_导航条_03

放样式
bootstrap-导航菜单_官网_04
效果

bootstrap-导航菜单_导航条_05

没有背景

bootstrap-导航菜单_导航条_06

bootstrap-导航菜单_表单_07
因味儿死

灰色的

bootstrap-导航菜单_导航条_08

bootstrap-导航菜单_导航条_09

黑色背景

bootstrap-导航菜单_官网_10
效果虽然出来了

不过边界有圆角
bootstrap-导航菜单_导航条_11

解决圆角

bootstrap-导航菜单_官网_12

bootstrap-导航菜单_导航条_13

效果

bootstrap-导航菜单_官网_14

小结定义LOGO

bootstrap-导航菜单_导航条_15

定义菜单

bootstrap-导航菜单_表单_16

bootstrap-导航菜单_圆角_17

bootstrap-导航菜单_表单_18

定义菜单里面的表单

bootstrap-导航菜单_官网_19

bootstrap-导航菜单_官网_20

让表单到右边去

bootstrap-导航菜单_响应式_21

bootstrap-导航菜单_导航条_22

希望go这里变成图象

使用组件

组件 · Bootstrap v3 中文文档
https://v3.bootcss.com/components/

bootstrap-导航菜单_圆角_23

替换go,替换前后比较

bootstrap-导航菜单_官网_24
bootstrap-导航菜单_导航条_25

bootstrap-导航菜单_官网_26

这样子做的导航是具有响应式的

拉小试一试
bootstrap-导航菜单_圆角_27

bootstrap-导航菜单_圆角_28

boot的官网的响应试也体验一下

缩小了以后bootstrap-导航菜单_表单_29

点击右上角的菜单

bootstrap-导航菜单_表单_30

目标 菜单

放置的位置

代码写在这里,白色块块的区域

bootstrap-导航菜单_圆角_31

位于logo同一级上面

bootstrap-导航菜单_圆角_32

随便打点字,再看效果

bootstrap-导航菜单_表单_33

有内容了,但是,目标的效果是小横杠

放入三个小横杠

bootstrap-导航菜单_官网_34

效果

bootstrap-导航菜单_表单_35

切换效果

期望的效果,菜单一开始是藏起来的

点了右上角的小横杠才出来

原来的样子

bootstrap-导航菜单_响应式_36

bootstrap-导航菜单_圆角_37

包裹盒子的样式

bootstrap-导航菜单_响应式_38

bootstrap-导航菜单_圆角_39
bootstrap-导航菜单_圆角_40

小结一下,加了两个东西

1,右上角的横杠菜单

bootstrap-导航菜单_官网_41

2,给菜单的内容添加盒子

bootstrap-导航菜单_表单_42

效果

菜单藏起来了

不过点的时候没有效果

bootstrap-导航菜单_响应式_43

还需要添加东西

通过属性来加

先来一个用法说明

bootstrap-导航菜单_表单_44

通过给id,锁定一个目标

data-toggle用于指定特效是什么

collapse表示踏陷

bootstrap-导航菜单_官网_45

再次点击,就可以看见收起与展开的效果了
bootstrap-导航菜单_圆角_46

至此为止,导航菜单的制作完成

实现了响应式的效果

而且还有小屏时右上角菜单的点击收缩功能