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

最新推荐文章于 2025-10-07 02:26:11 发布

原创最新推荐文章于 2025-10-07 02:26:11 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstrap 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Bootstrap中禁止响应式布局，包括移除响应式元标签和导航条的折叠行为。同时讲解了清除浮动的实现方法，如使用.clearfix类。还详细阐述了响应式图片的应用，利用.img-responsive类使图片自适应屏幕。在文本处理部分，讨论了文本对齐和缩略语的实现，并展示了如何去除ul列表前的圆点。最后，通过媒体查询展示了针对不同屏幕尺寸调整布局的技巧。

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>