基于Boostrap進行網(wǎng)頁設計

1. 實驗準備

2. 實驗內(nèi)容

  • 設計MOCOM實驗室的主頁，有實驗室介紹盔腔、科研信息展示等杠茬；

3.實驗環(huán)境

  • JetBrains WebStorm 2018.3.5 x64 ： html+css，bootstrap;

4.實驗步驟

Bootstrap 是全球最受歡迎的前端組件庫弛随，用于開發(fā)響應式布局瓢喉、移動設備優(yōu)先的 WEB 項目。
Bootstrap4 目前是 Bootstrap 的最新版本舀透，是一套用于 HTML栓票、CSS 和 JS 開發(fā)的開源工具集。利用我們提供的 Sass 變量和大量 mixin愕够、響應式柵格系統(tǒng)走贪、可擴展的預制組件、基于 jQuery 的強大的插件系統(tǒng)惑芭，能夠快速為你的想法開發(fā)出原型或者構(gòu)建整個 app 坠狡。

1、導航欄

導航欄一般放在頁面的頂部强衡。
我們可以使用 .navbar 類來創(chuàng)建一個標準的導航欄擦秽，后面緊跟: .navbar-expand-xl|lg|md|sm 類來創(chuàng)建響應式的導航欄 (大屏幕水平鋪開，小屏幕垂直堆疊)漩勤。
導航欄上的選項可以使用 <ul> 元素并添加 class="navbar-nav" 類感挥； 然后在 <li> 元素上添加 .nav-item 類， <a> 元素上使用 .nav-link 類越败；
導航欄可以固定在頭部或者底部触幼，我們使用 .fixed-top 類來實現(xiàn)導航欄的固定：

<nav class="navbar navbar-expand-sm bg-white navbar-light fixed-top">
    <a class="navbar-brand" href="#"><img src="images/logo.png" height=40" alt="logo"/></a>
    <ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="#home">主頁</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#introduce">實驗室介紹</a>
    </li>
        <li class="nav-item">
            <a class="nav-link" href="#science">科研展示</a>
        </li>
    </ul>
    <form class="form-inline">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-info" type="button">Search</button>
    </form>
    <a href="#" class="denglu btn btn-info" role="button">登錄</a>
    <a href="#" class="zhuce btn btn-info" role="button">注冊</a>
</nav>

設置導航欄品牌/logo:
.navbar-brand 類用于高亮顯示品牌/Logo;
如果使用圖片，可以使用 .navbar-brand 類來設置圖片自適應導航欄

<a class="navbar-brand" href="#"><img src="images/logo.png" height=40" alt="logo"/></a>

導航欄.png

導航欄的表單 <form> 元素使用 class="form-inline" 類來排版輸入框與按鈕：

<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-info" type="button">Search</button>
</form>

導航欄表單.png
2究飞、按鈕

Bootstrap 4 提供了不同樣式的按鈕置谦。

<div class="container">

<h2>按鈕樣式</h2>
<button type="button" class="btn">基本按鈕</button>
<button type="button" class="btn btn-primary">主要按鈕</button>
<button type="button" class="btn btn-secondary">次要按鈕</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危險</button>
<button type="button" class="btn btn-dark">黑色</button>

<button type="button" class="btn btn-light">淺色</button>
<button type="button" class="btn btn-link">鏈接</button>
</div>

按鈕樣式.png

經(jīng)過基本導航欄的設置和按鈕的學習，加上之前學習的css排版亿傅，我們可以設計出一個最終版導航欄：

最終導航欄.png

3媒峡、網(wǎng)格系統(tǒng)

Bootstrap 提供了一套響應式、移動設備優(yōu)先的流式網(wǎng)格系統(tǒng)葵擎，隨著屏幕或視口（viewport）尺寸的增加谅阿，系統(tǒng)會自動分為最多 12 列。
我們也可以根據(jù)自己的需要，定義列數(shù)：

網(wǎng)格.png

Bootstrap 4 的網(wǎng)格系統(tǒng)是響應式的签餐，列會根據(jù)屏幕大小自動重新排列氯檐。
網(wǎng)格類
Bootstrap 4 網(wǎng)格系統(tǒng)有以下 5 個類:
.col- 針對所有設備
.col-sm- 平板 - 屏幕寬度等于或大于 576px
.col-md- 桌面顯示器 - 屏幕寬度等于或大于 768px)
.col-lg- 大桌面顯示器 - 屏幕寬度等于或大于 992px)
.col-xl- 超大桌面顯示器 - 屏幕寬度等于或大于 1200px)

網(wǎng)格系統(tǒng)規(guī)則

  • 網(wǎng)格每一行需要放在設置了 .container (固定寬度) 或 .container-fluid (全屏寬度) 類的容器中，這樣就可以自動設置一些外邊距與內(nèi)邊距竿刁。
  • 使用行來創(chuàng)建水平的列組。
  • 內(nèi)容需要放置在列中呻待，并且只有列可以是行的直接子節(jié)點秘通。
  • 預定義的類如 .row 和 .col-sm-4 可用于快速制作網(wǎng)格布局。
  • 列通過填充創(chuàng)建列內(nèi)容之間的間隙,這個間隙是通過 .rows 類的負邊距設置第一行和最后一列的偏移。
  • 網(wǎng)格列是通過跨越指定的 12 個列來創(chuàng)建,例如,設置三個相等的列,需要使用用三個.col-sm-4來設置。

我們使用網(wǎng)格系統(tǒng)創(chuàng)建一個top-content:

<section id="home" class="top_cont_outer">
    <div class="top_cont_inner">
        <div class="container">
            <div class="top_content">
                <div class="row">
                    <div class="col-lg-5 col-sm-7">
                        <div class="top_left_cont">
                            <h3>廈門大學</h3>
                            <h2>移動計算與數(shù)據(jù)分析</h2>
                            <p> 我們的目標“做好的研究默勾，學有用的技術，擁抱最美好的未來”聚谁。
                                "A good start is half way to success."  </p>
                            <a href="#introduce" class="learn_more2">Learn more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

在<div class="top_cont_inner">放置一張圖片母剥，美觀頁面

.top_cont_inner{
background:url(../images/back1.png) no-repeat right bottom;
background-size: 50% 90%;
}

對LEARN MORE設置鼠標懸停，以及鏈接形导；

>a.learn_more2{
    font-family: 微軟雅黑;
    display:block;
    font-size:16px;
    color:#ffffff;
    background:#49b5e7;
    width:178px;
    height:46px;
    line-height:46px;
    border-radius:3px;
    text-align:center;
    font-family:微軟雅黑;
    text-transform:uppercase;
    font-weight: 600;
}
a.learn_more2:hover{
    background:#222222;
}

最終环疼，我們的top-content的頁面顯示：

top-content.png

4、折疊

Bootstrap4 折疊可以很容易的實現(xiàn)內(nèi)容的顯示與隱藏朵耕。
.collapse 類用于指定一個折疊元素 (實例中的 <div>); 點擊按鈕后會在隱藏與顯示之間切換炫隶。
控制內(nèi)容的隱藏與顯示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 屬性阎曹。
data-target="#id" 屬性是對應折疊的內(nèi)容 (<div id="demo">)伪阶。
注意: <a> 元素上你可以使用 href 屬性來代替 data-target 屬性:
默認情況下折疊的內(nèi)容是隱藏的，你可以添加 .show 類讓內(nèi)容默認顯示:
注意: 使用 data-parent 屬性來確保所有的折疊元素在指定的父元素下处嫌，這樣就能實現(xiàn)在一個折疊選項顯示時其他選項就隱藏栅贴。

<div id="accordion" class="content1">
  <div class="card">
    <div class="card-header">
       <a class="card-link" data-toggle="collapse" href="#collapseOne">
        大數(shù)據(jù)分析和挖掘
       </a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
       <div class="card-body">
          <p><strong>數(shù)據(jù)分析/挖掘</strong>一般指從大量的數(shù)據(jù)中通過算法搜索隱藏于其中信息的過程。數(shù)據(jù)挖掘通過統(tǒng)計锰霜、機器學習筹误、在線分析處理、情報檢索癣缅、 專家系統(tǒng)和模式識別等諸多方法來實現(xiàn)上述目標厨剪。</p>
           <p><strong>MOCOM的研究點包括:</strong><br>
            ▲模式識別：基于移動節(jié)點（汽車、行人等）的GPS數(shù)據(jù)友存，分析行為模式祷膳；發(fā)現(xiàn)城市生活的規(guī)律，并開發(fā)智能應用屡立；<br>
            ▲分類和預測：基于主流深度學習平臺(PyTorch,Tensorflow)和大規(guī)模軌跡數(shù)據(jù)直晨，預測道路狀態(tài)(流量和速度)；<br>
            ▲大數(shù)據(jù)平臺：大數(shù)據(jù)的架構(gòu)和數(shù)據(jù)分析方法，包括Hadoop勇皇、Spark等平臺下的推薦罩句、數(shù)據(jù)統(tǒng)計和分析等；<br>
            ▲ 深度學習和圖嵌入：基于圖卷積對路網(wǎng)(Road Network)進行網(wǎng)絡嵌入敛摘，并開發(fā)新型算法门烂；<br>
          </p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        智能交通系統(tǒng)和車聯(lián)網(wǎng)
        </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          <p><strong>智能交通(Intelligent Transportation System)</strong>可以有效地利用現(xiàn)有交通設施、減少交通負荷和環(huán)境污染兄淫、保證交通安全屯远、提高運輸效率。 車載自組織網(wǎng)絡又稱“車聯(lián)網(wǎng)”捕虽，它利用先進的信息和網(wǎng)絡技術將車輛慨丐、行人、道路和路邊設施等集成為一個有機的信息系統(tǒng)泄私，以提供車輛安全房揭、 交通控制、綜合 信息和互聯(lián)網(wǎng)接入等服務晌端。</p>
          <p><strong>MOCOM的研究點包括:</strong><br>
            ▲基于大規(guī)模出租車軌跡的出租車路徑推薦算法崩溪，出租車和乘客的預約匹配算法；<br>
            ▲車聯(lián)網(wǎng)環(huán)境下的新型交通運輸和出行方式研究斩松，包括智能彈性公交和公車(Public Vehicle)調(diào)度算法伶唯；<br>
            ▲車聯(lián)網(wǎng)環(huán)境下的消息分發(fā)、數(shù)據(jù)收集惧盹，內(nèi)容查詢乳幸，共享機制等研究，并進行網(wǎng)絡模擬钧椰；<br>
          </p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
        邊沿計算和云平臺融合
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          <p><strong>邊沿計算(Edge Computing)</strong>是云計算模式的延伸粹断。邊沿計算區(qū)別于那些將計算集中在遠端或“天邊”的云計算技術，在“地面”或網(wǎng)絡邊緣部署具有較強存儲嫡霞、 計算和通信能力的“邊沿節(jié)點”瓶埋，使得網(wǎng)絡計算從網(wǎng)絡的中心擴展到網(wǎng)絡的邊緣。</p>
          <p><strong>MOCOM的研究點包括:</strong><br>
            ▲在車聯(lián)網(wǎng)環(huán)境下對邊沿節(jié)點的數(shù)據(jù)進行過濾诊沪，分析本地數(shù)據(jù)并做預處理养筒；<br>
            ▲基于邊沿節(jié)點的高效查詢處理、和事件檢測晕粪；邊沿節(jié)點與云平臺的交互、協(xié)同與融合機制渐裸；<br>
            ▲城市計算框架下的邊沿計算的典型應用場景巫湘，基于邊沿計算的智能交通系統(tǒng)和路網(wǎng)<br>
          </p>
      </div>
    </div>
  </div>
</div>

最終的折疊效果：

折疊效果.png

5装悲、輪播

關于輪播的類和描述：


輪播.png

代碼：

<div id="demo" class="content3 carousel slide" data-ride="carousel">
   <!-- 指示符 -->
       <ul class="carousel-indicators">
           <li data-target="#demo" data-slide-to="0" class="active"></li>
           <li data-target="#demo" data-slide-to="1"></li>
           <li data-target="#demo" data-slide-to="2"></li>
       </ul>

   <!-- 輪播圖片 -->
       <div class="carousel-inner">
           <div class="carousel-item active">
                <img src="images/數(shù)據(jù)分析.jpg" height="400" width="800"/></div>
            <div class="carousel-item">
                <img src="images/che.jpg" height="400" width="800"/></div>
            <div class="carousel-item">
                <img src="images/yun.png" height="400" width="800"/></div>
        </div>

   <!-- 左右切換按鈕 -->
       <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
       </a>
       <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
       </a>
</div>

最終效果：

輪播圖效果.png

6、標題尚氛、文本和鏈接卡片

我們可以在頭部元素上使用 .card-title 類來設置卡片的標題 诀诊。
.card-text 類用于設置卡片正文的內(nèi)容。 .card-link 類用于給鏈接設置顏色阅嘶。

<div class="container">
  <h2>標題畏梆、文本和鏈接</h2>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Some example text. Some example text.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

卡片樣例：

卡片樣例.png

在卡片的基礎上，加上輪播圖的效果奈懒，就可以做輪播卡片啦：

<div class="science0">
<section id="science">
    <div class="container">
        <h2>科研成果</h2>
        <div id="demo1" class="content4 carousel slide" data-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-target="#demo1" data-slide-to="0" class="active"></li>
                <li data-target="#demo1" data-slide-to="1"></li>
                <li data-target="#demo1" data-slide-to="2"></li>
            </ul>

            <!-- 輪播圖片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="keyan3">
                        <div class="keyan container">
                            <h5>軌跡數(shù)據(jù)的挖掘和可視化</h5>
                            <div class="card">
                                <div class="card-body">
                                    <p class="card-text">軌跡數(shù)據(jù)就是時空環(huán)境下，通過對一個或多個移動對象運動過程的采樣所獲得的數(shù)據(jù)信息宪巨，包括采樣點位置磷杏、采樣時間、速度等捏卓，這些采...</p>
                                    <a href="#" class="card-link">更多</a>
                                </div>
                            </div>
                        </div>
                        <div class="keyan2 container">
                            <h5>打車推薦</h5>
                            <div class="card">
                                <div class="card-body">
                                    <p class="card-text"> 以手機為代表的移動智能終端已經(jīng)成為人們生活之中不可缺少的一部分极祸。為了緩解“打車難”的問題，手機打車軟件應運而生... </p>
                                    <a href="#" class="card-link">更多</a>
                                </div>
                            </div>
                        </div>
                        <div class="keyan1 container">
                            <h5>車載網(wǎng)絡數(shù)據(jù)收集 </h5>
                            <div class="card">
                                <div class="card-body">
                                    <p class="card-text">車載自組織網(wǎng)絡(Vehicular Ad-hoc Network怠晴，VANET)又稱“車載網(wǎng)絡”或“車聯(lián)網(wǎng)”遥金，是利用先進的信息和網(wǎng)絡技術，將車輛蒜田、行人稿械、道路...</p>
                                    <a href="#" class="card-link">更多</a>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="keyan3">
                            <div class="keyan container">
                                <h5>直播流媒體技術</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text">項目將研究當前的直播流媒體平臺技術，包括： easyDarwin 流媒體服務器的配置冲粤、使用 美莫； 移動...</p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="keyan2 container">
                                <h5>Xiamen Taxi Dataset</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text">The Xiamen taxi trajectory datasets consist one-month trajectory data of almost 5,000 taxicabs in Xiamen... </p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="keyan1 container">
                                <h5>WebGIS 地圖展示 </h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text"> “WebGIS ”技術研究    研究基于ArcGis的地理信息的創(chuàng)建、地圖共享梯捕、分析等技術厢呵。    將基于ArcG...</p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="keyan3">
                            <div class="keyan container">
                                <h5>叫車需求預測</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text">本次報告介紹叫車需求預測的相關內(nèi)容，了解在未來一定的時間段和地區(qū)范圍內(nèi)的用戶轎車的需求數(shù)量傀顾，是平衡出租車服務的關鍵...</p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="keyan2 container">
                                <h5>城市車輛感知</h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text"> 移動傳感和通信技術的最新進展引發(fā)了利用移動傳感器網(wǎng)絡作為大規(guī)模和細粒度城市傳感的解決方案襟铭。這種感知模式通常被稱為機會感知... </p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                            <div class="keyan1 container">
                                <h5>快速使用Linux </h5>
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-text">本次報告主要簡單地介紹如何安裝以及使用Linux，以及特別的Linux使用案例如使用make指令短曾、使用shell腳本寒砖、使用ssh指令等...</p>
                                        <a href="#" class="card-link">更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <!-- 左右切換按鈕 -->
            <a class="carousel-control-prev" href="#demo1" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo1" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </div>
</section>
</div>

再稍微對這個div進行CSS排版
最終效果：

科研成果.png

7、圖片卡片

我們可以給 <img> 添加 .card-img-top（圖片在文字上方） 或 .card-img-bottom（圖片在文字下方 來設置圖片卡片：

<div class="container">
  <h2>圖片卡片</h2>
  <p>圖片在頭部 (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
<div>

圖片卡片樣例：


圖片卡片.png

我們可以通過圖片卡片制作名片嫉拐。

最后入撒，給網(wǎng)頁加一個footer，就可以完成一個完整的網(wǎng)頁啦椭岩。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末茅逮，一起剝皮案震驚了整個濱河市璃赡，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌献雅，老刑警劉巖碉考，帶你破解...
    沈念sama閱讀 211,639評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異挺身，居然都是意外死亡侯谁，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門章钾，熙熙樓的掌柜王于貴愁眉苦臉地迎上來墙贱，“玉大人，你說我怎么就攤上這事贱傀〔移玻” “怎么了？”我有些...
    開封第一講書人閱讀 157,221評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵府寒，是天一觀的道長魁衙。 經(jīng)常有香客問我，道長株搔，這世上最難降的妖魔是什么剖淀？ 我笑而不...
    開封第一講書人閱讀 56,474評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮纤房，結(jié)果婚禮上纵隔，老公的妹妹穿的比我還像新娘。我一直安慰自己炮姨，他們只是感情好巨朦，可當我...
    茶點故事閱讀 65,570評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著剑令，像睡著了一般糊啡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上吁津，一...
    開封第一講書人閱讀 49,816評論 1贊 290
  • 城市分裂傳說
    那天棚蓄，我揣著相機與錄音，去河邊找鬼碍脏。 笑死梭依，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的典尾。 我是一名探鬼主播役拴，決...
    沈念sama閱讀 38,957評論 3贊 408
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼钾埂！你這毒婦竟也來了河闰？” 一聲冷哼從身側(cè)響起科平，我...
    開封第一講書人閱讀 37,718評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎姜性，沒想到半個月后瞪慧，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,176評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡部念，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年弃酌，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片儡炼。...
    茶點故事閱讀 38,646評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡妓湘，死狀恐怖旦袋，靈堂內(nèi)的尸體忽然破棺而出絮缅，到底是詐尸還是另有隱情绳泉，我是刑警寧澤蔓钟，帶...
    沈念sama閱讀 34,322評論 4贊 330
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站萌狂，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜秆麸，卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3贊 313
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望及汉。 院中可真熱鬧沮趣，春花似錦、人聲如沸坷随。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽温眉。三九已至缸匪，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間类溢，已是汗流浹背凌蔬。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留闯冷，地道東北人砂心。 一個月前我還...
    沈念sama閱讀 46,358評論 2贊 360
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像蛇耀，于是被迫代替她去往敵國和親辩诞。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2贊 348

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案纺涤？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1贊 92
  • 第5章 菜單译暂、按鈕及導航 一抠忘、下拉菜單 小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件秧秉，根...
    凜0_0閱讀 4,950評論 0贊 66
  • 第3章 探索Bootstrap組件 在這一章褐桌，我們將開始使用Bootstrap的一些非常有用的HTML組件。諸如按...
    海上名月閱讀 928評論 1贊 6
  • 一象迎、小圖標 1.如需使用圖標荧嵌，只需要簡單地使用下面的代碼即可。請在圖標和文本之間保留適當?shù)目臻g砾淌。 實例 2.帶有字...
    溺于眼里星河閱讀 855評論 0贊 0
  • 使用sketch最重要的一點是設計好控件的規(guī)范汪厨。 為做好設計規(guī)范需要對色彩進行編號赃春，比如:color_a”_1，c...
    youyeath閱讀 26,127評論 2贊 237