情诗网 >撩人情话 > 正文

撩汉子撩汉子撩撩bootstrap响应式导航这个小汉纸

来源:情诗网    2021-01-27    分类:撩人情话

浪啊浪啊浪~ 我要在代码的海洋里浪飞天~~~

一个个浪过去,先来撩一个名叫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一起分享探讨,噶散户,泡汉子撩妹子

等着你哦

热门文章