码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap

时间:2014-06-12 18:58:06      阅读:398      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   code   java   http   

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style>
        body
        {
            padding-top: 70px;
        }
        /* Set the fixed height of the footer here */
        #footer
        {
            height: auto;
            background-color: #f5f5f5;
        }
        #header
        {
            margin-top: -20px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default  navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                        class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
                        <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</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-default">
                    Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <p class="navbar-text">
                            Welcome,Lily.</p>
                    </li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
                        <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
    </nav>
    <div id="header" class="jumbotron hidden-xs">
        <div class="container">
            <h1>
                Hello, world!</h1>
            <p>
                This is a simple hero unit, a simple jumbotron-style component for calling extra
                attention to featured content or information.</p>
            <p>
                <a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class=" hidden-print " role="complementary">
                    <ul class="nav ">
                        <li class="active"><a href="#download">下载Bootstrap</a>
                            <ul class="nav">
                                <li class=""><a href="#download-compiled">编译后的CSS、JS和字体文件</a></li>
                                <li class=""><a href="#download-additional">额外的下载渠道</a></li>
                                <li class=""><a href="#download-cdn">Bootstrap CDN</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#whats-included">包含了哪些文件</a>
                            <ul class="nav">
                                <li class=""><a href="#whats-included-precompiled">编译版</a></li>
                                <li class=""><a href="#whats-included-source">源码</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9" role="main">
                <!-- Getting started
                    ================================================== -->
                <div>
                    <h1>
                        h1. Bootstrap heading</h1>
                    <p>
                        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
                        et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh
                        ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes,
                        nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis
                        mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem
                        nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam
                        eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida
                        at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
                        eget lacinia odio sem nec elit.
                    </p>
                    <p class="text-muted">
                        Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                    <p class="text-primary">
                        Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p class="text-success">
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                    <p class="text-info">
                        Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                    <p class="text-warning">
                        Etiam porta sem malesuada magna mollis euismod.</p>
                    <p class="text-danger">
                        Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>
                                    #
                                </th>
                                <th>
                                    First Name
                                </th>
                                <th>
                                    Last Name
                                </th>
                                <th>
                                    Username
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    1
                                </td>
                                <td>
                                    Mark
                                </td>
                                <td>
                                    Otto
                                </td>
                                <td>
                                    @@mdo
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    2
                                </td>
                                <td>
                                    Jacob
                                </td>
                                <td>
                                    Thornton
                                </td>
                                <td>
                                    @@fat
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    3
                                </td>
                                <td colspan="2">
                                    Larry the Bird
                                </td>
                                <td>
                                    @@twitter
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">
                            Email address</label>
                        <input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">
                            Password</label>
                        <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputFile">
                            File input</label>
                        <input id="exampleInputFile" type="file">
                        <p class="help-block">
                            Example block-level help text here.</p>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            Check me out
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default">
                        Submit</button>
                    </form>
                    @RenderBody()
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="container">
            <p class="text-muted">
                Designed and built with all the love in the world by <a href="http://twitter.com/mdo"
                    target="_blank">@@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@@fat</a>.</p>
            <p>
                Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">
                    Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">
                        CC BY 3.0</a>.</p>
            <p>
                Bootstrap中文文档版权归<a href="http://www.bootcss.com/">Bootstrap中文网</a>及<a href="mailto:wangsai@bootcss.com">译者</a>所有。</p>
            <p>
            </p>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
</body>
</html>

bootstrap,布布扣,bubuko.com

bootstrap

标签:des   style   class   code   java   http   

原文地址:http://www.cnblogs.com/jes_shaw/p/3781733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!