bootstrap实战（二）-响应式图片显示（随着浏览器大小变化，图片大小变化）

最新推荐文章于 2024-09-06 18:56:20 发布

鲸鱼姐

最新推荐文章于 2024-09-06 18:56:20 发布

阅读量3.7k

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhaolulu916/article/details/103066585

版权

bootstrap 专栏收录该内容

35 篇文章 7 订阅

订阅专栏

1.给导航栏下放置页面，如下效果，图片随着屏幕变小，也会变小：

技术要点：

1. img添加img-responsive属性后，会自动随屏幕大小而变化 <img src="image/2.png" class="img-responsive" style="display: inline-block" alt="php">

2. img是行内元素，通过style="display: inline-block"，变成行块元素，会居中显示。

电脑端：

手机端：

2. html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title> 
    <script src="jquery-3.4.0.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="navbar-zll.css">
   
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#navbar-menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.htm" class="navbar-brand">开发学习</a>
            </div>

            <div class="navbar-collapse collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#home">首页</a></li>
                    <li><a href="index.html">前端开发</a></li>
                    <li><a href="index.html">后端开发</a></li>
                    <li><a href="index.html">联系我们</a></li>
                </ul>
            </div>
        </div>


    </nav>
    <div id="home">
        <div class="lvjing">
            <div class="container">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <h1>坚持每天学习</h1>
                        <p>加油<br>每天进步一点点</p>
                        <img src="image/2.png" class="img-responsive" style="display: inline-block" alt="php">
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

3. navbar-zll.css

body{
    font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu ;
}

.navbar-default{
    BACKGROUND-COLOR: #FFFFFF;
    BORDER: NONE; 
    BOX-SHADOW: 0PX 2PX 8PX 0PX RGB(50,50,50,0.2);
}

.navbar-default .navbar-brand{
    font-size: 26px;
    font-weight:bold;
    color:#3CBFB8;
    height: 70px;
    line-height: 35px;
}

.navbar-default .navbar-nav>li>a {
    font-size: 16px;
    font-weight: bold;
    color: #666;
    height: 70px;
    line-height: 30px;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #666;
}

.navbar-default .navbar-toggle:hover {
    background-color: #3CBFB8;
}
.navbar-toggle{
    margin-top:15px;
}

.navbar-toggle{
    margin-top:12px;
}

/*home*/
#home {
    background: url(image/1.png);
    height: 650px;
    background-size: cover;
    margin-top: 70px;
    color:#FFFFFF;
    text-align: center;
    width: 100%;
}

.lvjing{
    width:100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    padding: 90px 0;
}

#home h1{
font-weight:bold;
margin-top:0;
margin-bottom: 25px;
}

#home p{
    font-weight: 400;
    line-height: 35px;
}