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

1.禁止响应式

1.移除头标签里的下面这行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/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">学习Bootstrapabbr>

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

5.ul列表

去掉ul列表前面的圆点

class="list-unstyled"

例如：

<ul class="list-unstyled">
    <li>我是一个lili>
    <li>我也是一个lili>
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:

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