导航条

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

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

实现了响应式的效果

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