Blogger Information
Blog 38
fans 0
comment 0
visits 30571
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿bootstrap中文网首页——2018年10月2日
图图的博客
Original
825 people have browsed it

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
    <script src="../lib/jquery.js"></script>
    <script src="../lib/dist/js/bootstrap.js"></script>
    <title>Bootstrap中文网</title>
    <link rel="shortcut icon" href="favicon.png">

</head>
<body>
<div class="container-fluid"style="padding: 0;margin: 0 ;">
<div class="row">
    <div class="col-md-12">
        <nav style="border-radius: 0 ;margin: 0;padding: 0;" class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid" >
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header"style="padding: 0 0px 0 100px">
                    <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="#">Bootstrap中文网</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" style="color: #333">
                        <li><a href="#">Bootstrap2中文文档</a></li>
                        <li><a href="#">Bootstrap3中文文档</a></li>
                        <li><a href="#">Bootstrap4中文文档</a></li>
                        <li><a href="#">Less 教程</a></li>
                        <li><a href="#">jQuery API</a></li>
                        <li><a href="#">网站实例</a></li>

                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li style="padding:0 100px 0px 0  "><a href="#">关于</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>


        <div class="jumbotron" style="border-radius:0;background-color: #602D4F;margin-bottom: 0">
            <h1 style="font-size: 100px;color: white;font-weight: bold"class="text-center">Bootstrap</h1>
            <p style="font-size: 30px;color: white" class="text-center">简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。</p>
            <p class="text-center" ><a class="btn btn-primary btn-lg " href="#" role="button">Bootstrap3中文文档(v3.3.7)</a></p>
            <p class="text-center" style="font-size: 14px;"><a href=""style="color: #aaa">Bootstrap2中文文档(v2.3.2)</a></p>
        </div>
        <div style="background-color: #f5f5f5;height: 54px;margin: 0;padding: 0">
            <div class="row">
                <div class="col-md-6" style="padding: 0">
                    <p style="text-align: right;color: #555;line-height: 54px">Bootstrap问答社区 | </p>
                </div>

                <div class="col-md-6" style="padding: 0">
                    <p style="text-align: left;color: #555;line-height: 54px">  新浪微博:@Bootstrap中文网</p>
                </div>
            </div>

        </div>
</div>



</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="page-header text-center" >
            <h2 style="font-size: 42px">Bootstrap相关优质项目推荐</h2>
            <p>这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap开发的</p>
        </div>
    </div>

</div>


</div>
<div class="container" >
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3 text-center">
                <div class="thumbnail" style="height: 352px;">
                    <a href=""><img src="1.png" alt="..."></a>
                    <div class="caption" >
                        <a href="" style="text-decoration: none;">
                            <h3 style="color: #337ab7;font-size: 24px">优站精选</h3>

                            <small style="color: #777;font-size: 16px;"> Bootstrap 网站实例</small>
                        </a>

                        <br>
                        <br>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>

                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 text-center">
                <div class="thumbnail" style="height: 352px;">
                    <img src="2.png" alt="...">
                    <div class="caption">
                        <a href="" style="text-decoration: none;">
                            <h3 style="color: #337ab7;font-size: 24px">Webpack</h3>
                            <small style="color: #777;font-size: 16px;">是前端资源模块化管理和打包工具</small>

                        </a>
                        <br>
                        <br>
                        <p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合***环境部署的前端资源。</p>

                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 text-center">
                <div class="thumbnail" style="height: 352px;">
                    <a href=""><img src="3.png" alt="..."></a>
                    <div class="caption">
                        <a href="" style="text-decoration: none;">
                            <h3 style="color: #337ab7;font-size: 24px">React</h3>

                            <small style="color: #777;font-size: 16px;">用于构建用户界面的 JavaScript 框架</small>

                        </a>
                        <br>
                        <br>
                        <p>React 起源于 Facebook 的内部项目,是一个用于构建用户界面的 JavaScript 库。</p>

                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 text-center">
                <div class="thumbnail" style="height: 352px;">
                    <img src="4.png" alt="...">
                    <div class="caption">
                        <a href="" style="text-decoration: none;">
                            <h3 style="color: #337ab7;font-size: 24px">TypeScript </h3>
                            <small style="color: #777;font-size: 16px;">中文手册</small>

                        </a>
                        <br>
                        <br>
                        <p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>

                    </div>
                </div>
            </div>
        </div>

</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments