下拉菜單
<div id=’btn’ class="dropdown">//dropdoup上啦
<button class="btn btn-default" data-toggle="dropdown">//開關
下拉菜單<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href=’#’>北京</a></li>
<li><a href=’#’>成都</a></li>
<li><a href=’#’>上海</a></li>
<li><a href=’#’>閬中</a></li>
</ul>
</div>
//1.菜單項向右對齊,默認是dropdown-menu-left
<ul class=’dropdown-menudropdown-menu-right’>
//2.設置菜單的標題(不要加超鏈接,因爲一般標題不可點)
<li class=’dropdown-header’>城市</li>
//3.設置菜單的分割線
<li class=’divider’></li>
//4.設置菜單禁用項
<li class=’disabled’><a href=’#’>豐南市</a></li>
//5.菜單默認顯示(不點擊就拉下來)
<divclass=’dropdown open’>
----按鈕點擊事件
show.bs.dropdown 在將要顯示時立即觸發(點擊時)
shown.bs.dropdown 在下拉菜單完全顯示出來,並且等css動畫完成之後觸發(顯示時)
hide.bs.dropdown 在將要隱藏時,但是還未關閉隱藏時觸發(點擊時)
hidden.bs.dropdown 在下拉菜單完全隱藏之後,並且等css動畫完成之後觸發(隱藏時)
$(‘#btn’).on(‘hide.bs.dropdown’,function(){
console.log(‘我將隱藏了哦’)
})導航欄
-----基本導航標籤
①
<ul class=’nav’>
<li><a href=’#’>新聞</a><li>
<li><a href=’#’>產品</a><li>
<li><a href=’#’>關於</a><li>
</ul>
②
<ul class=’navnav-tabs’>
<li class=’active’><ahref=’#’>首頁</a><li>//active首選狀態:就是不能點
<li><a href=’#’>新聞</a><li>
<li><a href=’#’>產品</a><li>
<li><a href=’#’>關於</a><li>
</ul>
-----風格
表格式:
<ul class=’navnav-tabs’>
膠囊式:
<ul class=’nav nav-pills’>
垂直式:
<ul class=’nav nav-stacked ’>
兩端對齊式:
<ul class=’nav nav-justified ’>
//個別可以嵌套使用: 膠囊垂直式:<ulclass=’nav nav-pills nav-stacked’>
-----禁用導航中的項目(不能點)
<liclass=’disabled’><a href=’#’>新聞</a><li>
-----帶下拉菜單的導航
<ul class="nav nav-tabs">
<li class="active"><ahref="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li class="dropdown">
<a href="#"class="dropdown-toggle" data-toggle='dropdown'>下拉<spanclass="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
</ul>
</li>
</ul>
-----導航條
1.條
<navclass=’navbar navbar-default’>我這裏專門放條上的東西</nav>
//navbar- 樣式很多,常用default,其他的試一試
2.條上的組件
條內部所有組件,用一個容器.container包裹
頭部: .navbar-header
頭部中一般放logo: .navbar-brand
內容: .nav .navbar-nav
內容中的首選: .active
內容中的禁用: .disabled
內容中的正常:不加樣式
<navclass=’navbar navbar-default’>
<div class=’container’>
<div class=’navbar-header’>
<a href=’#’ class=’navbar-brand’>頭部logo</a>
</div>
<ul class=’nav navbar-nav’>
<li class=’active’><a href=’#’>新聞</a></li>
<li ><a href=’#’>資訊</a></li>
<li ><a href=’#’>關於</a></li>
<li class=’disabled’><a href=’#’>發現</a></li>
</ul>
</div>
</nav>
-----將導航條固定在頂部(下面的內容會自動上移)
<navclass=’navbar navbar-default navbar-fixed-top’>
XXXXX
</nav>
<div>我不是導航,我是界面</div>
----將導航條固定在底部
<nav class=’navbar navbar-default navbar-fixed-bottom’>
XXXXX
</nav>
<div>我不是導航,我是界面</div>
-----靜態導航(其實就是和頁面等寬,去掉了圓角)
<nav class=’navbar navbar-default navbar-static-top>
XXXXX
</nav>
<div>我不是導航,我是界面</div>
下拉菜單的滾動監聽插件
----滾動監聽
滾動到響應位置的時候,導航條上的條對應位置以高亮來響應
滾動的盒子加屬性:
data-offset 默認值爲10,固定內容距滾動容器10px以內,就高亮顯示對應菜單
data-spy 設置爲scroll,將設置滾動容器監聽
data-target 設置對應nav的id選擇器,綁定監聽的唯一菜單(只有一個容器時,不設置data-target也可以,多個時就要設置,不然所有都一起響應了)
這裏我做了一個小demo:
(直接複製即可)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤必須放在最前面--> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav id="nav1" class="navbar navbar-default"> <a href='#' class="navbar-brand">簡介</a> <ul class="nav navbar-nav"> <li><a href='#a1'>周杰倫</a></li> <li><a href='#a2'>古龍</a></li> <li><a href='#a3'>林夕</a></li> <li><a href='#a4'>西山居工作室 </a></li> <li><a href='#a5'>帝血弒天</a></li> <li class="dropdown"> <a href="#" data-toggle='dropdown'>城市</a> <ul class="dropdown-menu"> <li><a href='#a6'>北京</a></li> <li><a href='#a7'>成都</a></li> <li><a href='#a8'>上海</a></li> <li><a href='#a9'>閬中</a></li> </ul> </li> </ul> </nav> <nav id="nav2" class="navbar navbar-default"> <a href='#' class="navbar-brand">簡介</a> <ul class="nav navbar-nav"> <li><a href='#a1'>周杰倫</a></li> <li><a href='#a2'>古龍</a></li> <li><a href='#a3'>林夕</a></li> <li><a href='#a4'>西山居工作室 </a></li> <li><a href='#a5'>帝血弒天</a></li> <li class="dropdown"> <a href="#" data-toggle='dropdown'>城市</a> <ul class="dropdown-menu"> <li><a href='#a6'>北京</a></li> <li><a href='#a7'>成都</a></li> <li><a href='#a8'>上海</a></li> <li><a href='#a9'>閬中</a></li> </ul> </li> </ul> </nav> <div data-offset='0' data-spy='scroll' data-target='#nav1' style="padding:0 20px; height:200px; overflow:scroll; position:relative"> <h4 id="a1">周杰倫</h4> <p>周杰倫（Jay Chou），1979年1月18日出生於臺灣省新北市，華語男歌手、詞曲創作人、演員、MV及電影導演、編劇及製作人。2000年，發行首張個人專輯《Jay》。2001年，發行的專輯《范特西》奠定其融合中西方音樂的風格。2002年，舉行“The One”世界巡迴演唱會。2004年，登上央視春晚舞臺，並演唱歌曲《龍拳》。2005年，憑藉動作片《頭文字D》獲得臺灣電影金馬獎、香港電影... >>></p> <h4 id="a2">古龍</h4> <p>古龍，原名熊耀華，籍貫江西，漢族江右民系。1938年6月7日生於香港。 著名武俠小說家，新派武俠小說泰斗，與金庸、梁羽生並稱爲中國武俠小說三大宗師。代表作有《多情劍客無情劍》、《絕代雙驕》、《浣花洗劍錄》等。古龍把武俠小說引入了經典文學的殿堂，將戲劇、推理、詩歌等元素帶入傳統武俠，又將自己獨特的人生哲學融入其中，使中外經典鎔鑄一爐，開創了近代武俠小說新紀元，將武俠文學推上了一個新的高峯。 1985年9月21日，因肝硬化、靜脈出血，古龍在臺灣去世，終年48歲。</p> <h4 id="a3">林夕</h4> <p>林夕，1961年12月7日出生於香港，原名梁偉文。畢業於香港大學文學院中文系。詞作家。 1985年，林夕發表作品《曾經》。1987年，林夕填詞的《無需要太多》入選1988年香港電臺第11屆“十大中文金曲”。1993年，林夕創作歌曲《紅顏白髮》由張國榮演唱並作爲電影《白髮魔女傳》的主題曲，該歌曲獲第三十屆臺灣電影金馬獎最佳原創歌曲。1996年，林夕爲張學友填詞經典名曲《你的名字我的姓氏》，作爲張學友的結婚禮物。1997年，林夕創作的《約定》奪得香港電臺的最佳詞作獎。1999年，爲張國榮創作的《左右手》，該歌曲獲得99年幾乎所有的流行大獎。2008年，在香港《十大中文金曲頒獎音樂會》上獲得代表香港樂壇最高的終身榮譽大獎—“金針獎”。2011年6月，林夕推出書籍《毫無代價唱最幸福的歌》。2012年2月，林夕發表書作《知情識趣》。2014年5月，林夕擔任安徽衛視節目《我爲歌狂》第二季的首席音樂評委。同年，林夕、王菲與製作人張亞東這個鐵三角組合相隔11年再合作，創作歌曲《愛不可及》，該歌曲也是趙寶剛執導的電影《觸不可及》的主題曲 。</p> <h4 id="a4">西山居工作室 </h4> <p>國內最早的遊戲工作室----金山軟件公司西山居工作室，1995年5月成立於珠海。在過去的10年間，西山居憑藉其雄厚的研發實力，以及對遊戲文化內涵、畫面、音樂等方面的深刻理解，共製作了11款經典遊戲產品，秉承“傳承文明、創造歡樂”的製作理念，10年來，從單機遊戲到網絡遊戲，西山居見證了國產電腦遊戲從無到有、從單機到網絡的發展軌跡，而西山居發佈的每一款產品也幾乎都引領了民族遊戲產業走上新的發展方向。</p> <h4 id="a5">帝血弒天</h4> <p>帝血弒天是DNF(地下城與勇士)中狂戰士在50級覺醒成爲獄血魔神，在75級二次覺醒之後的稱謂。 只有"血焚"成功的狂戰士才能夠隨意操控那磅礴的血氣之力化身血魔，從而進階到獄血魔神的更高層次。 過量汲取的血氣噴湧而出的情景確實讓人感到恐怖。 但這卻是狂戰士們必須經過的道路。強大血氣之力已經無法承載於那副弱小的身體裏了，只有經過血氣的淬鍊才能夠真正地掌控這終極的血氣之力。 G.S.D將這種淬鍊稱之爲"血焚"。 而在這過程中，狂戰士們將會承受難以想象的痛苦: 磅礴的血氣之力不但會溢滿整個身體，還將侵蝕他們的精神。從煉獄而出的血魔幻象會在他們的腦海中不斷肆虐，甚至會撕裂吞噬他們的意念，直到狂戰士們使用他們強大的意志融合這血魔幻象，纔算終止。</p> <h4 id="a6">北京</h4> <p>北京，簡稱“京”，是中華人民共和國的首都、直轄市、國家中心城市、超大城市，全國政治中心、文化中心、國際交往中心、科技創新中心，是中國共產黨中央委員會、中華人民共和國中央人民政府、全國人民代表大會、中國人民政治協商會議全國委員會、中華人民共和國中央軍事委員會所在地</p> <h4 id="a7">成都</h4> <p>自己在百度音樂中搜索'成都'倆字你就懂了</p> <h4 id="a8">上海</h4> <p>這是一個多義詞，請在下列義項上選擇瀏覽（共5個義項）(情不自禁的笑了)</p> <h4 id="a9">閬中</h4> <p>閬中，素有“閬苑仙境”、“巴蜀要衝”之譽，唐代詩人杜甫在這裏留下了“閬州城南天下稀”的千古名句。境內擁中國四大保存最完整的古鎮之一的閬中古城，古城建址是完全按照唐代天文風水理論的一座城市，被譽爲“風水古城”</p> </div> </body> </html>
輪播
將幾張同等大小的圖片,按照順序依次播放,就是我們經常看到有些網站的首頁上的效果
-----骨架
<div id="myCarousel"class="carousel slide">
<olclass="carousel-indicators">
<li data-target='#myCarousel'data-slide-to='0' class="active"></li>
<li data-target='#myCarousel'data-slide-to='1'></li>
<li data-target='#myCarousel'data-slide-to='2'></li>
<li data-target='#myCarousel'data-slide-to='3'></li>
</ol>
<divclass="carousel-inner">
<div class="item active">
<img src="img/1.png">
</div>
<div class="item">
<img src="img/2.png">
</div>
<div class="item">
<img src="img/3.png">
</div>
<div class="item">
<img src="img/4.png">
</div>
</div>
<a href="#myCarousel"data-slide='prev' class="carousel-control-left">上一張</a>
<a href="#myCarousel"data-slide='next' class="carousel-control-right">下一張</a>
</div>
//說明:
骨架中的ol就是設置小圓點的 active 默認激活哪一個
div中的img就是要輪播的圖片
錨點是按照順序跳到下(上)一張圖片
data屬性:
data-slide接受關鍵字prev或者next,用來改變圖片
data-slide-to來給輪播底部創建一個原始滑動索引:data-silde-to=’2’:把滑動塊移動到一個特定的索引,索引從0開始計數(放在按鈕上)
data-ride=’carousel’ 總容器設置這個屬性,用戶標記輪播在頁面加載時開始動畫播放(默認5秒)
總容器的自定義屬性:
data-interval 等待時間,默認5000,如果設置爲false就不會自動播放
data-pause 暫停的事件:默認鼠標停留在區域內就暫停播放,離開在開始
data-wrap 默認爲true,是否循環播放
設置方式:
$(‘#myCarousel’).carousel({
interval:1000,//1秒換圖
pause:’hover’,//hover時暫停播放
wrap:false,//只播一次
})
一些方法:
pause 停止輪播
$(‘btn’).on(‘click’,function(){
//點擊按鈕後,停止輪播
$(‘#myCarousel’).carousel(‘pause ’)
})
cycle 循環各幀
$(‘btn’).on(‘click’,function(){
//點擊按鈕後,自動播放
$(‘#myCarousel’).carousel(‘cycle’)
})
number
輪播到指定圖片,從0開始算
$(‘btn’).on(‘click’,function(){
//點擊按鈕後,輪播到第三張
$(‘#myCarousel’).carousel(2)
})
prev 輪播到上一個
$(‘btn’).on(‘click’,function(){
//點擊按鈕後,輪播到上一個
$(‘#myCarousel’).carousel(‘prev ‘)
})
next 輪播到下一個
$(‘btn’).on(‘click’,function(){
//點擊按鈕後,輪播到下一個
$(‘#myCarousel’).carousel(‘next ‘)
})
總容器的兩個事件:
slide.bs.carousel 當調用slide實例方式時(剛要執行滑動時)立即觸發
slid.bs.carousel 當完成一個幻燈片觸發
$(‘#myCarousel’).on(‘slide.bs.carousel ’,function(){
Console.log(‘test’)
})