旺财游戏旺财游戏 - 110网免费法律咨询
您的位置：
&& 查看咨询 　　　　　　　今日活跃律师： &&&&&&&&&&
待解决问题
的回复获得奖章一枚
的回复获得奖章一枚
的回复获得奖章一枚
的回复获得奖章一枚
的回复获得奖章一枚
的回复获得奖章一枚
的回复获得奖章一枚
的回复获得奖章一枚
的回复获得奖章一枚
的回复获得奖章一枚
旺财游戏旺财游戏
云南－昆明&01-23 13:05&&悬赏 0&&发布者:gezi12…… & 回答:(0) 剩余时间:
广大网友玩家我个人建议,旺财棋牌是一款不靠谱的游戏,它会直接冻结玩家的ID，封玩家的号资金完全不做处理，昨天就有9800元被冻结，支付宝信息也会泄漏，不靠谱也不好玩，只能充值不能体现，只要体现马上封号，请问可以去投诉旺财棋牌吗&网友谨慎下载。
您也有法律问题？ 您可以 发布咨询，我们的律师随时在线为您服务
私密留言：
问题答案可能在这里 →
无锡推荐律师
最佳律师解答
(陈铠楷)()&
(李小利)()&
(雪化平)()&
(周振文团队)()&
(陈铠楷)()&
最新回复律师
北京 海淀区
上海 徐汇区
北京 朝阳区Copyright (C) 2014 51kaoqin.com
All rights reserved 粤ICP备号好多天没有写了，继续走起
在上一篇&&&&中已经把CSS引入到页面中，接下来开始写页面。
首先有些问题要先处理了，问什么你要学bootstrap？ 流行？写网页快？还是其它什么的？说实话，如果写页面很熟练的人（牛人），根本不会用任何框架写，为什么呢，它们太臃肿了，谁写一个页面能把它所有的CSS都应该用上，所有的类都定义上呢？所以很多代码对于页面来说都是多余的，还好上线后，引入的都是资源库，如果你有代码精简强迫症，那估计你要重写（覆盖）一些东西了（注明：其实我大部分时间都在搞后台，前台也只是略懂，高手勿喷，有讲得不对的地方，大胆指正，虚心学习。）
什么是自适应？
我相信这也是你的目的，要做一个自适应的网站，手机（微小设备）、平板（小设备）、一般电脑（中型设备）、大显示器（大型设置）等都能很好的显示，现在一般都是如下两种方式
第一种：不同设备各一套
第一想到的是麻烦，没办法，像有的网站（比如商城），网站跟手机显示的样式或内容有很大区别，做一套？行吗？... 想到这里，你肯定很只能屈服了，好吧，这种我不多说。
第二种：所有设备全一套
这种你肯定看到就高兴了，但这种网站要看页面数据来，不是所有类型的网站都适合，现在CMS系统这样做的比较多。
想到是自适应，所先在写CSS容器的时候不能把宽度固定死，那怎么办？肯定百分比呀。
我怎么觉得废话有点多了，打了这么多字....开干，这里肯定只说第二种情况的
做一个自适应的导航，直接看代码：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Bootstrap 实例 - 响应式的导航栏&/title&
&meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/&
&link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&
&script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"&&/script&
&script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&
&nav class="navbar navbar-default" role="navigation"&
&div class="container-fluid"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"&
&span class="sr-only"&切换导航&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&a class="navbar-brand active" href="javascript:;"&教程&/a&
&div class="collapse navbar-collapse" id="example-navbar-collapse"&
&ul class="nav navbar-nav"&
&li class="active"&&a href="javascript:;"&iOS&/a&&/li&
&li&&a href="javascript:;"&SVN&/a&&/li&
&li class="dropdown"&
&a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown"&Java&b class="caret"&&/b&&/a&
&ul class="dropdown-menu"&
&li&&a href="javascript:;"&jmeter&/a&&/li&
&li&&a href="javascript:;"&EJB&/a&&/li&
&li&&a href="javascript:;"&Jasper Report&/a&&/li&
&li class="divider"&&/li&
&li&&a href="javascript:;"&分离的链接&/a&&/li&
&li class="divider"&&/li&
&li&&a href="javascript:;"&另一个分离的链接&/a&&/li&
查看效果，《》
Nav标签定义导航，role="navigation" 告诉浏览器这是一个导航容器。然后在里面定义一个container-fluid，名义上为不固定（会变化）容器，1411行代码：
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
只定义了内边距，外边距自动，说明它的宽度是父容器的100%，自然会随浏览器窗口大小变化而变化了。
缩小窗口看看效果：
左边栏目图标缩小到一定大小后就会显示，看关键代码4022行：
@media (min-width: 768px) {
.navbar-toggle {
display: none;
如果它的宽度大于768就隐藏了，反之显示。
点击图标显示下拉子导航功能，这个当然是js的效果了。
澄清一下：自适应其实就是在改变浏览器（设备）大小的情况下，应用不同的CSS样式，把范围大的写上面，特殊的写下面，后面的样式覆盖前面的，看CSS源码里面也有大量的层级关系的定义（比如.navbar-nav .open .dropdown-menu），这就意味着dropdown-menu类父级里面必须得有open类，open父级里面必须得有navbar-nav才行，要不然并卵。也就意味着很多写法要按要求来。
上面的案例去看一下它的应用样式，不是好多呀，看得头都晕，哈哈，这就是框架，把不同的设备考虑进去了，自然代码就多啦。
有没有人想到说麻烦，自己写得了，对呀，高手都是自己写的~~~，但框架那时给我们的好处就只体现在速度上了，写网页快。
回头我有空从0写一个自适应的CSS，只写部分，让某些童鞋知道是怎么回事就OK~~
再来一案例（固定到顶部的导航栏）：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Bootstrap 实例 - 固定到顶部&/title&
&meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/&
&link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&
&script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"&&/script&
&script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&
&nav class="navbar navbar-default navbar-fixed-top" role="navigation"&
&div class="container-fluid"&
&div class="navbar-header"&
&a class="navbar-brand" href="#"&教程&/a&
&ul class="nav navbar-nav"&
&li class="active"&&a href="#"&iOS&/a&&/li&
&li&&a href="#"&SVN&/a&&/li&
&li class="dropdown"&
&a href="#" class="dropdown-toggle" data-toggle="dropdown"&
Java &b class="caret"&&/b&
&ul class="dropdown-menu"&
&li&&a href="#"&jmeter&/a&&/li&
&li&&a href="#"&EJB&/a&&/li&
&li&&a href="#"&Jasper Report&/a&&/li&
&li class="divider"&&/li&
&li&&a href="#"&分离的链接&/a&&/li&
&li class="divider"&&/li&
&li&&a href="#"&另一个分离的链接&/a&&/li&
查询效果：《》
固定功能关键代码3956行：
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
z-index: 1030;
position:&& && // 相对浏览器进行绝对定位
如果你对定位不熟悉，看看。
Bootstrap框架导航栏就写这么点，想看更多详细的导航栏效果，请看：
导航栏有了，接下来的部分我将介绍如何写主体部分。
有问题大胆留言，虚心学习~~~
阅读(...) 评论()}