bootstrap布局實例

阿新 • • 發佈：2019-01-16

行高 ons adding efault RoCE 導航 height 使用圓角

1.路徑導航

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>路徑導航</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="#">產品</a></li>
            <li class="active">售後</li>
        </ol>
    </div>
</div>

</body>
</html>

技術分享圖片

2.bootstrap下拉菜單

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>路徑導航</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="#">產品</a></li>
            <li class="active">售後</li>
        </ol>
    </div>
</div>
<br>
<br>
<!--放在一行-->
<div class="row">
<!--關聯類-->
    <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>

技術分享圖片

實例：水果節

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水果節</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導航條類，navbar-inverse黑色導航條，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目標，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定義導航條菜單-->
            <ul class="nav navbar-nav">
                <!--active選中狀態-->
                <li class="active"><a href="#">推薦商品</a></li>
                <li><a href="#">手機生鮮</a></li>
                <li><a href="#">抽獎</a></li>
            </ul>
            <!--定義菜單裏的表單，navbar-form定義導航條的表單，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">
            <!--柵格設計，適應瀏覽器縮放-->
            <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="標題" class="banner_title img-responsive">
                <h2 class="banner_detail_title">水果介紹</h2>
                <P class="banner_detail">出於性能的考慮，所有圖標都需要一個基類和對應每個圖標的類。把下面的代碼放在任何地方都可以正常使用。註意，為了設置正確的內補（padding），務必在圖標和文本之間添加一個空格。</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">

        <h3 class="text-center">活動圖片</h3>
        <p class="text-center">現代的輔助技術能夠識別並朗讀由 CSS 生成的內容和特定的 Unicode 字符。為了避免 屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容（尤其是當圖標純粹作為裝飾用途時），我們為這些圖標設置了 aria-hidden="true" 屬性。</p>
    <!--row平衡容器的15px邊距，它裏面的是負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="活動一">
                <h4>現場采摘活動</h4>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active02.jpg" alt="活動一">
                <h4>現場采摘活動</h4>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active03.jpg" alt="活動一">
                <h4>現場采摘活動</h4>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="thumbnail">
                <img src="images/active04.jpg" alt="活動一">
                <h4>現場采摘活動</h4>
            </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">
                <h4>商品名稱</h4>
                <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">
                <h4>商品名稱</h4>
                <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">
                <h4>商品名稱</h4>
                <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">
                <h4>商品名稱</h4>
                <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">
                <h4>商品名稱</h4>
                <p>￥ 25.00/500g</p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

CSS文件：

/ CSS Document /
/調整logo位置/
.navbar-brand{
padding: 7px 15px;
}
/導航條背景色，邊框色/
.navbar-inverse{
background-color: #ff722b;
border-color: #FF722B;
}
/導航條列表文字顏色/
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
/列表首頁選中狀態，/
.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;
}
/導航條下拉列表表單的邊框顏色/
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #FFFFFF;
}
/導航條的底部margin/
.navbar{
margin-bottom: 0;
}
/巨幕/
.jumbotron{
background: url("../images/banner_bg.jpg") center center no-repeat;
padding: 25px 0;
}
/標題位置/
.banner_title{
margin-top: 47px;

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

@media (max-width:992px){
.banner_title{
margin-top: 15px;
}
}
/二級標題文字大小，顏色/
.banner_detail_title{
font-size: 18px;
color: #FFFF00;
}
/文字內容，大小，顏色，行高/
.jumbotron .banner_detail{
font-size: 14px;
color: #FFFFFF;
line-height: 28px;
}
/第三部分標題位置，大小，顏色/
.innersty h3{
margin-top: 0px;
font-size: 30px;
color: #333;
}
/第三部分內容大小，顏色/
.innersty p{
font-size: 14px;
color: #333;
}
/第三部分圖片樣式，最大圖片寬度，適應瀏覽器縮放，位置調整/
.active_list .thumbnail{
max-width: 260px;
margin: 0 auto 20px;
}
/圖片下的文字居中/
.active_list .thumbnail h4{
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%;
}
/瀏覽器縮柵格占比，流動對齊/
@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布局實例

行高 ons adding efault RoCE 導航 height 使用圓角 1.路徑導航 <!doctype html><html><head><meta charset="utf-8"><

Bootstrap 布局組件

ole 陰影 alt tro head href tab dropdown 按鈕 1.Bootstrap 字體圖標(Glyphicons) Bootstrap 捆綁了 200 多種字體格式的字形。 1.1用法 <button type="button" class=

bootstrap布局兩列或者多列表單

復制 AD BE 結束 body too ots 時間 IT 1, 代碼如下: <div class="form-group"> <labe

轉：阮一峰Flex 布局教程：實例篇

side web figure title borde 無法 ref .com 1.2 作者：阮一峰日期： 2015年7月14日上一篇文章介紹了Flex布局的語法，今天介紹常見布局的Flex寫法。你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。我只列

WPF的ListView控件自定義布局用法實例

color xaml center control highlight auto 顏色 ble sca 本文實例講述了WPF的ListView控件自定義布局用法。分享給大家供大家參考，具體如下：概要：以源碼的形式貼出，免得忘記後，再到網上查資料。在VS2008+SP1環

一起talk C栗子吧（第一百三十一回：C語言實例--C程序內存布局三）

view tracking 變化 content easy 內存 ask tex 延伸各位看官們，大家好。上一回中咱們說的是C程序內存布局的樣例，這一回咱們繼續說該樣例。閑話休提，言歸正轉。讓我們一起talk C栗子吧。看官們，關於C程序內

Flex 布局教程：實例篇

nth idt between .org sch align opp cti dem 今天介紹常見布局的Flex寫法。你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。我只列出代碼，詳細的語法解釋請查閱《Flex布局教程：語法篇》。我的主要參考資料是La

零元學Expression Blend 4 - Chapter 11 用實例了解布局容器系列-「Border」

.org none main -c formats str dot cor back 原文:零元學Expression Blend 4 - Chapter 11 用實例了解布局容器系列-「Border」

零元學Expression Blend 4 - Chapter 13 用實例了解布局容器系列-「Pathlistbox」I

清空 path ets arc 結合 des log box alt 原文:零元學Expression Blend 4 - Chapter 13 用實例了解布局容器系列-「Pathlistbox」I

零元學Expression Blend 4 - Chapter 14 用實例了解布局容器系列-「Pathlistbox」II

paths clas 朋友接受做出 efault www tro 例子原文:零元學Expression Blend 4 - Chapter 14 用實例了解布局容器系列-「Pathlistbox」II

零元學Expression Blend 4 - Chapter 9 用實例了解布局容器系列-「Canvas」

font 發現布局 tar 微軟 express 新手 isp pre 原文:零元學Expression Blend 4 - Chapter 9 用實例了解布局容器系列-「Canvas」

零元學Expression Blend 4 - Chapter 10 用實例了解布局容器系列-「StackPanel」

問題新手 button bsp 使用 arch src ive ane 原文:零元學Expression Blend 4 - Chapter 10 用實例了解布局容器系列-「StackPanel」

css多列布局（實例）

text oct spa height back 中間 red 自適應 har 前言一列布局二列布局三列布局 1 一列布局一列布局： HTML部分 <!DOCTYPE html> <html> <head> <m

從實例中學習grid布局

{} 簡單 mic 通過目前例子 get www. pre 對於Web開發者來說，網頁布局一直是個比較重要的問題。 Web 布局主要經歷了以下四個階段：　　1、table表格布局；　　2、float浮動及position定位布局；　　3、flex彈性盒模型布局，革

48.HTML---Flex 布局教程：實例篇

按鈕 nav 技術分享 and asset itl back href red 你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。我只列出代碼，詳細的語法解釋請查閱《Flex布局教程：語法篇》。我的主要參考資料是Landon Schropp的文章和Solved

Expression Blend實例中文教程(4) - 布局控件快速入門Canvas

屬性定義中修改於平用戶交互理解遊戲進行 image 上一篇，我介紹了Silverlight控件被分為三種類型，第一類： Layout Controls（布局控件) 第二類： Item Controls （項目控件) 第三類： User Interaction

【BootStrap】布局組件 I

包括 code put school radi 靈活 -- 標簽上拉 BootStrap布局組件 I 　　除了在原生的HTML基礎上進行了外觀和類別上的改進，BS還包裝了很多組件進庫中，設計網頁時我們可以方便地調用這些組件。下面來簡略地介紹一下各種各樣的組件 ■

【BootStrap】布局組件 II

ssa text 關閉 art 一個默認樣式沒有 new 部分 BootStrap 布局組件 II ■　　分頁　　BS中通過.pagination的ul元素來實現一個分頁集合，一個典型的分頁如下： <ul class="pagination">

Java 局部變量、實例變量、類變量（靜態變量）區別

其中對象 llc -c cli num 改變 system name 1. 局部變量：局部變量是類的方法中的變量； 2. 實例變量：實例變量也是類中獨立於方法之外的變量，不過沒有static修飾，也叫對象變量 3. 類變量（靜態變量）：類變量是類中獨立於方法之外的

python fabric模塊生產環境dubbo代碼包發布管理完整實例

fabric 代碼包部署#!/usr/bin/env pythonimport osimport timeimport fabricfrom fabric.api import *from fabric.context_managers import *from fabric.colors import *f

bootstrap布局實例

相關推薦