Bootstrap(3)__Bootstrap基础<导航,轮播,下拉表>

来源：互联网发布：im源码编辑：程序博客网时间：2024/06/05 03:49

下拉菜单

<div id=’btn’ class="dropdown">//dropdoup上啦

<button class="btn btn-default"data-toggle="dropdown">//开关

下拉菜单<span class="caret"></span>

</button>

</ul>

</div>

//1.菜单项向右对齐,默认是dropdown-menu-left

//2.设置菜单的标题(不要加超链接,因为一般标题不可点)

//3.设置菜单的分割线

//4.设置菜单禁用项

//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>

②

<li class=’active’><ahref=’#’>首页</a><li>//active首选状态:就是不能点

</ul>

-----风格

表格式:

胶囊式:

垂直式:

两端对齐式:

//个别可以嵌套使用: 胶囊垂直式:<ulclass=’nav nav-pills nav-stacked’>

-----禁用导航中的项目(不能点)

<liclass=’disabled’><a href=’#’>新闻</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’>

<a href=’#’ class=’navbar-brand’>头部logo</a>

</div>

</ul>

</div>

</nav>

-----将导航条固定在顶部(下面的内容会自动上移)

<navclass=’navbar navbar-defaultnavbar-fixed-top’>

XXXXX

</nav>

<div>我不是导航,我是界面</div>

----将导航条固定在底部

XXXXX

</nav>

<div>我不是导航,我是界面</div>

-----静态导航(其实就是和页面等宽,去掉了圆角)

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>

轮播

将几张同等大小的图片,按照顺序依次播放,就是我们经常看到有些网站的首页上的效果

-----骨架

<olclass="carousel-indicators">

</ol>

<divclass="carousel-inner">

</div>

</div>

</div>

</div>

</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,//只播一次

})