浪啊浪啊浪~ 我要在代码的海洋里浪飞天~~~
一个个浪过去,先来撩一个名叫BootStrap的汉纸,从头开始,我要把它剥光光(⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄)
那就先从导航部分开始,级别低的我看不上,我们来一个高级别的响应式的,要聪明的,自觉地,就类似这样子的:
什么是响应式呢? 就是窗口变大变小的时候实现不一样的样子,也就是自己去适应不同的环境,而不是我去迁就他(应该放帅哥哥的,失误失误)
那其实BootStrap本身就是响应式不是,其实这个还是挺好做的,给你个充气娃娃(我允许你拿我的当模板)
然后只要知道导航的几个组件就ok了,至于组件的一些样式什么的呢,看你心情,你想要帅哥还是大叔 ,姑娘还是人妖,自己去组合鼻子眼睛
那我们就来看下我写的这个用到的几个导航组件(不过基本已经把常用的都包含上了):
其实啊,真正的颜值在于上边的按钮,也就是这一段
button就是右上角的三道杠按钮,里面的类navbar-toggle是给这个button加个样式,让他处于导航条的右边,不加的话是呢个熊样你可以试试。data-toggle="collapse"跟下拉菜单data-toggle="dropdown"一个尿性,表明这个是三条杠导航。data-target="#bs-example-navbar-collapse-1"指定点击三道杠后弹出啥玩意,跟幻灯片轮播里的指定哪个div里的图片,作用相同。后面的三个span就是画了三道杠。这样这个三道杠button就做好了,真特娘的累!
下面是包含需要隐藏的导航选项的ul,id="bs-example-navbar-collapse-1"就是给上面的data-target用的,表示点一下三道杠出现这个ul。collapse类是指这个ul是默认隐藏的,在点三道杠之前别特么给我出来!navbar-collapse是屏幕大的时候需要显示这些隐藏的导航选项,如果不加,大屏的时候就不显示了,只能小屏的时候点三道杠才显示。
如此,一个听话的美美的汉纸头就出来啦,哈哈哈
头好了肯定还要完美的身材对不对,我们下回清早,当然可以先收藏慢慢做,欢迎加群142991222一起分享探讨,噶散户,泡汉子撩妹子
等着你哦