bootstrap 简易模版 - amber_fs

DOCTYPE HTML>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
meta name="viewport" content="width=device-width,initial-scale=1.0">
    title>bootstraptitle>
    link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    link rel="stylesheet" type="text/css" href="css/style.css" />
head>
body>
div class="header">
    div class="header_logo">div>
    nav class="navbar navbar-default">
        div class="container-fluid">
            div class="navbar-header">
                button type="button" class="navbar-toggle collapsed" dara-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    span class="sr-only">Toggle Navigationspan>
                    span class="icon-bar">span>
                    span class="icon-bar">span>
                    span class="icon-bar">span>
                button>
                a class="navbar-brand" href="javscript:;">Branda>
            div>

            div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                ul class="nav navbar-nav">
                    li class="active">
                        a href="javascript:;">Linkspan class="sr-only">(current)span>a>
                    li>
                    li>a href="javascript:;">Linka>li>
                    li class="dropdown">
                        a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdownspan class="caret">span>a>
                        ul class="dropdown-menu">
                            li>
                                a href="javascript:;">Activea>
                            li>
                            li>
                                a href="javascript:;">
                                    Another action
                                a>
                            li>
                            li role="separator" class="divider">li>
                            li>
                                a href="javascript:;">
                                    Separated
                                a>
                            li>
                        ul>
                    li>
                ul>
                form class="navbar-form navbar-left" role="search">
                    div class="form-group">
                        input type="text" class="form-control" placeholder="Search" />
                    div>
                    button type="submit" class="btn btn-defailt">Submitbutton>
                form>
                ul class="nav navbar-nav navbar-right">
                    li>
                        a href="javascript:;">infospan class="badge">30span>a>
                    li>
                    li class="dropdown">
                        a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdownspan class="caret">span>a>
                        ul class="dropdown-menu">
                            li>
                                a href="javascript:;">Linka>
                            li>
                            li>
                                a href="javascirpt:;">
                                    Dropdown
                                a>
                            li>
                            li role="separator" class="divider">li>
                            li>
                                a href="javascript:;">
                                    separator
                                a>
                            li>
                        ul>
                    li>
                ul>
            div>
        div>
    nav>
div>
div id="myCarousel" class="carousel slide">
    ol class="carousel-indicators">
        li data-target="#myCarousel" data-slide-to="0" class="active">li>
        li data-target="#myCarousel" data-slide-to="1">li>
        li data-target="#mrCarousel" data-slide-to="2">li>
    ol>
    div class="carousel-inner">
        div class="item active">
            img src="http://img5.duitang.com/uploads/item/201408/12/20140812133247_zcLCB.jpeg" />
        div>
        div class="item">
            img src="http://imgstore.cdn.sogou.com/app/a/100540002/702461.jpg" />
        div>
        div class="item">
            img src="http://imgsrc.baidu.com/forum/pic/item/5143ddc451da81cb445bd7135266d01608243158.jpg" />
        div>
    div>
    a class="carousel-control left" href="#myCarousel" data-slide="prev">‹a>
    a class="carousel-control right" href="#myCarousel" data-slide="next">›a>
div>
div class="content clearfix">
    div class="content_left">
        div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            div class="panel panel-default">
                div class="panel-heading" role="tab" id="headingOne">
                    h4 class="panel-title">
                        a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">标题一a>
                    h4>
                div>
                div id="collapseOne" class="panel-collapse in" role="tabpanel" aria-labelledby="headingOne">
                    div class="panel-body">
                        ul>
                            li>a href="javascript:;">内容一a>li>
                            li>a href="javascript:;">内容一a>li>
                            li>a href="javascript:;">内容一a>li>
                            li>a href="javascript:;">内容一a>li>
                            li>a href="javascript:;">内容一a>li>
                        ul>
                    div>
                div>
            div>
            div class="panel panel-default">
                div class="panel-heading" role="tab" id="headingTwo">
                    h4 class="panel-title">
                        a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">标题二a>
                    h4>
                div>
                div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                    div class="panel-body">
                        ul>
                            li>
                                a href="javascript:;">内容二a>
                            li>
                            li>
                                a href="javascript:;">内容二a>
                            li>
                            li>
                                a href="javascript:;">内容二a>
                            li>

                            li>
                                a href="javascript:;">内容二a>
                            li>
                            li>
                                a href="javascript:;">内容二a>
                            li>
                            li>
                                a href="javascript:;">内容二a>
                            li>
                        ul>
                    div>
                div>
            div>
            div class="panel panel-default">
                div class="panel-heading" role="tab" id="headingThree">
                    h4 class="panel-title">
                        a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">标题三a>
                    h4>
                div>
                div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                    div class="pannel-body">
                        ul>
                            li>
                                a href="javascript:;">内容三a>
                            li>
                            li>
                                a href="javascript:;">内容三a>
                            li>
                            li>
                                a href="javascript:;">内容三a>
                            li>
                            li>
                                a href="javascript:;">内容三a>
                            li>
                            li>
                                a href="javascript:;">内容三a>
                            li>

                            li>
                                a href="javascript:;">内容三a>
                            li>
                            li>
                                a href="javascript:;">内容三a>
                            li>
                        ul>
                    div>
                div>
            div>
            div class="panel panel-default">
                div class="panel-heading" role="tab" id="headingFore">
                    h4 class="panel-title">
                        a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFore" aria-expanded="false" aria-controls="collapseFore">标题四a>
                    h4>
                div>
                div id="collapseFore" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFore">
                    div class="pannel-body">
                        ul>
                            li>
                                a href="javascript:;">内容四a>
                            li>
                            li>
                                a href="javascript:;">内容四a>
                            li>
                            li>
                                a href="javascript:;">内容四a>
                            li>
                            li>
                                a href="javascript:;">内容四a>
                            li>
                            li>
                                a href="javascript:;">内容四a>
                            li>
                        ul>
                    div>
                div>
            div>
        div>
    div>
    div class="content_right">
        div class="clearfix">
            ol class="breadcrumb">
                li>
                    a href="javascript:;">homea>
                li>
                li>
                    a href="javascript:;">2016年a>
                li>
                li class="active">
                    a href="javascript:;">三月a>
                li>
            ol>
            div class="dropdown">
                button type="button" class="btn dropdown-toggle" id="dropdownMenul" data-toggle="dropdown">
                    下拉菜单
                    span class="caret">span>
                button>
                ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul">
                    li role="presentation">
                        a role="presentation" tabindex="-1" href="javascript:;">标题一a>
                    li>
                    li role="presentation">
                        a role="menuitem" tabindex="-1" href="havascript:;">标题二a>
                    li>
                    li role="presentation" class="divider">li>
                    li role="presentation">
                        a role="menuitem" abindex="-1" href="javascript:;">标题三a>
                    li>
                ul>
            div>
            div class微信
分享

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。