bootstrap组件

bootstrap组件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>bootstrap</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="../bootstrap/html5shiv.min.bootstrap"></script>
    <script src="../bootstrap/respond.min.bootstrap"></script>
    <![endif]-->
    <script src="../scripts/jquery-1.12.2.min.js" type="text/javascript"></script>
    <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<!--导航条效果-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Bootstrap</a>
            <p class="navbar-text">welcome</p>
        </div>
        <!--导航条主链接-->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="active"><a href="#" >起步</a></li>
                <li><a href="#">CSS全局样式</a></li>
                <li><a href="#">组件</a></li>
                <li><a href="#">插件</a></li>
                <li><a href="#">网站案例</a></li>
            </ul>
            <form class="navbar-form text-right">
                <input type="text" class="form-control" placeholder="Search"/>
                <button type="button" class="btn btn-primary">Search</button>
            </form>
        </div>
    </div>

</nav>
<hr/>
<div class="container">
    <p class="page-header">下拉菜单</p>
    <div class="dropdown">
        <button class="btn btn-primary" type="button"data-toggle="dropdown">
            Dropdown <span class="caret"></span>  <!--箭头-->
        </button>
        <ul class="dropdown-menu" >
            <li class="dropdown-header">分类一</li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li class="divider"></li>   <!--分隔线-->
            <li class="dropdown-header">分类二</li>
            <li><a href="#">Something else here</a></li>
            <li class="disabled"><a href="#">Separated link</a></li>
        </ul>
    </div>
    <p class="page-header">按钮组</p>
    <div class="btn-group btn-group-vertical">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
    <p class="page-header">按钮式下拉菜单</p>
    <div class="btn-group">
        <button class="btn btn-primary" type="button">
            Dropdown
        </button>
        <button class="btn btn-primary dropdown-toggle" type="button"data-toggle="dropdown">
            <span class="caret"></span>  <!--箭头-->
        </button>
        <ul class="dropdown-menu" >
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li class="divider"></li>   <!--分隔线-->
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    <p class="page-header">输入框组</p>
    <div class="input-group">
        <span class="input-group-addon">Email</span>
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button type="button" class="btn btn-primary" id="btnGo">GO</button>
        </span>
    </div>
    <script>
        $("#btnGo").click(function () {
            var email=$(this).parent().prev().val();
            alert(email);
        });
    </script>
    <!--tab-->
    <p class="page-header">tab</p>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li ><a href="#">Profile</a></li>
        <li ><a href="#">Messages</a></li>
    </ul>
    <!--面包屑导航 -->
    <p class="page-header">面包屑导航</p>
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
    </ol>
    <p class="page-header">缩略图效果</p>
    <div class="row">
        <div class="col-md-4">
            <a href="#" class="thumbnail"><img src="../img/superman.jpg"></a>
            <div class="caption">
                superman
            </div>
        </div>
        <div class="col-md-4">
            <a href="#" class="thumbnail"><img src="../img/superman.jpg"></a>
            <div class="caption">
                superman
            </div>
        </div>
        <div class="col-md-4">
            <a href="#" class="thumbnail"><img src="../img/superman.jpg"></a>
            <div class="caption">
                superman
            </div>
        </div>
    </div>
    <!--分页-->
    <div class="text-center">
        <ul class="pagination pagination-lg">
            <li>
                <a href="#">
                    <span >&laquo;</span>
                </a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#">
                    <span >&raquo;</span>
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

 

posted @ 2016-03-30 16:37  gyz418  阅读(146)  评论(0)    收藏  举报