使用BootStrap進行響應式佈局案例

乞力馬紮羅的雪CYF發表於2015-09-29
boot

（1）首先下載BootStrap,把bootstrap.min.css拷貝到專案中。

（2）新建style.css,實現程式碼如下：

.row{

    margin-bottom: 20px;


}

.row .row{

    margin-top: 10px;
    margin-bottom: 0px;

}

[class*="col-"]{
    padding-top: 15px;
    padding-bottom: 15px;
    /*background-color: #eee;*/
    /*background-color: rgba(86,61,124,.15);*/
    /*border: 1px solid #dddddd;*/
    /*border: 1px solid rgba(86, 61, 214,.2);*/

}

（3）新建index.html檔案，實現程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" type="text/css" rel="stylesheet">

    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<!--<div>-->

    <!--導航欄-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="#">Project name</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-success">Sign in</button>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

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

        <div class="container">
            <h1>Hello, world!</h1>

            <p>This is a template for a simple marketing or informational website. It includes a large callout called a
                jumbotron and three supporting pieces of content. Use it as a starting point to create something more
                unique.</p>

            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
        </div>
    </div>


    <!--三列-->
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h2>Heading</h2>

                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                    mollis euismod. Donec sed odio dui.</p>
                <input class="btn btn-default" type="button" value="View details »">
            </div>

            <div class="col-md-4">
                <h2>Heading</h2>

                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                    mollis euismod. Donec sed odio dui.</p>
                <input class="btn btn-default" type="button" value="View details  »">
            </div>

            <div class="col-md-4">
                <h2>Heading</h2>

                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
                    mollis euismod. Donec sed odio dui.</p>
                <input class="btn btn-default" type="button" value="View details  »">
            </div>
        </div>
    </div>

    <!--頁尾-->
    <!--注意：<hr>是分割線-->

    <div class="container">
        <hr>
        <footer>© Company 2014</footer>
    </div>

    </body>
</html>

（4）最後的實現效果如下：這是模仿BootStrap中的某一個模板設計出來的。可見BootStrap使用起來非常方便。

。


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章