bootstrap布局實(shí)例

1.路徑導(dǎo)航

成都創(chuàng)新互聯(lián)公司2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元通道做網(wǎng)站,已為上家服務(wù),為通道各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>路徑導(dǎo)航</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>

<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#">首頁</a></li>
            <li><a href="#">產(chǎn)品</a></li>
            <li class="active">售后</li>
        </ol>
    </div>
</div>

</body>
</html>

bootstrap布局實(shí)例

2.bootstrap下拉菜單

（1）dropdown-toggle
（2）dropdown-menu

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>路徑導(dǎo)航</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>

<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#">首頁</a></li>
            <li><a href="#">產(chǎn)品</a></li>
            <li class="active">售后</li>
        </ol>
    </div>
</div>
<br>
<br>
<!--放在一行-->
<div class="row">
<!--關(guān)聯(lián)類-->
    <div class="dropdown">
    <!--不用寫data-target-->
    <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        菜單目錄
        <!--下拉箭頭-->
        <span class="caret"></span>
    </div>
        <!--下拉菜單-->
        <ul class="dropdown-menu">
            <li><a href="#">菜單1</a></li>  
            <li><a href="#">菜單2</a></li>
            <li><a href="#">菜單3</a></li>
        </ul>
</div>
</div>

</body>
</html>

bootstrap布局實(shí)例

實(shí)例：水果節(jié)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水果節(jié)</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>

</head>

<body>

<!--navbar導(dǎo)航條類，navbar-inverse黑色導(dǎo)航條，navbar-static-top消去圓角-->
<div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <!--定義logo，navbar-header聲明logo容器-->
        <div class="navbar-header">
            <!--折疊按鈕,data-toggle類，data-target目標(biāo)，id要加#-->
            <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                <!--icon-bar表示橫杠-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--navbar-brand，logo樣式-->
            <a href="" class="navbar-brand"><img src="images/logo.png" alt="logo"></a>
        </div>
        <!--navbar-collapse折疊樣式-->
        <div class="collapse navbar-collapse" id="mymenu">

            <!--定義菜單 nav,navbar-nav定義導(dǎo)航條菜單-->
            <ul class="nav navbar-nav">
                <!--active選中狀態(tài)-->
                <li class="active"><a href="#">推薦商品</a></li>
                <li><a href="#">手機(jī)生鮮</a></li>
                <li><a href="#">抽獎(jiǎng)</a></li>
            </ul>
            <!--定義菜單里的表單，navbar-form定義導(dǎo)航條的表單，navbar-right菜單靠右-->
            <form action="" class="navbar-form navbar-right">
                <!--form-group表單組-->
                <div class="form-group">
                    <!--按鈕組-->
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <!--span下使用bootstrap的組件-->
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<!--jumbotron巨幕-->
<div class="jumbotron">
    <div class="container">

        <div class="row">
            <!--柵格設(shè)計(jì)，適應(yīng)瀏覽器縮放-->
            <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
            <!--img-responsive圖片縮放-->
                <img src="images/banner_title.png" alt="標(biāo)題" class="banner_title img-responsive">
                <h3 class="banner_detail_title">水果介紹</h3>
                <P class="banner_detail">出于性能的考慮，所有圖標(biāo)都需要一個(gè)基類和對(duì)應(yīng)每個(gè)圖標(biāo)的類。把下面的代碼放在任何地方都可以正常使用。注意，為了設(shè)置正確的內(nèi)補(bǔ)（padding），務(wù)必在圖標(biāo)和文本之間添加一個(gè)空格。</P>
            </div>
            <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">

                <img src="images/basket.png" alt="fruit1" class="img-responsive">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row innersty">

        <h4 class="text-center">活動(dòng)圖片</h4>
        <p class="text-center">現(xiàn)代的輔助技術(shù)能夠識(shí)別并朗讀由 CSS 生成的內(nèi)容和特定的 Unicode 字符。為了避免 屏幕識(shí)讀設(shè)備抓取非故意的和可能產(chǎn)生混淆的輸出內(nèi)容（尤其是當(dāng)圖標(biāo)純粹作為裝飾用途時(shí)），我們?yōu)檫@些圖標(biāo)設(shè)置了 aria-hidden="true" 屬性。</p>
    <!--row平衡容器的15px邊距，它里面的是負(fù)padding--> 
    <div class="row  active_list">

        <div class="col-lg-3 col-md-3 col-sm-6">
            <!--thumbnail圖片的一種樣式-->
            <div class="thumbnail">
                <img src="images/active01.jpg" alt="活動(dòng)一">
                <h5>現(xiàn)場采摘活動(dòng)</h5>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active02.jpg" alt="活動(dòng)一">
                <h5>現(xiàn)場采摘活動(dòng)</h5>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active03.jpg" alt="活動(dòng)一">
                <h5>現(xiàn)場采摘活動(dòng)</h5>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active04.jpg" alt="活動(dòng)一">
                <h5>現(xiàn)場采摘活動(dòng)</h5>
            </div>
        </div>
    </div>
    </div>
</div>
<div class="container">
    <div class="row goods_list">

        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="商品" class="img-responsive">
                <h5>商品名稱</h5>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="商品" class="img-responsive">
                <h5>商品名稱</h5>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="商品" class="img-responsive">
                <h5>商品名稱</h5>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="商品" class="img-responsive">
                <h5>商品名稱</h5>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="goods_con">
                <img src="images/goods.jpg" alt="商品" class="img-responsive">
                <h5>商品名稱</h5>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

CSS文件：

/ CSS Document /
/調(diào)整logo位置/
.navbar-brand{
padding: 7px 15px;
}
/導(dǎo)航條背景色，邊框色/
.navbar-inverse{
background-color: #ff722b;
border-color: #FF722B;
}
/導(dǎo)航條列表文字顏色/
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
/列表首頁選中狀態(tài)，/
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #C45923;
}
/折疊按鈕邊框/
.navbar-inverse .navbar-toggle {
border-color: #FFFFFF;
}
/選中折疊按鈕的背景色/
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
background-color: #C45923;
}
/導(dǎo)航條 下拉列表 表單的邊框顏色/
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #FFFFFF;
}
/導(dǎo)航條的底部margin/
.navbar{
margin-bottom: 0;
}
/巨幕/
.jumbotron{
background: url("../images/banner_bg.jpg") center center no-repeat;
padding: 25px 0;
}
/標(biāo)題位置/
.banner_title{
margin-top: 47px;

}
/標(biāo)題位置隨瀏覽器縮放調(diào)整/
@media (max-width:1200px){
.banner_title{
margin-top: 30px;
}
}

@media (max-width:992px){
.banner_title{
margin-top: 15px;
}
}
/二級(jí)標(biāo)題文字大小，顏色/
.banner_detail_title{
font-size: 18px;
color: #FFFF00;
}
/文字內(nèi)容，大小，顏色，行高/
.jumbotron .banner_detail{
font-size: 14px;
color: #FFFFFF;
line-height: 28px;
}
/第三部分標(biāo)題位置，大小，顏色/
.innersty h4{
margin-top: 0px;
font-size: 30px;
color: #333;
}
/第三部分內(nèi)容大小，顏色/
.innersty p{
font-size: 14px;
color: #333;
}
/第三部分圖片樣式，最大圖片寬度，適應(yīng)瀏覽器縮放，位置調(diào)整/
.active_list .thumbnail{
max-width: 260px;
margin: 0 auto 20px;
}
/圖片下的文字居中/
.active_list .thumbnail h5{
text-align: center;
}
/第四部分每張圖片邊框，最大寬度，位置/
.goods_con{
border: 1px solid #ddd;
max-width: 260px;
margin: 0 auto 20px;
}
/圖片占方框的百分比/
.goods_con img{
width: 100%;
}
/柵格占比/
.goods_list .col-lg-2{
width: 20%;
}
/瀏覽器縮柵格占比，流動(dòng)對(duì)齊/
@media (max-width:1200px){
.goods_list .col-lg-2{
width: 20%;
float: left;
}

}
@media (max-width:992px){
.goods_list .col-lg-2{
width: 33.33%;
float: left;
}

}
@media (max-width:768px){
.goods_list .col-lg-2{
width: 100%;
float: left;
}

}

bootstrap布局實(shí)例
bootstrap布局實(shí)例

文章題目：bootstrap布局實(shí)例
標(biāo)題鏈接：http://muchs.cn/article40/gecceo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站設(shè)計(jì)、微信小程序、、網(wǎng)站排名、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站