用Bootstrap知識(shí)寫簡(jiǎn)易版Bootstrap官方網(wǎng)站首頁(yè)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BootStrap網(wǎng)站首頁(yè)</title>
        <link rel="stylesheet" type="text/css" href="js/bootstrap.css"/>
        <script type="text/javascript" src="js/jquery.min.js"></script> 
        <script type="text/javascript" src="js/bootstrap.js"></script> 
        <style type="text/css">
            body{
                text-align: center;
            }
            #nav{
                margin-bottom: 0;
            }
            #brand{
                width:100%;
                height:500px;
                margin-top:0;
                padding-top: 0;
                background-color:indigo;
            }
            #bts1{
                padding-top:90px;
                font-size:100px;
                font-weight: bold;
                color:#ffffff;
            }
            #bts2{
                padding-top:15px;
                font-size:30px;
                font-weight: bold;
                color:#ffffff;
            }
            #bts3{
                padding-top:30px;
                color:#ffffff;
            }
            #a1{
                padding-top:10px;
                width: 100%;
                height:50px;
            }
            #item{
                padding-top:90px;
                font-size:40px;
                color:#000000;
            }
            .a2{
                color:#269ABC;
                font-size:25px;
            }
            .a3{
                color:#5E5E5E;
                font-size:18px;
            }

        </style> 
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-static-top" id="nav">
            <div class="container">
                <div class="navber-header">
                    <a href="#" class="navbar-brand">Bootstrap中文網(wǎng)</a>
                </div>
                <ul class="nav navbar-nav">
                    <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="#">jQueryAPI</a></li>
                    <li><a href="#">網(wǎng)站實(shí)例<button type="button" class="btn btn-danger btn-circle btn-xs"></button></a></li>
                </ul>
                <div class="nav navbar-nav navbar-right">
                    <a href="#" class="text-info">關(guān)于</a>
                </div>
            </div>
        </nav>
        <div class="container" id="brand">
            <div id="bts1">
                Bootstrap
            </div>
            <div id="bts2">
                簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡(jiǎn)單。
            </div>
            <div id="bts3">
                <button type="button" class="btn btn-lg btn-primary">Bootstrap3中文文檔（v3.3.7）</button>
                <br/>
                <br/>
                Bootstrap2中文文檔（v2.3.2）
            </div>
        </div>
        <div class="container" id="a1">
            <p class="text-muted">
                <a href="#">Bootstrap問(wèn)答社區(qū)</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                <a href="#">新浪微博:@Bootstrap中文網(wǎng)</a>
            </p>    
        </div>
        <div class="container" >
            <span id="item">
                BootStrap相關(guān)優(yōu)質(zhì)項(xiàng)目推薦
            </span>
            <br />
            <p >這些項(xiàng)目或者是對(duì)Bootstrap進(jìn)行了有益補(bǔ)充,或者是基于Bootstrap開發(fā)的</p>
            <hr >
        </div>
        <div class="container" id="tuijian">
            <div class="row">
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_expo.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">優(yōu)站精選</a></li>
                        <li class="a3"><a href="#">Bootstrap網(wǎng)站實(shí)例</a></li>
                    </ul>
                    <p>
                        Bootstrap優(yōu)站精選頻道收集了眾多基于Bootstrap構(gòu)建、設(shè)計(jì)精美的、有創(chuàng)意的網(wǎng)站。
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_kaikeba.jpg" width="100%"/></a></li>
                        <li class="a2"><a href="#">【W(wǎng)eb全棧架構(gòu)師】</a></li>
                        <li class="a3"><a href="#">by開課吧</a></li>
                    </ul>
                    <p>
                        廖雪峰最新打磨的前端進(jìn)階課程，國(guó)內(nèi)頂級(jí)的前段內(nèi)容體系，是1-3年前端開發(fā)經(jīng)驗(yàn)的程序員學(xué)習(xí)提升的必備課程。
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_luffycity.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">7天入門Python全棧</a></li>
                        <li class="a3"><a href="#">路飛學(xué)城贊助</a></li>
                    </ul>
                    <p>
                        7天Python+實(shí)戰(zhàn)訓(xùn)練,帶你輕松入門PythonWeb全棧開發(fā)。7.25前參加可免費(fèi)獲得《Python全棧開發(fā)實(shí)戰(zhàn)》
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_webpack.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">Webpack</a></li>
                        <li class="a3"><a href="#">前端模塊化管理和打包工具</a></li>
                    </ul>
                    <p>
                        Webpack是當(dāng)下最熱門的前端資源模塊化的管理和打包工具.可將許多的松散的模塊打包成符合生產(chǎn)環(huán)境部署的前端資源。
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_bootstrap-datetimepicker.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">DateTimePicker</a></li>
                        <li class="a3"><a href="#">日期時(shí)間選擇器</a></li>
                    </ul>
                    <p>
                        Bootstrap 日期時(shí)間選擇器是一個(gè) Bootstrap 組件，能夠簡(jiǎn)化頁(yè)面上日期、時(shí)間的輸入。
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_nodejs.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">Node.js</a></li>
                        <li class="a3"><a href="#">中文文檔/手冊(cè)</a></li>
                    </ul>
                    <p>
                        TypeScript 是由微軟開源的編程語(yǔ)言。是 JS 的一個(gè)超集，本質(zhì)上向該語(yǔ)言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_yarn.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">Yarn</a></li>
                        <li class="a3"><a href="#">中文手冊(cè)</a></li>
                    </ul>
                    <p>
                        Yarn 是一個(gè)快速、可靠、安全的依賴管理工具。是 NPM 的替代品。<br /><br />
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_babeljs.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">Babel</a></li>
                        <li class="a3"><a href="#">一個(gè)JavaScript編譯器</a></li>
                    </ul>
                    <p>
                        Babel 是一個(gè) JavaScript 編譯器。Babel 通過(guò)語(yǔ)法轉(zhuǎn)換器支持最新版本的 JavaScript 語(yǔ)法。
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_react.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">React</a></li>
                        <li class="a3"><a href="#">構(gòu)建用戶界面的JS框架</a></li>
                    </ul>
                    <p>
                        React 起源于 Facebook 的內(nèi)部項(xiàng)目，是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫(kù)。<br /><br />
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_bootstrap-docs.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">BootStrap Docs</a></li>
                        <li class="a3"><a href="#">Bootstrap 文檔全集</a></li>
                    </ul>
                    <p>
                        收集了 Bootstrap 從 V1.0.0 版本到現(xiàn)在整個(gè)文檔的歷史。Bootstrap 是一個(gè)傳奇，這些文檔是傳奇的見證！
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_bootstrap-form-builder.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">Bootstrap&nbsp;Form&nbsp;Builder</a></li>
                        <li class="a3"><a href="#">在線表單構(gòu)造器</a></li>
                    </ul>
                    <p>
                        能夠以鼠標(biāo)拖拽的方式迅速生成一個(gè)基于 Bootstrap 的完整表單，減輕了各位碼農(nóng)手寫HTML代碼的勞動(dòng)。
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_bootstrap-wysiwyg.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">bootstrap-wysiwyg</a></li>
                        <li class="a3"><a href="#">為bootstrap定制可視編輯器</a></li>
                    </ul>
                    <p>
                        bootstrap-wysiwyg 是一個(gè) jQuery Bootstrap 插件可以將任何一個(gè) div 轉(zhuǎn)變成一個(gè) WYSIWYG 富文本編輯器。
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_buttons.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">Buttons</a></li>
                        <li class="a3"><a href="#">CSS按鈕樣式庫(kù)</a></li>
                    </ul>
                    <p>
                        基于 Sass 和 Compass 構(gòu)建的CSS按鈕樣式庫(kù)，圖標(biāo)采用的是Font Awesome，可和 Bootstrap 融合使用。
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_flat-ui.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">Flat&nbsp;UI</a></li>
                        <li class="a3"><a href="#">Metro風(fēng)格的Bootstrap</a></li>
                    </ul>
                    <p>
                        基于 Bootstrap 做的 Metro 化改造，F(xiàn)lat UI包含了很多Bootstrap提供的組件，但是外觀更加漂亮。在此強(qiáng)烈推薦！
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_chartjs.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">Chart.js</a></li>
                        <li class="a3"><a href="#">開源的HTML5圖表工具</a></li>
                    </ul>
                    <p>
                        Chart.js 是為設(shè)計(jì)和開發(fā)人員準(zhǔn)備的簡(jiǎn)單、靈活的 JavaScript 圖表工具。<br /><br />
                    </p>
                </div>
                <div class="col-lg-3" >
                    <ul class="nav nav-stacked">
                        <li><a href="#"><img src="img/www_assets_img_gulpjs.png" width="100%"/></a></li>
                        <li class="a2"><a href="#">gulp.js</a></li>
                        <li class="a3"><a href="#">基于流的自動(dòng)化構(gòu)建工具</a></li>
                    </ul>
                    <p>
                        gulp.js - 基于流(stream)的自動(dòng)化構(gòu)建工具。Grunt 采用配置文件的方式執(zhí)行任務(wù)，而 Gulp 一切都通過(guò)代碼實(shí)現(xiàn)。
                    </p>
                </div>
            </div>
        </div>
        <hr >
        <div class="container" >
            <div class="row">
                <div class="col-lg-6" >
                    <img src="img/www_assets_img_logo.png"/><br/>
                    <p >我們一直致力于為廣大開發(fā)者提供更多的優(yōu)質(zhì)技術(shù)文檔和輔助開發(fā)工具!</p>
                </div>  
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg-3">
                            &nbsp;&nbsp;&nbsp;關(guān)于
                            <ul class="nav nav-stacked">
                                <li><a href="#">關(guān)于我們</a></li>
                                <li><a href="#">廣告合作</a></li>
                                <li><a href="#">友情鏈接</a></li>
                                <li><a href="#">招聘</a></li>
                            </ul>
                        </div>
                        <div class="col-lg-3">
                            &nbsp;&nbsp;&nbsp;聯(lián)系方式
                            <ul class="nav nav-stacked">
                                <li><a href="#">新浪微博</a></li>
                                <li><a href="#">電子郵件</a></li>
                            </ul>
                         </div>
                         <div class="col-lg-3">
                            &nbsp;&nbsp;&nbsp;旗下網(wǎng)站
                            <ul class="nav nav-stacked">
                                <li><a href="#">Laravel中文網(wǎng)</a></li>
                                <li><a href="#">Ghost中國(guó)</a></li>
                                <li><a href="#">Bootcdn</a></li>
                                <li><a href="#">Packagist中國(guó)鏡像</a></li>
                                <li><a href="#">燃騰教育</a></li>
                            </ul>
                        </div>
                        <div class="col-lg-3">
                            &nbsp;&nbsp;&nbsp;贊助商
                            <ul class="nav nav-stacked nav-">
                                <li><a href="#">京東云</a></li>
                                <li><a href="#">又拍云</a></li>
                            </ul>
                         </div>
                    </div>
                </div>
            </div>
            <hr>
        </div>
    </body>
</html>

效果截圖:
用Bootstrap知識(shí)寫簡(jiǎn)易版Bootstrap官方網(wǎng)站首頁(yè)

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括聶榮網(wǎng)站建設(shè)、聶榮網(wǎng)站制作、聶榮網(wǎng)頁(yè)制作以及聶榮網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，聶榮網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到聶榮省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

當(dāng)前標(biāo)題：用Bootstrap知識(shí)寫簡(jiǎn)易版Bootstrap官方網(wǎng)站首頁(yè)
標(biāo)題網(wǎng)址：http://jinyejixie.com/article38/jjigsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站排名、域名注冊(cè)、品牌網(wǎng)站制作、定制開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

用Bootstrap知識(shí)寫簡(jiǎn)易版Bootstrap官方網(wǎng)站首頁(yè)