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

Bootstrap--模仿官网写一个页面

时间：2015-05-27 22:28:33      阅读：132      评论：0      收藏：0      [点我收藏+]

标签：

本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统、常用CSS样、Javascript插件和部分组件。

以下html代码可以直接复制本地运行：

BootstrapPage1:常见的一种页面类型，页面导航，左侧分类、右侧新闻列表：

技术分享 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>

    <!-- 这个属性主要是设置浏览器优先使用什么模式来渲染页面的-->
    <!-- #下面的meta标签告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>


    <!--移动设备都是这Viewport里面打开，width=device-width表示打开页面默认和设备一致，initial-scale=1表示页面不进行缩放   -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet"/>-->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" />

    <!--低版本浏览器如果支持HTML5需要添加以下js-->
    <!-- HTML5 shim and Respond.js for 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.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss .com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- --导航条  默认高度50px, 反色（黑色） 固定在顶部 -->
    <nav class="navbar navbar-inverse .navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!--当浏览器宽度变窄的时候会显示这个Button按钮，并且会把data-target中的div中ul收缩导航到Button下方-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <!--定义小按钮的样式-->
                    <span class="sr-only">Toggle navigation</span>
                    <!-- 页面变窄时 ， 按钮的3条横线 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--Logo位置-->
                <a class="navbar-brand" href="#">橙子的博客</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="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">.NET</a></li>
                    <li><a href="#">PS</a></li>
                    <li><a href="#">AE</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">.NET学习资料<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">C#入门经典</a></li>
                            <li><a href="#">ASP.NET 原理</a></li>
                            <li><a href="#">ASP.NET 实例</a></li>
                            <li class="divider"></li>
                            <li><a href="#">C#高级</a></li>
                            <li class="divider"></li>
                            <li><a href="#">ASP.NET MVC</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">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Git Fork</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">联系我们 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">地址</a></li>
                            <li><a href="#">电话</a></li>
                            <li><a href="#">邮箱</a></li>
                            <li class="divider"></li>
                            <li><a href="#">微信</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!--------栅格系统， 全局CSS样式-栅格系统  -------->

    <!--栅格系统放在container容器中-->
    <div class="container" style="margin-top: -15px">
        <!--添加一行占用12列，添加img-->
        <div class="row">
            <div class="col-sm-12">
                <img src="http://c.s-microsoft.com/zh-cn/CMSImages/ThemisLaunch_FamilyLabeledBG_1600x560_ZH_CN.jpg?version=ebc4725d-6c92-54d9-dcb0-cd5a9820b54b" style="width: 1180px; height: 390px" />
            </div>
        </div>


        <!--页面分为左右两部分 4：8-->
        <div class="row" style="margin-top: 5px">
            <div class="col-sm-4">
                <!--添加列表组件-->
                <div class="list-group">
                    <a href="#" class="list-group-item active">关注关注>关注关注>关注关注
                    </a>
                    <a href="#" class="list-group-item">新闻新闻新闻新闻新闻新闻</a>
                    <a href="#" class="list-group-item">精华精华精华精华精华精华</a>
                    <a href="#" class="list-group-item">我评我评我评我评我评我评</a>
                    <a href="#" class="list-group-item">我赞我赞我赞我赞我赞我赞</a>
                </div>
            </div>
            <div class="col-sm-8">


                <table class="table table-bordered table-striped table-hover table-condensed">
                    <tr class="active">
                        <td>activeactiveactiveactiveactiveactiveactive</td>
                    </tr>
                    <tr class="success">

                        <td>successsuccesssuccesssuccesssuccesssuccess</td>
                    </tr>
                    <tr class="warning">
                        <td>warningwarningwarningwarningwarningwarning</td>
                    </tr>
                    <tr class="danger">
                        <td>dangerdangerdangerdangerdangerdangerdanger</td>
                    </tr>
                    <tr class="info">
                        <td>infoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfo</td>
                    </tr>
                    <tr class="active">
                        <td>微软再放大招，Win10后续功能更新免费</td>
                    </tr>
                    <tr class="success">
                        <td>官方确认，Cortana将登陆iOS和Android平台</td>
                    </tr>
                    <tr class="danger">
                        <td>Microsoft Edge中新的F12开发者工具</td>
                    </tr>
                    <tr class="info">
                        <td>Microsoft Edge体验：微软对浏览器的重新思考</td>
                    </tr>
                    <tr class="success">
                        <td>Microsoft Azure位居Nasuni存储基准测试之首</td>
                    </tr>

                </table>

                <!-- 添加分页效果-->
                <nav>
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><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="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>

    </div>




    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <!-- Bootstrap核心js依赖于jQuery,所以要先引用jQuery-->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
View Code

BootstrapPage2:导航、轮播以及页签 进度条

技术分享 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />

    <!-- 这个属性主要是设置浏览器优先使用什么模式来渲染页面的-->
    <!-- #下面的meta标签告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />


    <!--移动设备都是这Viewport里面打开，width=device-width表示打开页面默认和设备一致，initial-scale=1表示页面不进行缩放   -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet" />-->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" />

    <!--低版本浏览器如果支持HTML5需要添加以下js-->
    <!-- HTML5 shim and Respond.js for 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.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss .com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- --导航条  默认高度50px, 反色（黑色） 固定在顶部 -->
    <nav class="navbar navbar-inverse .navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!--当浏览器宽度变窄的时候会显示这个Button按钮，并且会把data-target中的div中ul收缩导航到Button下方-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <!--定义小按钮的样式-->
                    <span class="sr-only">Toggle navigation</span>
                    <!-- 页面变窄时 ， 按钮的3条横线 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--Logo位置-->
                <a class="navbar-brand" href="#">橙子的博客</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="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">.NET</a></li>
                    <li><a href="#">PS</a></li>
                    <li><a href="#">AE</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">.NET学习资料<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">C#入门经典</a></li>
                            <li><a href="#">ASP.NET 原理</a></li>
                            <li><a href="#">ASP.NET 实例</a></li>
                            <li class="divider"></li>
                            <li><a href="#">C#高级</a></li>
                            <li class="divider"></li>
                            <li><a href="#">ASP.NET MVC</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">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Git Fork</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">联系我们 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">地址</a></li>
                            <li><a href="#">电话</a></li>
                            <li><a href="#">邮箱</a></li>
                            <li class="divider"></li>
                            <li><a href="#">微信</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>


    <!--javascript插件，添加carousel轮播图-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: -20px">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://c.s-microsoft.com/zh-cn/CMSImages/ThemisLaunch_FamilyLabeledBG_1600x560_ZH_CN.jpg?version=ebc4725d-6c92-54d9-dcb0-cd5a9820b54b" />
                <div class="carousel-caption">
                    <h2>Surface Pro 3</h2>

                </div>
            </div>
            <div class="item">
                <img src="http://c.s-microsoft.com/zh-cn/CMSImages/Ofc365_Evergreen2_0303_1600x560_EN_US.png?version=9a48efc1-14bf-bee9-5a17-f1f53e754385" />
                <div class="carousel-caption">
                    <h2>橙子在上海</h2>

                </div>
            </div>
            <div class="item">
                <img src="http://c.s-microsoft.com/zh-cn/CMSImages/ThemisLaunch_FamilyLabeledBG_1600x560_ZH_CN.jpg?version=ebc4725d-6c92-54d9-dcb0-cd5a9820b54b" />
                <div class="carousel-caption">
                    <h2>Hello World</h2>

                </div>
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!--CSS样式图片、 组件按钮组-->
    <!--一行分为3份，其中添加按钮和图片-->
    <div class="row">

        <div class="col-sm-4" style="text-align: center">
            <!--设置图片样式，圆角-->
            <img src="http://i.webapps.microsoft.com/r/image/view/-/4686392/respLFixed/3/-/535-dsim-cyan-png.png" class="img-rounded" />
            <h3>Lumia-535</h3>
            <p>微软 Lumia 535 双卡双待手机,最新 Windows Phone 8.1 升级版智能操作系统，更流畅，安全，高效的体验</p>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">详细</button>
                <button type="button" class="btn btn-default btn-success">购买</button>

            </div>
        </div>
        <div class="col-sm-4">
            <img src="http://i.webapps.microsoft.com/r/image/view/-/5693236/respLFixed/3/-/Lumia-640-XL-lte-DSIM-orange-catalogue-png.png" class="img-rounded" />
            <h3>Lumia-640</h3>
            <p>
                微软 Lumia 640 双网双卡双4G手机,内置原装Office应用套装， 随时OneDrive同步存取Office文件，随身编辑更具效率
            </p>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">详细</button>
                <button type="button" class="btn btn-default btn-success">购买</button>

            </div>
        </div>
        <div class="col-sm-4">
            <img src="http://i.webapps.microsoft.com/r/image/view/-/4669442/respLFixed/1/-/830-green-png.png" class="img-rounded " />
            <h3>Lumia-830</h3>
            <p>诺基亚 Lumia 830,第一款内置Cortana的Lumia手机，专属你的个人智能助理</p>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">详细</button>
                <button type="button" class="btn btn-default btn-success">购买</button>
            </div>
        </div>

        <!--添加标签页-->
        <div role="tabpanel">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Lumia-535</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Lumia-640</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Lumia-830</a></li>

            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <!--添加文字和图片介绍-->
                      <div class="row">
                        <div class="col-sm-7">微软 Lumia 535 双卡双待手机,最新 Windows Phone 8.1 升级版智能操作系统，更流畅，安全，高效的体验</div>
                        <div class="col-sm-5">
                            <img src="http://i.webapps.microsoft.com/r/image/view/-/5693236/respLFixed/3/-/Lumia-640-XL-lte-DSIM-orange-catalogue-png.png" class="img-rounded" />
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    <!--添加文字和图片介绍-->
                    <div class="row">
                        <div class="col-sm-7">微软 Lumia 640 双网双卡双4G手机,内置原装Office应用套装， 随时OneDrive同步存取Office文件，随身编辑更具效率</div>
                        <div class="col-sm-5">
                            <img src="http://i.webapps.microsoft.com/r/image/view/-/5693236/respLFixed/3/-/Lumia-640-XL-lte-DSIM-orange-catalogue-png.png" class="img-rounded" />
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="messages">
                    <!--添加文字和图片介绍-->
                    <div class="row">
                        <div class="col-sm-7">诺基亚 Lumia 830,第一款内置Cortana的Lumia手机，专属你的个人智能助理</div>
                        <div class="col-sm-5">
                            <img src="http://i.webapps.microsoft.com/r/image/view/-/4669442/respLFixed/1/-/830-green-png.png" class="img-rounded " />
                        </div>
                    </div>
                </div>

            </div>
    </div>

    </div>


    <br />
    <br />
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            60%
 
        </div>
    </div>

    <br />
    <br />
    <br />
    <br />




    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <!-- Bootstrap核心js依赖于jQuery,所以要先引用jQuery-->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- <script src="js/bootstrap.min.js"></script>-->

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
View Code

-------------------------------------------------------------------------------------------------------------------------------------

1，Bootstrap是开源的前端开发工具包。是一个HTML/JavaScript/CSS框架，包含了丰富的Web组件（下拉菜单、导航条、进度条...）。

2，Bootstrap优势： ①支持响应式开发 ， 让网站可以兼容多种不同分辨率设备，给用户更好的视觉体验

　　　　　　　　　　②丰富的而组件，按钮、表单、导航、下拉菜单、按钮组 等

　　　　　　　　　　③页面简洁美观，很简单的写出漂亮的页面

3，Bootstrap基础模板页面解读：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">

     <!-- 这个属性主要是设置浏览器优先使用什么模式来渲染页面的-->
     <!-- #下面的meta标签告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!--移动设备都是这Viewport里面打开，width=device-width表示打开页面默认和设备一致，initial-scale=1表示页面不进行缩放   -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

      <!--低版本浏览器如果支持HTML5需要添加以下js-->
    <!-- HTML5 shim and Respond.js for 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.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <!-- Bootstrap核心js依赖于jQuery,所以要先引用jQuery-->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

4，新建项目，把下载的Bootstrap包放入项目中。 新建HTML页面，复制模板页。学习Bootstrap怎么使用

　　A, 页面中添加导航条。 Bootcss.com网站中  起步--组件--导航条 ，我们Copy代码 并作修改（实例代码中有英文注释可以帮助我们了解代码功能）

<!-- --导航条  默认高度50px, 反色（黑色） 固定在顶部 -->
    <nav class="navbar navbar-inverse .navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!--当浏览器宽度变窄的时候会显示这个Button按钮，并且会把data-target中的div中ul收缩导航到Button下方-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <!--定义小按钮的样式-->
                    <span class="sr-only">Toggle navigation</span>
                    <!-- 页面变窄时 ， 按钮的3条横线 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--Logo位置-->
                <a class="navbar-brand" href="#">橙子的博客</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="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">.NET</a></li>
                    <li><a href="#">PS</a></li>
                    <li><a href="#">AE</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">.NET学习资料<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">C#入门经典</a></li>
                            <li><a href="#">ASP.NET 原理</a></li>
                            <li><a href="#">ASP.NET 实例</a></li>
                            <li class="divider"></li>
                            <li><a href="#">C#高级</a></li>
                            <li class="divider"></li>
                            <li><a href="#">ASP.NET MVC</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">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Git Fork</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">联系我们 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">地址</a></li>
                            <li><a href="#">电话</a></li>
                            <li><a href="#">邮箱</a></li>
                            <li class="divider"></li>
                            <li><a href="#">微信</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

　　　　B,导航下方添加一张图片，并设置图片的长宽

 <!--栅格系统放在container容器中-->
    <div class="container" style="margin-top: -15px">
        <!--添加一行占用12列，添加img-->
        <div class="row">
            <div class="col-sm-12">
                <img src="images/2.png" style="width: 1180px; height: 390px" />
            </div>
        </div>
     </div>

　　　　C, 图片下方添加一行，分为左右两部分4:8：左侧位分类导航(用列表组件)、右边为详细列表(表格)

<!--栅格系统放在container容器中-->
    <div class="container" style="margin-top: -15px">
        <!--添加一行占用12列，添加img-->
        <div class="row">
            <div class="col-sm-12">
                <img src="images/2.png" style="width: 1180px; height: 390px" />
            </div>
        </div>


        <!--页面分为左右两部分 4：8-->
        <div class="row" style="margin-top: 5px">
            <div class="col-sm-4">
                <!--添加列表组件-->
                <div class="list-group">
                    <a href="#" class="list-group-item active">关注关注>关注关注>关注关注
                    </a>
                    <a href="#" class="list-group-item">新闻新闻新闻新闻新闻新闻</a>
                    <a href="#" class="list-group-item">精华精华精华精华精华精华</a>
                    <a href="#" class="list-group-item">我评我评我评我评我评我评</a>
                    <a href="#" class="list-group-item">我赞我赞我赞我赞我赞我赞</a>
                </div>
            </div>
            <div class="col-sm-8">


                <table class="table table-bordered table-striped table-hover table-condensed">
                    <tr class="active">
                        <td>activeactiveactiveactiveactiveactiveactive</td>
                    </tr>
                    <tr class="success">

                        <td>successsuccesssuccesssuccesssuccesssuccess</td>
                    </tr>
                    <tr class="warning">
                        <td>warningwarningwarningwarningwarningwarning</td>
                    </tr>
                    <tr class="danger">
                        <td>dangerdangerdangerdangerdangerdangerdanger</td>
                    </tr>
                    <tr class="info">
                        <td>infoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfo</td>
                    </tr>
                    <tr class="active">
                        <td>微软再放大招，Win10后续功能更新免费</td>
                    </tr>
                    <tr class="success">
                        <td>官方确认，Cortana将登陆iOS和Android平台</td>
                    </tr>
                    <tr class="danger">
                        <td>Microsoft Edge中新的F12开发者工具</td>
                    </tr>
                    <tr class="info">
                        <td>Microsoft Edge体验：微软对浏览器的重新思考</td>
                    </tr>
                    <tr class="success">
                        <td>Microsoft Azure位居Nasuni存储基准测试之首</td>
                    </tr>

                </table>

            </div>
        </div>

    </div>

 　　　　4,BootstrapPage1.html页面完整代码。 这个页面在Bootstrap的基础上添加了导航、使用了栅格系统、表格、列表组件、标签

技术分享 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>

    <!-- 这个属性主要是设置浏览器优先使用什么模式来渲染页面的-->
    <!-- #下面的meta标签告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>


    <!--移动设备都是这Viewport里面打开，width=device-width表示打开页面默认和设备一致，initial-scale=1表示页面不进行缩放   -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>

    <!--低版本浏览器如果支持HTML5需要添加以下js-->
    <!-- HTML5 shim and Respond.js for 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.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss .com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- --导航条  默认高度50px, 反色（黑色） 固定在顶部 -->
    <nav class="navbar navbar-inverse .navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!--当浏览器宽度变窄的时候会显示这个Button按钮，并且会把data-target中的div中ul收缩导航到Button下方-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <!--定义小按钮的样式-->
                    <span class="sr-only">Toggle navigation</span>
                    <!-- 页面变窄时 ， 按钮的3条横线 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--Logo位置-->
                <a class="navbar-brand" href="#">橙子的博客</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="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">.NET</a></li>
                    <li><a href="#">PS</a></li>
                    <li><a href="#">AE</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">.NET学习资料<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">C#入门经典</a></li>
                            <li><a href="#">ASP.NET 原理</a></li>
                            <li><a href="#">ASP.NET 实例</a></li>
                            <li class="divider"></li>
                            <li><a href="#">C#高级</a></li>
                            <li class="divider"></li>
                            <li><a href="#">ASP.NET MVC</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">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Git Fork</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">联系我们 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">地址</a></li>
                            <li><a href="#">电话</a></li>
                            <li><a href="#">邮箱</a></li>
                            <li class="divider"></li>
                            <li><a href="#">微信</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!--------栅格系统， 全局CSS样式-栅格系统  -------->

    <!--栅格系统放在container容器中-->
    <div class="container" style="margin-top: -15px">
        <!--添加一行占用12列，添加img-->
        <div class="row">
            <div class="col-sm-12">
                <img src="images/2.png" style="width: 1180px; height: 390px" />
            </div>
        </div>


        <!--页面分为左右两部分 4：8-->
        <div class="row" style="margin-top: 5px">
            <div class="col-sm-4">
                <!--添加列表组件-->
                <div class="list-group">
                    <a href="#" class="list-group-item active">关注关注>关注关注>关注关注
                    </a>
                    <a href="#" class="list-group-item">新闻新闻新闻新闻新闻新闻</a>
                    <a href="#" class="list-group-item">精华精华精华精华精华精华</a>
                    <a href="#" class="list-group-item">我评我评我评我评我评我评</a>
                    <a href="#" class="list-group-item">我赞我赞我赞我赞我赞我赞</a>
                </div>
            </div>
            <div class="col-sm-8">


                <table class="table table-bordered table-striped table-hover table-condensed">
                    <tr class="active">
                        <td>activeactiveactiveactiveactiveactiveactive</td>
                    </tr>
                    <tr class="success">

                        <td>successsuccesssuccesssuccesssuccesssuccess</td>
                    </tr>
                    <tr class="warning">
                        <td>warningwarningwarningwarningwarningwarning</td>
                    </tr>
                    <tr class="danger">
                        <td>dangerdangerdangerdangerdangerdangerdanger</td>
                    </tr>
                    <tr class="info">
                        <td>infoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfo</td>
                    </tr>
                    <tr class="active">
                        <td>微软再放大招，Win10后续功能更新免费</td>
                    </tr>
                    <tr class="success">
                        <td>官方确认，Cortana将登陆iOS和Android平台</td>
                    </tr>
                    <tr class="danger">
                        <td>Microsoft Edge中新的F12开发者工具</td>
                    </tr>
                    <tr class="info">
                        <td>Microsoft Edge体验：微软对浏览器的重新思考</td>
                    </tr>
                    <tr class="success">
                        <td>Microsoft Azure位居Nasuni存储基准测试之首</td>
                    </tr>

                </table>

                <!-- 添加分页效果-->
                <nav>
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><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="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>

    </div>




    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <!-- Bootstrap核心js依赖于jQuery,所以要先引用jQuery-->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
View Code

5 , 再添加一个页面，看看其他一些组件、css样式的效果以及用法

　　A, 新建页面，导入基本页面并Copy上个页面中的导航，添加 Javastript插件-轮播组件Carousel

 <!--javascript插件，添加carousel轮播图-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: -20px">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/1.jpg" />
                <div class="carousel-caption">
                    <h2>Surface Pro 3</h2>

                </div>
            </div>
            <div class="item">
                <img src="images/2.png" />
                <div class="carousel-caption">
                    <h2>橙子在上海</h2>

                </div>
            </div>
            <div class="item">
                <img src="images/1.jpg" />
                <div class="carousel-caption">
                    <h2>Hello World</h2>

                </div>
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

　　　　B, Container中的 div row分为3份，col-sm-4 ;每一份中添加 图片和按钮，更改不同的class属性看一下效果：

 <!--CSS样式图片、 组件按钮组-->
    <!--一行分为3份，其中添加按钮和图片-->
    <div class="row">

        <div class="col-sm-4" style="text-align: center">
            <!--设置图片样式，圆角-->
            <img src="http://i.webapps.microsoft.com/r/image/view/-/4686392/respLFixed/3/-/535-dsim-cyan-png.png" class="img-rounded" />
            <h3>Lumia-535</h3>
            <p>微软 Lumia 535 双卡双待手机,最新 Windows Phone 8.1 升级版智能操作系统，更流畅，安全，高效的体验</p>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">详细</button>
                <button type="button" class="btn btn-default btn-success">购买</button>

            </div>
        </div>
        <div class="col-sm-4">
            <img src="http://i.webapps.microsoft.com/r/image/view/-/5693236/respLFixed/3/-/Lumia-640-XL-lte-DSIM-orange-catalogue-png.png" class="img-rounded" />
            <h3>Lumia-640</h3>
            <p>
                微软 Lumia 640 双网双卡双4G手机,内置原装Office应用套装， 随时OneDrive同步存取Office文件，随身编辑更具效率
            </p>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">详细</button>
                <button type="button" class="btn btn-default btn-success">购买</button>

            </div>
        </div>
        <div class="col-sm-4">
            <img src="http://i.webapps.microsoft.com/r/image/view/-/4669442/respLFixed/1/-/830-green-png.png" class="img-rounded " />
            <h3>Lumia-830</h3>
            <p>诺基亚 Lumia 830,第一款内置Cortana的Lumia手机，专属你的个人智能助理</p>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">详细</button>
                <button type="button" class="btn btn-default btn-success">购买</button>
            </div>
        </div>

    </div>

 　　　　C, 添加Javascript插件中的标签页：

  <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <!--添加文字和图片介绍-->
                      <div class="row">
                        <div class="col-sm-7">微软 Lumia 535 双卡双待手机,最新 Windows Phone 8.1 升级版智能操作系统，更流畅，安全，高效的体验</div>
                        <div class="col-sm-5">
                            <img src="http://i.webapps.microsoft.com/r/image/view/-/5693236/respLFixed/3/-/Lumia-640-XL-lte-DSIM-orange-catalogue-png.png" class="img-rounded" />
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    <!--添加文字和图片介绍-->
                    <div class="row">
                        <div class="col-sm-7">微软 Lumia 640 双网双卡双4G手机,内置原装Office应用套装， 随时OneDrive同步存取Office文件，随身编辑更具效率</div>
                        <div class="col-sm-5">
                            <img src="http://i.webapps.microsoft.com/r/image/view/-/5693236/respLFixed/3/-/Lumia-640-XL-lte-DSIM-orange-catalogue-png.png" class="img-rounded" />
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="messages">
                    <!--添加文字和图片介绍-->
                    <div class="row">
                        <div class="col-sm-7">诺基亚 Lumia 830,第一款内置Cortana的Lumia手机，专属你的个人智能助理</div>
                        <div class="col-sm-5">
                            <img src="http://i.webapps.microsoft.com/r/image/view/-/4669442/respLFixed/1/-/830-green-png.png" class="img-rounded " />
                        </div>
                    </div>
                </div>

            </div>

　　　　　　D, 添加导航条效果：

 <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            60%
 
        </div>
    </div>

 

 以上是Bootstrap的一些应用，我们可以参考官网实例代码以及代码对应的功能介绍，或者代码放到html页面中调试效果。

 

Bootstrap--模仿官网写一个页面

标签：

原文地址：http://www.cnblogs.com/chengzish/p/4531383.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！