【程序员代码心得】Bootatrap导航和轮播以及栅格布局的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_22903531/article/details/78386974

Bootatrap导航和轮播以及栅格布局的实现

一、导航

1、导航很简单

<!--使用了BOOTSTRAP的导航条-->
<nav class="navbar navbar-default navbar-fixed-top " role="navigation">
    <div class="container">
        <div class="navbar-header">
            <img src="img/logo.png">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">iOS</a></li>
                <li><a href="#">SVN</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">jmeter</a></li>
                        <li><a href="#">EJB</a></li>
                        <li><a href="#">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="#">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

解释： .container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

.navbar-fixed-top固定在顶部

在实现CSS中：

.body{
    padding-top: 70px;
}

主要是和下面的导航条有个间距。

二、轮播

2、轮播需要注意CSS的书写

<!-- 广告轮播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#ad-carousel" data-slide-to="1"></li>
        <li data-target="#ad-carousel" data-slide-to="2"></li>
        <li data-target="#ad-carousel" data-slide-to="3"></li>
        <li data-target="#ad-carousel" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/chrome-big.jpg" alt="1 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Chrome</h1>

                    <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
                          role="button" target="_blank">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="img/firefox-big.jpg" alt="2 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Firefox</h1>

                    <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="img/safari-big.jpg" alt="3 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Safari</h1>

                    <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="img/opera-big.jpg" alt="4 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>Opera</h1>

                    <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>

                    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="img/ie-big.jpg" alt="5 slide">

            <div class="container">
                <div class="carousel-caption">
                    <h1>IE</h1>

                    <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
                    <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
                          role="button">点我下载</a></p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>

解释：<ol class="carousel-indicators"> </ol>这个是定义轮播图片下面切换的小点点。
在为了兼容所有浏览器浏览轮播实现图片100%浏览
.carousel img{
width: 100%;
}

三、栅格

<!---布局------->
<div class="container container-style">
    <div class="row" >
        <div class="col-sm-4">
            <img src="img/chrome-logo-small.jpg">
            <h2>Chrome</h2>
            <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>

            <p><a class="btn btn-default container-button" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-sm-4">
            <img src="img/firefox-logo-small.jpg">
            <h2>Firefox</h2>
            <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-sm-4">
            <img src="img/safari-logo-small.jpg">
            <h2>Safari</h2>

            <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

            <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
    </div>

</div>
</div>

主要是分了三列去布局。这样响应式布局兼容。
css代码：
*<!--布局----->*/
让字体居中
.container-style .col-sm-4{
text-align: center;
}
.container-style .col-sm-4 p{
color: #5bc0de;
}
设置当鼠标经过图片时候放大为原来的1.3倍效果：
.container-style .col-sm-4 img:hover{
transform: scale(1.3);
}

一直很喜欢bs，现在还在好好学习js加油。