您的位置：首页 > Web前端 > BootStrap

Bootstrap笔记2—禁止响应、清除浮动、图片响应式、媒体查询

2017-03-08 10:53 573 查看

1.禁止响应式

1.移除

<head>

头标签里的下面这行meta标签

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" >

2.，

class="container"改为id或其他类名并添加宽度

#container {
width: 960px;
margin: 0 auto;
}

3.如果使用了导航条，需要移除所有导航条的折叠和展开行为。

2.清除浮动

添加类

class="clearfix"

3.响应式图片

响应式图片会随着浏览器窗口的改变而等比例改变大小。

添加类

class="img-responsive"

例如：

<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/slider1.jpg" alt="" class="img-responsive">
</div>
</div>
</div>

4.关于文本

4.1文本对齐

p标签中文本对齐方式三种：

class="text-left"
class="text-right"
class="text-center"

4.2缩略语

<abbr title="跟我一起学习Bootstrap">学习Bootstrap</abbr>

鼠标放上显示完整文字如图：

5.ul列表

去掉ul列表前面的圆点

class="list-unstyled"

例如：

<ul class="list-unstyled">
<li>我是一个li</li>
<li>我也是一个li</li>
</ul>

6.媒体查询

屏幕大于768px时，左边div…右边div…

css样式：

<style>
@media (min-width: 768px) {
#left {
width: 250px;
height: 600px;
/*margin-top: 50px;*/
position: absolute;
z-index: 1;
}
#main {
margin-left: 260px;
/*margin-top: 50px;*/
}
}
</style>

html:

<nav class="navbar navbar-default navbar-static-top"></nav>
<div id="left"></div>
<div id="main"></div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap

相关文章推荐

新的分享

章节导航