首页 新闻 赞助 找找看

网页到手机端布局全乱了,bootstrap该怎样使用

0
悬赏园豆:20 [待解决问题]

用chrome来调试页面,发现手机上浏览布局全乱了,我在页面中用到了bootstrap框架,使用时要哪个就去套用class样式,贴上部分代码,

html代码:

<nav class="navbar navbar-default top">
<div class="container">

   <a class="navbar-brand" href="#"><img src="images/001.png"></a>
   <ul class="nav navbar-nav navbar-right">
            <li><a href="#" class="a1" target="_blank">首页</a></li>
            <li><a href="#" class="a1" target="_blank">第二页</a></li>
            <li><a href="#" class="a1" target="_blank">第三页</a></li>
    </ul>
</div>
</nav>

//图片轮播图

<div class="picshow">
<div id="box">
<div> <img src="images/001.jpg"></div>
</div>
<ol id="change" >
<li class="b1 active"></li>
<li class="b1"></li>
<li class="b1"></li>
</ol>
</div>

css代码:

body {
padding-bottom: 50px;
}
.a1 {
margin-top: 10px;
}
.top {
width: 1200px;
margin: 0 auto;
}
.top img {
width:221px;
height:42px;
}
.top ul {
float: right;
}
.top ul li {
float: left;
}
.picshow{
height: 720px;
width: 100%;
position: relative;
}
.picshow #box {
width: 100%;
height: 720px;
}
.picshow #box img {
width: 100%;
height: 720px;
border: none;
}
.picshow #change {
position: absolute;
list-style: none;
width: 400px;
margin: 0 auto;
left: 50%;
bottom: 100px;
margin-left: -100px;
}
.picshow #change li {
float: left;
width: 50px;
height: 24px;
background: url(images/libofore.png) no-repeat;
cursor: pointer;
}
.picshow #change .active {
background: url(images/li.png) no-repeat;
}

网页显示正常,到了手机端图片轮播那部分可以自适应屏幕宽度,但是导航条部分只能显示logo,图片轮播哪里没有用bootstrap,到底怎样才可以很好的再手机端浏览啊,bootstrap里面定义的css可以修改吗?是不是每一个css干嘛呀的都要记清楚?自适应和响应式是不是一回事?

mikco的主页 mikco | 初学一级 | 园豆:175
提问于:2015-07-02 21:00
< >
分享
所有回答(3)
0

最后面是一回事儿.你用一个框架至少你用的样式类得知道是干嘛用的吧

吴瑞祥 | 园豆:29449 (高人七级) | 2015-07-03 07:41

那么多样式怎么记得住,样式可以修改吗

支持(0) 反对(0) mikco | 园豆:175 (初学一级) | 2015-07-03 09:02

@anti-time: ``````````````````这个你要说什么好..你会觉得开发语言中的关键字太多记不住要去改吗?

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2015-07-03 09:18

@吴瑞祥:我是想说bootstrap.css里面的样式内容可以修改吗,比如说我想导航条高一些,可以修改height属性吗,怎么样实现网页图片的自适应呢?

支持(0) 反对(0) mikco | 园豆:175 (初学一级) | 2015-07-03 09:32
0

bootstrap里面定义的css当然可以做改动啊,可以根据实际项目的需要做一些微调整,如果你所谓的改动是大换血的话,那建议你不要用bootstrap,自己封装个框架吧,另外bootstrap官网里面解释的很详细,你都不看的吗????

芝芝07 | 园豆:365 (菜鸟二级) | 2015-07-03 10:20

我看了记不住啊,现在做的这个网页,有些地方用了bootstrap,有些部分没有用,在电脑上可以兼容到IE8,在chrome上移动端测试布局很乱,不是网页端的显示效果,不知道从哪里改,我想能不能用media screen来查询写手机端的布局,怎么封装框架啊,前端很菜不懂啊,求指点~

支持(0) 反对(0) mikco | 园豆:175 (初学一级) | 2015-07-03 10:54

@anti-time: 我想能不能用media screen来查询写手机端的布局,当然可以啊,另外电脑端一般不都是几栏布局,而移动设备多采用流式布局,所以Bootstrap的栅格结构可以看看了,当然还得根据你的实际项目来看,另外啊,Bootstrap是很简单的,不是让你死记那些东西啊,明白原理不就可以了吗。

支持(0) 反对(0) 芝芝07 | 园豆:365 (菜鸟二级) | 2015-07-03 11:11

@LoveBaymax: 谢谢~~~~

支持(0) 反对(0) mikco | 园豆:175 (初学一级) | 2015-07-03 11:27

@anti-time: 客气了,刚开始可能比较难,可什么都觉着都看懂,自己一用就糊涂,哈哈,加油,慢慢地就好了。

支持(0) 反对(0) 芝芝07 | 园豆:365 (菜鸟二级) | 2015-07-03 11:31
0

栅格系统

徐大腿 | 园豆:420 (菜鸟二级) | 2015-07-03 15:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册