Bootstrap

第一個(gè)bootstrap模板樣式

移動端優(yōu)先

<meta name="viewport" content="width=device-width, initial-scale=1">

所有bootstrap js插件前先放jquery.js框架

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="jquery.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件锅减。你也可以根據(jù)需要只加載單個(gè)插件糖儡。 -->
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后上煤！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
  
    <div class="container-fluid" style="height: 1000px;background-color: red">
      <div class="row">
        <div class="col-md-6" style="background-color: green;height: 100px"></div>
        <div class="col-md-6" style="background-color: black;height: 100px"></div>
        </div></div>
        
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="jquery.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件著淆。你也可以根據(jù)需要只加載單個(gè)插件劫狠。 -->
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
  </body>
</html>

Normalize.css

為了增強(qiáng)跨瀏覽器表現(xiàn)的一致性拴疤，我們使用了 Normalize.css。

布局容器（寬度布局）

.container 類用于固定寬度并支持響應(yīng)式布局的容器独泞。

<div class="container">
  ...
</div>

.container-fluid 類用于 100% 寬度呐矾，占據(jù)全部視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

柵格系統(tǒng)

所有“列（column）必須放在 ” .row 內(nèi)懦砂。

只有列能作為行的直接子元素

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局蜒犯，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。系統(tǒng)會自動分為最多12列荞膘。只定義類12個(gè)樣式類

1. row表示行罚随，必須放在container或container-fluid中
2. row被均分成12列， 列的語法是col-xx-**
    xx的取值范圍：xs（手機(jī)）->sm（平板）->md（中等屏幕羽资，臺式電腦）->lg（超大屏）
    **的取值范圍：1~12
3. 只有列能作為行的直接子元素

媒體查詢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 200px;
        }
        /*媒體查詢 在寬度小于700px的時(shí)候使用這個(gè)css*/
        @media screen and (max-width: 700px) {
            .c1 {
                background-color: green;
            }
        }
    </style>
</head>
<body>

<div class="c1">

</div>
</body>
</html>

列偏移(居中淘菩，右移動)

col-xx-offset-**

.col-md-offset-4 類將 .col-md-4 元素向右側(cè)偏移了4個(gè)列（column）的寬度。

    <div class="row">
            <div class="col-md-4 col-md-offset-4 col-xs-offset-4" style="background-color: deeppink;height: 100px"></div>
          </div>

嵌套列

任意一列屠升，都可以在內(nèi)部在定義row,均分成12份

列排序(推（push）潮改，拉（pull）)

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。

<div class="row">
        <div class="col-md-4 col-md-push-8" style="background-color: deeppink;height: 100px"></div>
        <div class="col-md-8 col-md-pull-4" style="background-color: orange;height: 100px"></div>
      </div>

排版

在標(biāo)題內(nèi)還可以包含 <small> 標(biāo)簽或賦予 .small 類的元素腹暖，可以用來標(biāo)記副標(biāo)題汇在。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container">
    <h1>來了，就是深圳人脏答！
        <small>別想走糕殉！</small>
    </h1>
</div>
</body>
</html>

頁面主體

Bootstrap 將全局 font-size 設(shè)置為 14px，line-height 設(shè)置為 1.428以蕴。這些屬性直接賦予 <body> 元素和所有段落元素糙麦。另外，<p> （段落）元素還被設(shè)置了等于 1/2 行高（即 10px）的底部外邊距（margin）丛肮。

.lead 類可以讓段落突出顯示赡磅。

<p class="lead">...</p>

Marked text（讓字體高亮的顯示）

You can use the mark tag to <mark>highlight</mark> text.

被刪除的文本

<del>This line of text is meant to be treated as deleted text.</del>

無用文本

<s>This line of text is meant to be treated as no longer accurate.</s>

插入文本
額外插入的文本使用 <ins> 標(biāo)簽。

帶下劃線的文本
為文本添加下劃線宝与，使用 <u> 標(biāo)簽

小號文本
<small> 標(biāo)簽包裹焚廊，其內(nèi)的文本將被設(shè)置為父容器字體大小的 85%。

著重
通過增加 font-weight 值強(qiáng)調(diào)一段文本习劫。

<strong>rendered as bold text</strong>

斜體
用斜體強(qiáng)調(diào)一段文本咆瘟。

<em>rendered as italicized text</em>

對齊

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改變大小寫

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

縮略語
當(dāng)鼠標(biāo)懸停在縮寫和縮寫詞上時(shí)就會顯示完整內(nèi)容，Bootstrap 實(shí)現(xiàn)了對 HTML 的 <abbr> 元素的增強(qiáng)樣式诽里。

<abbr title="attribute">attr</abbr>

首字母縮略語
為縮略語添加 .initialism 類袒餐，可以讓 font-size 變得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

讓聯(lián)系信息以最接近日常使用的格式呈現(xiàn)。在每行結(jié)尾添加 <br> 可以保留需要的樣式灸眼。

<address>
      <strong>knight Plan</strong><br>
      平山村 世外桃源創(chuàng)意園<br>
      深圳市南山區(qū), 0755<br>
      <abbr title="Phone">Phone:</abbr> (123) 456-7890
    </address>

    <address>
      <strong>張大大</strong><br>
      <a href="mailto:#">zhangdd@oldboyedu.com</a>
    </address>

引用

將任何 HTML 元素包裹在 <blockquote> 中即可表現(xiàn)為引用樣式卧檐。對于直接引用，我們建議用 <p> 標(biāo)簽焰宣。

    <blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

列表

無序列表

<ul>
<li>...</li>
</ul>

有序列表

<ol>
 <li>...</li>
</ol>

無樣式列表

    <ul class="list-unstyled">
  <li>...</li>
</ul>

內(nèi)聯(lián)列表

    <ul class="list-inline">
  <li>...</li>
</ul>

描述
帶有描述的短語列表霉囚。

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

代碼

內(nèi)聯(lián)代碼
通過 <code> 標(biāo)簽包裹內(nèi)聯(lián)樣式的代碼片段。

用戶輸入
通過 <kbd> 標(biāo)簽標(biāo)記用戶通過鍵盤輸入的內(nèi)容匕积。

代碼塊
多行代碼可以使用 <pre> 標(biāo)簽盈罐。為了正確的展示代碼，注意將尖括號做轉(zhuǎn)義處理闪唆。

變量
通過 <var> 標(biāo)簽標(biāo)記變量盅粪。

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序輸出
通過 <samp> 標(biāo)簽來標(biāo)記程序輸出的內(nèi)容。

表格

基本實(shí)例
為任意 <table> 標(biāo)簽添加 .table 類可以為其賦予基本的樣式 — 少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線苞氮。

<table class="table">
  ...
</table>

條紋狀表格
通過 .table-striped 類可以給 <tbody> 之內(nèi)的每一行增加斑馬條紋樣式湾揽。

<table class="table table-striped">
  ...
</table>

帶邊框的表格
添加 .table-bordered 類為表格和其中的每個(gè)單元格增加邊框。

<table class="table table-bordered">
  ...
</table>

鼠標(biāo)懸停
通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標(biāo)懸停狀態(tài)作出響應(yīng)笼吟。

<table class="table table-hover">
  ...
</table>

緊縮表格

<table class="table table-condensed">
  ...
</table>

狀態(tài)類
通過這些狀態(tài)類可以為行或單元格設(shè)置顏色库物。

Class 描述

.active 鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色
.success    標(biāo)識成功或積極的動作
.info   標(biāo)識普通的提示信息或動作
.warning    標(biāo)識警告或需要用戶注意
.danger 標(biāo)識危險(xiǎn)或潛在的帶來負(fù)面影響的動作

響應(yīng)式表格

將任何 .table 元素包裹在 .table-responsive 元素內(nèi)，即可創(chuàng)建響應(yīng)式表格贷帮，其會在小屏幕設(shè)備上（小于768px）水平滾動戚揭。當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動條消失撵枢。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

表單

輸入框
包括大部分表單控件民晒、文本輸入域控件，還支持所有 HTML5 類型的輸入控件： text锄禽、password潜必、datetime、datetime-local沃但、date磁滚、month、time宵晚、week垂攘、number、email淤刃、url晒他、search、tel 和 color逸贾。

按鈕

讓一個(gè)人毀滅之前,先讓其膨脹

Bootstrap常用組件

無數(shù)可復(fù)用的組件陨仅，包括字體圖標(biāo)津滞、下拉菜單、導(dǎo)航灼伤、警告框据沈、彈出框等更多功能。

內(nèi)置圖標(biāo)
使用span標(biāo)簽加class

<span class="glyphicon glyphicon-search"></span>

fontawesome圖標(biāo)
使用i標(biāo)簽加class

<i class="fa fa-wechat" style="color: green"></i>

您可以將Font Awesome圖標(biāo)使用在幾乎任何地方饺蔑，只需要使用CSS前綴 fa ，再加上圖標(biāo)名稱嗜诀。 Font Awesome是為使用內(nèi)聯(lián)元素而設(shè)計(jì)的猾警。我們通常更喜歡使用 <i> ，因?yàn)樗啙崱?但實(shí)際上使用 <span> 才能更加語義化隆敢。

使用 fa-lg (33%遞增)发皿、fa-2x、 fa-3x拂蝎、fa-4x穴墅，或者 fa-5x 類來放大圖標(biāo)。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x

使用 fa-fw 可以將圖標(biāo)設(shè)置為一個(gè)固定寬度温自。主要用于不同寬度圖標(biāo)無法對齊的情況玄货。尤其在列表或?qū)Ш綍r(shí)起到重要作用。

<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>

使用 fa-spin 類來使任意圖標(biāo)旋轉(zhuǎn)悼泌，現(xiàn)在您還可以使用 fa-pulse 來使其進(jìn)行8方位旋轉(zhuǎn)松捉。尤其適合 fa-spinner、fa-refresh 和 fa-cog 馆里。

<i class="fa fa-spinner fa-spin"></i>

組合使用

如果想要將多個(gè)圖標(biāo)組合起來隘世，使用 fa-stack 類作為父容器， fa-stack-1x 作為正常比例的圖標(biāo)鸠踪， fa-stack-2x 作為大一些的圖標(biāo)丙者。

 <span class="fa-stack fa-lg">
  <i class="fa fa-heartbeat fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

Font Awesome 完全兼容 Bootstrap 的所有組件。

<button class="btn btn-danger"><i class="fa fa-trash-o"></i> 刪除</button>

下拉菜單：

在body中需要導(dǎo)入才有相應(yīng)動作
新的css文件能覆蓋上面的bootstrap.css文件信息

<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

（html）
.
.
.
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

導(dǎo)航條通常不放在container中

滾動條實(shí)例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>


<div class="container">
    <div class="progress">
        <div id="p1" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;min-width: 2%">
            0%
        </div>
    </div>
    <button class="btn btn-success btn-sm" id="b1">開始</button>
</div>


<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
    var n = 0;
    var t;

    // jQuery操作標(biāo)簽的CSS屬性
    function foo() {
        $('#p1').css('width', n + '%').text(n + '%');
        n += 1;
        if (n > 100) {
            clearInterval(t);
        }
    }

    // 點(diǎn)擊開始按鈕营密，讓滾動條滾動起來
    $('#b1').click(function () {
        // 每隔一秒鐘執(zhí)行一下上面的代碼
        t = setInterval(foo, 100);
    });

</script>
</body>
</html>

iframe標(biāo)簽

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

<!-- 16:9 aspect ratio -->
<div style="height: 400px;width: 600px">
  <iframe class="embed-responsive-item" src="https://www.luffycity.com"></iframe>
</div>


<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

信息搜集卡

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1>信息收集卡
                    <small>共三步</small>
                </h1>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                     aria-valuemax="100" style="width: 33.33%;">
                    1/3
                </div>
            </div>
            <!--面板-->
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">基本信息<span class="glyphicon glyphicon-pushpin pull-right"></span></h3>

                </div>
                <div class="panel-body">
                    <!--表單-->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail1" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-4">
                                <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword2" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-4">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputFile" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-4">
                                <input type="file" class="" id="inputFile" placeholder="Password">
                                <span class="help-block">只支持png</span>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">屬性</div>
                            <div class="col-sm-4">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                               checked>
                                        我是一個(gè)好人
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                         我是一個(gè)壞人
                                    </label>
                                </div>
                                <div class="radio disabled">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"
                                               disabled>
                                        我不是一個(gè)人
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--下一步按鈕-->
            <div>
                <button class="btn btn-success pull-right">下一步</button>
            </div>
        </div>
    </div>
</div>


<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

JS插件示例

1.模態(tài)框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>



<div class="container">
    <!-- 觸發(fā)模態(tài)框的按鈕 -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     點(diǎn)我
    </button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">標(biāo)題</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>

</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>


</div>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
    $('#myModal').modal({
        backdrop: 'static',
    })
</script>
</body>
</html>

2.輪播圖(carousel)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
  <!-- 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="banner/banner_1.jpg" alt="...">
      <div class="carousel-caption">
        學(xué)不會怨老師
      </div>
    </div>

    <div class="item">
      <img src="banner/banner_2.jpg" alt="...">
      <div class="carousel-caption">
        學(xué)會了苑老師
      </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>



<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
  <!--設(shè)置輪播圖的輪狀時(shí)間-->
  $('.carousel').carousel({
      interval: 3000
  })
</script>
</body>
</html>

[[ctrl]]+[[r]] 彈出搜索框替換相應(yīng)文本

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末械媒，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子卵贱，更是在濱河造成了極大的恐慌滥沫，老刑警劉巖，帶你破解...
沈念sama閱讀 222,104評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件键俱，死亡現(xiàn)場離奇詭異兰绣，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)编振，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,816評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門缀辩，熙熙樓的掌柜王于貴愁眉苦臉地迎上來臭埋，“玉大人，你說我怎么就攤上這事臀玄∑耙酰” “怎么了？”我有些...
開封第一講書人閱讀 168,697評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵健无，是天一觀的道長荣恐。經(jīng)常有香客問我，道長累贤，這世上最難降的妖魔是什么叠穆？我笑而不...
開封第一講書人閱讀 59,836評論 1贊 298
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮臼膏，結(jié)果婚禮上硼被，老公的妹妹穿的比我還像新娘。我一直安慰自己渗磅，他們只是感情好嚷硫，可當(dāng)我...
茶點(diǎn)故事閱讀 68,851評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著始鱼，像睡著了一般仔掸。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上医清，一...
開封第一講書人閱讀 52,441評論 1贊 310
城市分裂傳說
那天嘉汰，我揣著相機(jī)與錄音，去河邊找鬼状勤。笑死鞋怀，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的持搜。我是一名探鬼主播密似，決...
沈念sama閱讀 40,992評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼葫盼！你這毒婦竟也來了残腌？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,899評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤贫导，失蹤者是張志新（化名）和其女友劉穎抛猫，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體孩灯，經(jīng)...
沈念sama閱讀 46,457評論 1贊 318
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡闺金，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,529評論 3贊 341
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了峰档。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片败匹。...
茶點(diǎn)故事閱讀 40,664評論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡寨昙，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出掀亩，到底是詐尸還是另有隱情舔哪，我是刑警寧澤，帶...
沈念sama閱讀 36,346評論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布槽棍，位于F島的核電站捉蚤，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏炼七。R本人自食惡果不足惜外里，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,025評論 3贊 334
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望特石。院中可真熱鬧，春花似錦鳖链、人聲如沸姆蘸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,511評論 0贊 24
一樁弒父案芙委，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽逞敷。三九已至，卻和暖如春灌侣，著一層夾襖步出監(jiān)牢的瞬間推捐，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,611評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工侧啼，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留牛柒，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,081評論 3贊 377
代替公主和親
正文我出身青樓痊乾，卻偏偏與公主長得像皮壁，于是被迫代替她去往敵國和親。傳聞我的和親對象是個(gè)殘疾皇子哪审，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,675評論 2贊 359

Bootstrap

表單

按鈕

JS插件示例

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