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

来源：互联网发布：js导出表格插件编辑：程序博客网时间：2024/04/30 00:10

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>

0 0