Bootstrap开发响应式布局(2)

Bootstrap实战讲解导航条效果

上次已经我们已经做好了准备工作今天我们就实战讲解下Bootstrap轻松实现导航条效果。废话不多说。

   

RU`_B8CTIBHVŠE)NXUCT2.png 

很轻松就实现了导航的效果,快则几十秒慢则1分钟左右。而且还是只适应手机,平板的欧。我给大家看下效果。

2%XGAU$7[}NB1}(Y)CFS3.png 

这是iPhone6的界面自动适应了手机端。

下面讲解下我是如何这么快实现这个效果的:

首先我们还是打开我们已经下载好的Bootstrap中文文档首先找到组件HYGV_42%~QG@F51T8FSCOJ6.png

然后找到导航条

9C(GJ08SZJ%5W(`RHNRN7`H.png点开即可下面会出现许多代码你不必知道他是干嘛的只要复制粘贴即可。

复制粘贴这个的人看到这一步下面就不用我说了,复制到你的编辑代码的地方修改你要修改的地方即可,该删除删除,该添加添加。我们简单讲解下如何修改吧。

案例:

代码太多我不复制过来,我直接截图你们分析下就好,不懂再问我。我们就来实战看下我这个案例图片2.png

原代码:

原代码:图片3.png

修改后:

图片4.png 

很简单的。今天就说到这。不懂得可以到我博客留言.www.dxblog.cn

或者添加我们社区群进行讨论。不知道在哪里下载Bootstrap的可以留言哦!

本博客所有文章如无特别注明均为原创。作者:东轩oba复制或转载请以超链接形式注明转自 东轩博客一个自媒体的个人优秀博客园
原文地址《Bootstrap开发响应式布局(2)

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)