亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 35
粉絲 0
評論 0
訪問量 44235
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
仿bootcss.com首頁，使用navbar導航條, 巨幕，縮略圖等組件完成（0927）
Ray的博客
原創(chuàng)
1100人瀏覽過

1）編程: 仿bootcss.com首頁，使用navbar導航條, 巨幕，縮略圖等組件完成。

實例

<!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">
    <title>bootcss仿站</title>
</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">

  <div class="container">

    <div class="navbar-header">

      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">

        <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 hidden-sm" href="#" >Bootstrap中文網(wǎng)</a>

    </div>

    <div class="navbar-collapse collapse" role="navigation">

      <ul class="nav navbar-nav">

        <li class="hidden-sm hidden-md"><a href="#"  target="_blank" >Bootstrap2中文文檔</a></li>

        <li><a href="#" target="_blank" >Bootstrap3中文文檔</a></li>

        <li><a href="#" target="_blank" >Bootstrap4中文文檔</a></li>

        <li><a href="#" target="_blank" >Less 教程</a></li>

        <li><a href="#" target="_blank" >jQuery API</a></li>

        <li><a class="reddot" href="#" target="_blank" >網(wǎng)站實例</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right hidden-sm">

        <li><a href="/about/" >關(guān)于</a></li>

      </ul>

    </div>

  </div>

</div>


<div class="container-fluid" style="margin: 0">
    <div class="row">
        <div class="col-md-12" style="padding: 0">
            <div class="jumbotron" style="background-color: #602D4F;border-radius: 0;">
                <h1 style="font-size: 100px;color:white;font-weight: bolder" class="text-center">Bootstrap</h1>
                <h2 style="font-size: 30px;color:white;" class="text-center">簡潔、直觀、強悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡單。</h2>
                <button type="button" class="btn btn-primary btn-lg btn-shadow center-block">Bootstrap3中文文檔(v3.3.7)</button>
            	<a class="btn btn-link center-block" href="#" target="_blank" role="button" >Bootstrap2中文文檔(v2.3.2)</a>

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

<div class="bc-social" style="background-color:lightgrey;height: 50px;margin: 0">

    <div class="container">

		<div class="text-center " style="background-color:lightgrey;padding-top: 15px">

			<a href="#" title="Bootstrap問答社區(qū)" target="_blank" >

			<i class="fa fa-comments"></i> Bootstrap問答社區(qū)

			</a>

			<a>  |  </a>

			<a href="#" title="Bootstrap中文網(wǎng)官方微博" target="_blank" ></i> 新浪微博：@Bootstrap中文網(wǎng)</a>

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


<div class="container-fluid">



    <div class="text-center ">

      <h1>Bootstrap相關(guān)優(yōu)質(zhì)項目推薦</h1>

      <p>這些項目或者是對Bootstrap進行了有益的補充，或者是基于Bootstrap開發(fā)的</p>

    </div>

	<hr>

    <div class="row">


        <div class="col-sm-6 col-md-4 col-lg-3 " >

          <div class="thumbnail">

            <a href="#" title="Bootstrap 優(yōu)站精選" target="_blank" >

              <img class="lazy" src="images/4.png" width="300" height="150" alt="Bootstrap 優(yōu)站精選">

            </a>

            <div class="text-center">

              <h3>

                  <a href="#" title="Bootstrap 優(yōu)站精選" target="_blank" >優(yōu)站精選<br><small> Bootstrap 網(wǎng)站實例</small></a>

              </h3>

              <p>Bootstrap 優(yōu)站精選頻道收集了眾多基于 Bootstrap 構(gòu)建、設計精美的、有創(chuàng)意的網(wǎng)站。</p>

            </div>

          </div>

        </div>

      

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail">

            <a href="#" title="Webpack 是前端資源模塊化管理和打包工具" target="_blank" >

              <img class="lazy" src="images/6.png" width="300" height="150"  alt="Webpack 是前端資源模塊化管理和打包工具">

            </a>

            <div class="text-center">

              <h3>

                  <a href="#" title="Webpack 是前端資源模塊化管理和打包工具" target="_blank" >Webpack<br><small>是前端資源模塊化管理和打包工具</small></a>

              </h3>

              <p>Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合***環(huán)境部署的前端資源。</p>

            </div>

          </div>

        </div>

      

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail">

            <a href="#" title="React - 用于構(gòu)建用戶界面的 JavaScript 框架" target="_blank" >

              <img class="lazy" src="images/8.png" width="300" height="150"  alt="React - 用于構(gòu)建用戶界面的 JavaScript 框架">

            </a>

            <div class="text-center">

              <h3>

                  <a href="#" title="React - 用于構(gòu)建用戶界面的 JavaScript 框架" target="_blank" >React<br><small>用于構(gòu)建用戶界面的 JavaScript 框架</small></a>

              </h3>

              <p>React 起源于 Facebook 的內(nèi)部項目，是一個用于構(gòu)建用戶界面的 JavaScript 庫。</p>

            </div>

          </div>

        </div>

      

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail">

            <a href="#" title="TypeScript 中文手冊" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'typescript'])">

              <img class="lazy" src="images/10.png" width="300" height="150"  alt="TypeScript 中文手冊">

            </a>

            <div class="text-center">

              <h3>

                  <a href="#" title="TypeScript 中文手冊" target="_blank" >TypeScript <br><small>中文手冊</small></a>

              </h3>

              <p>TypeScript 是由微軟開源的編程語言。它是 JavaScript 的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?lt;/p>

            </div>

          </div>

        </div>

      

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail">

            <a href="#" title="jQuery API 中文文檔/手冊" target="_blank" >

              <img class="lazy" src="images/12.png" width="300" height="150"  alt="jQuery API 中文文檔/手冊">

            </a>

            <div class="text-center">

              <h3>

                  <a href="#" title="jQuery API 中文文檔/手冊" target="_blank" >jQuery API <br><small>中文手冊</small></a>

              </h3>

              <p>根據(jù)最新的 jQuery 1.11.x 和 2.1.x 版本翻譯的 jQuery API 中文文檔/手冊。</p>

            </div>

          </div>

        </div>

      

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail">

            <a href="#" title="w3schools 原版國內(nèi)鏡像" target="_blank" >

              <img class="lazy" src="images/14.png" width="300" height="150"  alt="w3schools 原版國內(nèi)鏡像">

            </a>

            <div class="text-center">

              <h3>

                  <a href="#" title="w3schools 原版國內(nèi)鏡像" target="_blank" >w3schools<br><small>原版國內(nèi)鏡像</small></a>

              </h3>

              <p>w3schools.com 是最受歡迎的前端技術(shù)教程網(wǎng)站，但是國內(nèi)用戶一直不能訪問，并且國內(nèi)的中文翻譯版本十分陳舊。因此做了個鏡像，希望英文好的同學直接去看原版教程吧！</p>

            </div>

          </div>

        </div>

      

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail">

            <a href="#" title="Preact - 一個只有 3kB 大小的 React 替代品，擁有與 React 相同的 API、組件和虛擬 DOM。" target="_blank" >

              <img class="lazy" src="images/16.png" width="300" height="150"  alt="Preact - 一個只有 3kB 大小的 React 替代品，擁有與 React 相同的 API、組件和虛擬 DOM。">

            </a>

            <div class="text-center">

              <h3>

                  <a href="#" title="Preact - 一個只有 3kB 大小的 React 替代品，擁有與 React 相同的 API、組件和虛擬 DOM。" target="_blank" >Preact<br><small>React 輕量替代方案。</small></a>

              </h3>

              <p>Preact - 一個只有 3kB 大小的 React 替代品，擁有與 React 相同的 API、組件和虛擬 DOM。</p>

            </div>

          </div>

        </div>

      

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail">

            <a href="#" title="Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。Node.js 使用了一個事件驅(qū)動、非阻塞式 I/O 的模型，使其輕量又高效。" target="_blank" >

              <img class="lazy" src="images/18.png" width="300" height="150"  alt="Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。Node.js 使用了一個事件驅(qū)動、非阻塞式 I/O 的模型，使其輕量又高效。">

            </a>

            <div class="text-center">

              <h3>

                  <a href="#" title="Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。Node.js 使用了一個事件驅(qū)動、非阻塞式 I/O 的模型，使其輕量又高效。" target="_blank" >Node.js<br><small>使用了一個事件驅(qū)動、非阻塞式 I/O 的模型，使其輕量又高效。</small></a>
			      
			  </h3>
            </div>

          </div>

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

<hr>


<footer class="footer ">

  <div class="container">

    <div class="row footer-top">

      <div class="col-md-6 col-lg-6">

        <h4 title="">

          <img src="images/137.png">

        </h4>

        <p>我們一直致力于為廣大開發(fā)者提供更多的優(yōu)質(zhì)技術(shù)文檔和輔助開發(fā)工具！</p>

      </div>

      <div class="col-md-6  col-lg-5 col-lg-offset-1">

        <div class="row about">

          <div class="col-sm-3">

            <h4>關(guān)于</h4>

            <ul class="list-unstyled">

              <li><a href="#" title="">關(guān)于我們</a></li>

              <li><a href="#">廣告合作</a></li>

              <li><a href="#">友情鏈接</a></li>

              <li><a href="#">招聘</a></li>

            </ul>

          </div>

          <div class="col-sm-3">

            <h4>聯(lián)系方式</h4>

            <ul class="list-unstyled">

              <li><a href="#" title="Bootstrap中文網(wǎng)官方微博" target="_blank">新浪微博</a></li>

              <li><a href="#">電子郵件</a></li>

            </ul>

          </div>

          <div class="col-sm-3">

            <h4>旗下網(wǎng)站</h4>

            <ul class="list-unstyled">

              <li><a href="#" target="_blank">Laravel中文網(wǎng)</a></li>

              <li><a href="#" target="_blank">Ghost中國</a></li>

              <li><a href="#" target="_blank">BootCDN</a></li>

              <li><a href="#" target="_blank">Packagist中國鏡像</a></li>

              <li><a href="#" target="_blank">燃騰教育</a></li>

            </ul>

          </div>

          <div class="col-sm-3">

            <h4>贊助商</h4>

            <ul class="list-unstyled">

              <li><a href="#" target="_blank">京東云</a></li>

              <li><a href="#" target="_blank">又拍云</a></li>

            </ul>

          </div>

        </div>



      </div>

    </div>

    <hr/>

    <div class="row footer-bottom">

      <ul class="list-inline text-center">

        <li><a href="#" target="_blank">京ICP備xxxxxxx號</a></li><li>京公網(wǎng)安備xxxxxxx</li>

      </ul>

    </div>

  </div>

</footer>


<script src="lib/jquery.js"></script>
<script src="lib/dist/js/bootstrap.js"></script>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

運行效果圖：

hm0927-1.png

總結(jié)：仿站第一次做，勉強做出來了，有許多細節(jié)沒仿好，細節(jié)技術(shù)沒搞懂。技術(shù)還是要磨練，要多練習！

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關(guān)注服務號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學