bookstrap的nav標簽

navbar-default? 白框

navbar-inverse 黑框

navbar-header 最開頭的，可以設(shè)置其換頁的時候變成聚焦點

collapse navbar-collapse be-example-navbar-collapse-1 引用后邊的-1數(shù)字不知道什么意思俏脊，改變后對整個導(dǎo)航欄沒有什么影響

nav navbar-nav <li>標簽可以直接應(yīng)用现诀，并且響應(yīng)式蜘澜，

dropdown下拉菜單 mean析苫，對于下拉菜單有很多樣式，學(xué)會了代碼聂沙，但是不會應(yīng)用到bookstrap中

/*------------- menu1 animation -------------------*/

#menu1 li:first-of-type {

? animation: menu1 0.3s ease-in-out forwards;

? animation-delay: 0.3s;

}

#menu1 li:nth-of-type(2) {

? animation: menu1 0.3s ease-in-out forwards;

? animation-delay: 0.6s;

}

#menu1 li:nth-of-type(3) {

? animation: menu1 0.3s ease-in-out forwards;

? animation-delay: 0.9s;

}

#menu1 li:last-of-type {

? animation: menu1 0.3s ease-in-out forwards;

? animation-delay: 1.2s;

}

@keyframes menu1 {

? from {

? ? opacity: 0;

? ? transform: translateX(30px) rotateY(90deg);

? }

? to {

? ? opacity: 1;

? ? transform: translateX(0) rotateY(0);

? }

}

/*------------- menu2 animation -------------------*/

.main li:hover .menu2 li:first-of-type {

? animation: menu2 0.3s ease-in-out forwards;

? animation-delay: 0.3s;

}

.main li:hover .menu2 li:nth-of-type(2) {

? animation: menu2 0.3s ease-in-out forwards;

? animation-delay: 0.6s;

}

.main li:hover .menu2 li:nth-of-type(3) {

? animation: menu2 0.3s ease-in-out forwards;

? animation-delay: 0.9s;

}

.main li:hover .menu2 li:last-of-type {

? animation: menu2 0.3s ease-in-out forwards;

? animation-delay: 1.2s;

}

@keyframes menu2 {

? 0% {

? ? opacity: 0;

? ? transform: scale(0.7);

? }

? 50% {

? ? opacity: 0.5;

? ? transform: scale(1.1);

? }

? 100% {

? ? opacity: 1;

? ? transform: scale(1);

? }

}

/*------------- menu3 animation -------------------*/

.main li:hover .menu3 li:first-of-type {

? animation: menu3 0.3s ease-in-out forwards;

? animation-delay: 0.3s;

}

.main li:hover .menu3 li:nth-of-type(2) {

? animation: menu3 0.3s ease-in-out forwards;

? animation-delay: 0.6s;

}

.main li:hover .menu3 li:nth-of-type(3) {

? animation: menu3 0.3s ease-in-out forwards;

? animation-delay: 0.9s;

}

.main li:hover .menu3 li:last-of-type {

? animation: menu3 0.3s ease-in-out forwards;

? animation-delay: 1.2s;

}

@keyframes menu3 {

? 0% {

? ? opacity: 0;

? ? transform: translateX(20px);

? }

? 100% {

? ? opacity: 1;

? ? transform: translateX(0);

? }

}

/*------------- menu4 animation -------------------*/

.main li:hover .menu4 li:first-of-type {

? animation: menu4 0.3s ease-in-out forwards;

? animation-delay: 0.3s;

}

.main li:hover .menu4 li:nth-of-type(2) {

? animation: menu4 0.3s ease-in-out forwards;

? animation-delay: 0.6s;

}

.main li:hover .menu4 li:nth-of-type(3) {

? animation: menu4 0.3s ease-in-out forwards;

? animation-delay: 0.9s;

}

.main li:hover .menu4 li:last-of-type {

? animation: menu4 0.3s ease-in-out forwards;

? animation-delay: 1.2s;

}

@keyframes menu4 {

? 0% {

? ? opacity: 0;

? ? transform: translateX(50px) rotate(-90deg);

? }

? 100% {

? ? opacity: 1;

? ? transform: translateX(0) rotate(0);

? }

}

/*------------- menu5 animation -------------------*/

.main li:hover .menu5 li:first-of-type {

? animation: menu5 0.3s ease-in-out forwards;

? animation-delay: 0.3s;

}

.main li:hover .menu5 li:nth-of-type(2) {

? animation: menu5 0.3s ease-in-out forwards;

? animation-delay: 0.6s;

}

.main li:hover .menu5 li:nth-of-type(3) {

? animation: menu5 0.3s ease-in-out forwards;

? animation-delay: 0.9s;

}

.main li:hover .menu5 li:last-of-type {

? animation: menu5 0.3s ease-in-out forwards;

? animation-delay: 1.2s;

}

@keyframes menu5 {

? 0% {

? ? opacity: 0;

? ? transform: rotateX(-90deg);

? }

? 100% {

? ? opacity: 1;

? ? transform: rotateX(0);

? }

}

/*------------- menu6 animation -------------------*/

.main li:hover .menu6 li:first-of-type {

? animation: menu6 0.3s ease-in-out forwards;

? animation-delay: 0.2s;

}

.main li:hover .menu6 li:nth-of-type(2) {

? animation: menu6 0.3s ease-in-out forwards;

? animation-delay: 0.4s;

}

.main li:hover .menu6 li:nth-of-type(3) {

? animation: menu6 0.3s ease-in-out forwards;

? animation-delay: 0.6s;

}

.main li:hover .menu6 li:last-of-type {

? animation: menu6 0.3s ease-in-out forwards;

? animation-delay: 0.8s;

}

@keyframes menu6 {

? 0% {

? ? opacity: 0;

? ? transform: scale(2);

? }

? 100% {

? ? opacity: 1;

? ? transform: scale(1);

? }

}

/* my button style */

.white-mode {

? text-decoration: none;

? padding: 7px 10px;

? background-color: #122;

? border-radius: 3px;

? color: #fff;

? transition: 0.35s ease-in-out;

? position: absolute;

? left: 15px;

? bottom: 15px;

? font-family: sans-serif;

}

.white-mode:hover {

? background-color: #fff;

? color: #122;

}

navbar-brand可以讓字號變大炬丸，變成重點

bootsnav是一個很神奇的js

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

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

<title>基于bootsnav的簡潔多級導(dǎo)航菜單|DEMO_jQuery之家-自由分享jQuery瘫寝、html5蜒蕾、css3的插件庫</title>

<link rel="stylesheet">

<link rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">

<link rel="stylesheet" type="text/css" href="css/bootsnav.css">

<style type="text/css">

nav.navbar.bootsnav ul.nav > li > a{

? ? color: #474747;

? ? text-transform: uppercase;

? ? padding: 30px;

}

nav.navbar.bootsnav ul.nav > li:hover{

? ? background: #f4f4f4;

}

.nav > li:after{

? ? content: "";

? ? width: 0;

? ? height: 5px;

? ? background: #34c9dd;

? ? position: absolute;

? ? bottom: 0;

? ? left: 0;

? ? transition: all 0.5s ease 0s;

}

.nav > li:hover:after{

? ? width: 100%;

}

nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{

? ? content: "=";

? ? font-family: 'FontAwesome';

? ? font-size: 16px;

? ? font-weight: 500;

? ? position: absolute;

? ? transition: all 0.4s ease 0s;

}

nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{

? ? content: "\f105";

? ? transform: rotate(90deg);

}

.dropdown-menu.multi-dropdown{

? ? position: absolute;

? ? left: -100% !important;

}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu{

? ? box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

? ? border: none;

}

@media only screen and (max-width:990px){

? ? nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,

? ? nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }

? ? .dropdown-menu.multi-dropdown{ left: 0 !important; }

? ? nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }

? ? nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }

}

</style>

</head>

<body>

<div class="htmleaf-container">

<div class="demo">

? ? ? ? <div class="row">

? ? ? ? ? ? ? ? <div class="col-md-12">

? ? ? ? ? ? ? ? ? ? <nav class="navbar navbar-default navbar-mobile bootsnav">

? ? ? ? ? ? ? ? ? ? ? ? <div class="navbar-header">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <i class="fa fa-bars"></i>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </button>

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

? ? ? ? ? ? ? ? ? ? ? ? <div class="collapse navbar-collapse" id="navbar-menu">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Home</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">About Us</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li class="dropdown">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul class="dropdown-menu">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li class="dropdown">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul class="dropdown-menu">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li class="dropdown">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul class="dropdown-menu multi-dropdown">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li class="dropdown">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul class="dropdown-menu">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li class="dropdown">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul class="dropdown-menu">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li class="dropdown">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul class="dropdown-menu multi-dropdown">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Custom Menu</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Portfolio</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Contact Us</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>

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

? ? ? ? ? ? ? ? ? ? </nav>

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

? ? ? ? ? ? </div>

? ? </div>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>

<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/bootsnav.js"></script>

</body>

</html>

顯示大概的導(dǎo)航樣式

旋轉(zhuǎn)的箭頭所在地，移動端的時候菜單欄顯示

移動端的時候有頁面右移特效焕阿，背景顏色咪啡，字體的顏色大小設(shè)置

導(dǎo)航欄細化描寫

下拉菜單欄的顯示與消失，過渡動畫

這幾天沒有白做暮屡，很累撤摸，但是終于把別人總結(jié)好的東西鉆研了一下，變成了自己的東西褒纲，算然還欠火候准夷，但我在努力！

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

人面猴
序言：七十年代末莺掠，一起剝皮案震驚了整個濱河市衫嵌，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌彻秆，老刑警劉巖楔绞，帶你破解...
沈念sama閱讀 212,454評論 6贊 493
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異掖棉，居然都是意外死亡，警方通過查閱死者的電腦和手機膀估，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,553評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門幔亥，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人察纯，你說我怎么就攤上這事帕棉。” “怎么了饼记？”我有些...
開封第一講書人閱讀 157,921評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵香伴，是天一觀的道長。經(jīng)常有香客問我具则，道長即纲，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,648評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任博肋，我火速辦了婚禮低斋，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘匪凡。我一直安慰自己膊畴，他們只是感情好，可當(dāng)我...
茶點故事閱讀 65,770評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布病游。她就那樣靜靜地躺著唇跨，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上买猖，一...
開封第一講書人閱讀 49,950評論 1贊 291
城市分裂傳說
那天改橘，我揣著相機與錄音，去河邊找鬼政勃。笑死唧龄，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的奸远。我是一名探鬼主播既棺，決...
沈念sama閱讀 39,090評論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼懒叛！你這毒婦竟也來了丸冕？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,817評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤薛窥，失蹤者是張志新（化名）和其女友劉穎胖烛，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诅迷，經(jīng)...
沈念sama閱讀 44,275評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡佩番，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,592評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了罢杉。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片趟畏。...
茶點故事閱讀 38,724評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖滩租，靈堂內(nèi)的尸體忽然破棺而出赋秀，到底是詐尸還是另有隱情，我是刑警寧澤律想，帶...
沈念sama閱讀 34,409評論 4贊 333
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布猎莲，位于F島的核電站，受9級特大地震影響技即，放射性物質(zhì)發(fā)生泄漏著洼。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 40,052評論 3贊 316
男人毒藥：我在死后第九天來索命
文/蒙蒙一而叼、第九天我趴在偏房一處隱蔽的房頂上張望郭脂。院中可真熱鬧，春花似錦澈歉、人聲如沸展鸡。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,815評論 0贊 21
一樁弒父案埃难，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽莹弊。三九已至涤久，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間忍弛，已是汗流浹背响迂。一陣腳步聲響...
開封第一講書人閱讀 32,043評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留细疚，地道東北人蔗彤。一個月前我還...
沈念sama閱讀 46,503評論 2贊 361
代替公主和親
正文我出身青樓，卻偏偏與公主長得像疯兼，于是被迫代替她去往敵國和親然遏。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,627評論 2贊 350

bookstrap的nav標簽

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