[Bootstap] 9. Dropdown
Dropdown Arrow Class
In order to create a down arrow like this: , what class should we apply to the element?
Answer: caret
Opening Dropdowns
The Bootstrap Dropdown plugin will toggle a specific class on our element in order to make the dropdown visible. Will the following dropdown menu be visible when the page loads?
<div class='btn-group in'>
<a href='book.html' data-target='#' data-toggle='dropdown' class='btn btn-default'>Boot Tickets Now <span class='caret'></span></a> <ul class='dropdown-menu'>
<li><a href='book-teleporter.html'>Teleporter</a></li>
<li><a href='book-elevator.html'>Orbital Elevator</a></li>
<li><a href='book-rocketbus.html'>RocketBus</a></li>
</ul>
</div>
Yes, it will be visible when the page loads.
No, it will not be visible when the page loads.
If you want it open, add a 'open' class to the ul.
Take a Tour Today!
We can use the Dropdown Plugin for more than just navigation components. One other place we could use it is on our "Take the Tour" button. Follow the tasks below to convert this button into a Dropdown.
Within our "Take the Tour" button, we'll want to show a little down arrow so our travelers are encouraged to click on it. Add this icon after the text.
<!DOCTYPE html>
<html>
<head>
<title>Blasting Off With Bootstrap</title>
<link href='css/bootstrap.min.css' rel='stylesheet'>
<link href='css/main.css' rel='stylesheet'>
</head>
<body>
<div class='navbar navbar-default navbar-static-top'>
<div class='container'>
<a href='/' class='navbar-brand'>Blasting Off With Bootstrap</a> <ul class='nav navbar-nav navbar-right'>
<li><a href='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</a></li>
<li><a href='about.html'>About</a></li>
</ul>
</div>
</div>
<div class='container'>
<div class='row well well-lg'>
<div class='col-md-6'>
<h2>The Fastest Way to Space</h2>
<p class='lead'>Make your way to space in the comfort of your own rocket, elevator or transporter.</p> <div class='btn-group'>
<button type='button' class='btn btn-default btn-lg'>
Take the Tour
</button>
<ul>
<li><a href='#'>Transporter</a></li>
<li><a href='#'>Orbital Elevator</a></li>
<li><a href='#'>RocketBus</a></li>
<li><a href='#'>Learn More</a></li>
</ul>
</div> <button type='button' class='btn btn-lg btn-primary'>Book Tickets Now</button>
</div>
<div class='col-md-6 visible-md visible-lg'>
<img src='images/img-header.jpg' alt='Blast off with Bootstrap' />
</div>
</div>
<div class='row text-center features'>
<div class='col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0'>
<i class='glyphicon glyphicon-briefcase'></i>
<h3>Book Today!</h3>
<p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.</p>
</div> <div class='col-sm-4 col-xs-6'>
<i class='glyphicon glyphicon-random'></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!</p>
</div> <div class='col-sm-4 col-xs-6'>
<i class='glyphicon glyphicon-send'></i>
<h3>RocketBus®</h3>
<p>For cheapest fares, catch the next RocketBus® to the stars. Cheaper on your wallet, and easiest way to make friends.</p>
</div>
</div>
</div>
<div class='quote'>
<div class='container'>
<blockquote>
<p>Any sufficiently advanced technology is indistinguishable from magic.</p>
<footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer>
</blockquote>
</div>
</div>
<div class='container transport-systems'>
<div class='row'>
<div class='col-md-10 col-md-offset-1'>
<h2>Our Transport Systems</h2>
<p>Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.</p>
</div>
</div> <div class='row text-center'>
<div class='transporter col-md-3 col-md-offset-1 well well-sm'>
<h3>Transporter</h3>
<ul class='list-unstyled'>
<li>8 second travel time</li>
<li>Chance of death only 1 in 7,593</li>
<li>Low price of only $15.99!</li>
</ul>
<p><button class='btn btn-info'><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>
</div>
<div class='space-elevator col-md-3 col-md-offset-1 well well-sm'>
<h3>Space Elevator</h3>
<ul class='list-unstyled'>
<li>8 hour scenic ride</li>
<li>Only 1 horrific death per 12,456</li>
<li>Only $45.99 if you book today!</li>
</ul>
<p><button class='btn btn-info'><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p>
</div>
<div class='rocketbus col-md-3 col-md-offset-1 well well-sm'>
<h3>RocketBus</h3>
<ul class='list-unstyled'>
<li>8 minute scenic ride</li>
<li>Plunging death rate of under 1/100k</li>
<li>$74.99 lets you blast off today!</li>
</ul>
<p><button class='btn btn-info'><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p>
</div>
</div>
</div>
<div class='quote'>
<div class='container'>
<blockquote>
<p>A dream that became a reality and spread throughout the stars.</p>
<footer>Captain Kirk in <cite title="Source Title">Whom Gods Destroy</cite></footer>
</blockquote>
</div>
</div>
<div class='container'>
<div class='row'>
<div class='col-md-8'>
<h2>Plan Your Trip Today!</h2> <ul class='nav nav-tabs'>
<li class='active'><a href='#time'>Todays Times</a></li>
<li><a href='#deals'>Hot Deals</a></li>
<li><a href='#forecast'>Forecast</a></li>
</ul> <div class='tab-content'>
<div class='tab-pane fade active' id='time'>
<p>Todays Time here</p>
</div>
<div class='tab-pane fade' id='deals'>
<p>Deals here</p>
</div>
<div class='tab-pane fade' id='forecast'>
<p>Forecast</p>
</div>
</div>
</div> <div class='col-md-3 col-md-offset-1'>
<div class='panel-group'>
<div class='panel panel-success'>
<div class='panel-heading'>
<h4 class='panel-title'>
<a data-toggle='collapse' data-parent='.panel-group' href='#systemsOperational'>All Systems Operational</a>
</h4>
</div>
<div id='systemsOperational' class='panel-collapse collapse in'>
<div class='panel-body'>
<p>All systems are operational</p>
<ul class='list-unstyled'>
<li><i class='glyphicon glyphicon-ok'></i> Transporters</li>
<li><i class='glyphicon glyphicon-ok'></i> Space Elevator</li>
<li><i class='glyphicon glyphicon-ok'></i> RocketBus</li>
</ul>
</div>
</div>
</div> <div class='panel panel-warning'>
<div class='panel-heading'>
<h4 class='panel-title'>
<a data-toggle='collapse' data-parent='.panel-group' href='#weatherAlert'>Weather Alert</a>
</h4>
</div>
<div id='weatherAlert' class='panel-collapse collapse'>
<div class='panel-body'>
<p>The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:</p>
<ul class='list-unstyled'>
<li><strong>February 9th, 21:43</strong></li>
<li><strong>May 18, 19:82</strong></li>
<li><strong>July 4, 08:42</strong></li>
</ul>
</div>
</div>
</div> <div class='panel panel-danger'>
<div class='panel-heading'>
<h4 class='panel-title'>
<a data-toggle='collapse' data-parent='.panel-group' href='#transportationWarning'>Transportation Generals Warning: Transporters</a>
</h4>
</div>
<div id='transportationWarning' class='panel-collapse collapse'>
<div class='panel-body'>
<p>Technically, transporting means making a clone of yourself and killing off the other one. If you believe in a soul, you should be aware of this fact before attempting travel using a transporter.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='footer'>
<div class='container'>
<div class='row'>
<div class='col-md-3 col-sm-4 col-xs-6'>
<h4>Who We Are</h4>
<p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>
<p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
</div> <div class='col-md-offset-1 col-sm-2 col-xs-6'>
<h4>Links</h4>
<ul class='list-unstyled'>
<li><a href='/'>Home</a></li>
<li><a href='tickets.html'>Tickets</a></li>
<li><a href='stations.html'>Stations</a></li>
</ul>
</div> <div class='clearfix visible-xs'></div> <div class='col-sm-2 col-xs-6'>
<h4>Stay in Touch</h4>
<ul class='list-unstyled'>
<li><a href='about.html'>About</a></li>
<li><a href='contact.html'>Contact Us</a></li>
<li><a href='/blog'>Blog</a></li>
<li><a href='http://twitter.com/codeschool'>Twitter</a></li>
<li><a href='http://facebook.com/codeschool'>Facebook</a></li>
</ul>
</div> <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>
<h4>Contact Us</h4>
<ul class='list-unstyled'>
<li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li>
<li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li>
<li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>
</ul>
<p>Blasting Off With Bootstrap ©2214.</p>
</div>
</div>
</div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script>
$(function() {
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
</body>
</html>
Within our "Take the Tour" button, we'll want to show a little down arrow so our travelers are encouraged to click on it. Add this icon after the text.
<button type='button' class='btn btn-default btn-lg'>
Take the Tour<span class="caret"></span>
</button>
Our list of links for this Dropdown is currently unstyled. Give it a Bootstrap class to indicate it is a Dropdown Menu.
<ul class="dropdown-menu">
<li><a href='#'>Transporter</a></li>
<li><a href='#'>Orbital Elevator</a></li>
<li><a href='#'>RocketBus</a></li>
<li><a href='#'>Learn More</a></li>
</ul>
In order to tie in the structure and behavior, we'll need to add a specific attribute to our button to let Bootstrap know this is a Dropdown. Add that attribute and value.
<button type='button' class='btn btn-default btn-lg' data-toggle="dropdown">
Take the Tour<span class="caret"></span>
</button>
Our Dropdown is working! But it seems a little weird we have our 3 transportation methods, and an unrelated link to "Learn More" in there. Go ahead and add a divider before the "Learn More" link.
<li><a href='#'>Transporter</a></li>
<li><a href='#'>Orbital Elevator</a></li>
<li><a href='#'>RocketBus</a></li>
<li class="divider"></li>
<li><a href='#'>Learn More</a></li>
Lastly, we want to indicate that the "Take the Tour" button will popup a dropdown rather than taking us to a new page. We could do this by adding a Glyphicon, but in this case there's an easier way with a class provided by Bootstrap.
Checkout the Bootstrap documentation on Button Dropdowns and add the dropdown-toggle class to the appropriate place.
<button type='button' class='btn btn-default btn-lg dropdown-toggle' data-toggle="dropdown">
Take the Tour<span class="caret"></span>
</button>
[Bootstap] 9. Dropdown的更多相关文章
- 基于Bootstrap里面的Button dropdown打造自定义select
最近工作非常的忙,在对一个系统进行改版.项目后台是MVC1.0开发的,但是前端部分已经改过几个版本,而已之前的设计师很强大,又做设计又做前端开发.而已很时尚和前沿,使用了一直都很热门的Bootstra ...
- AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown
在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义. 先说Buttons,它是一组按钮,用来实现form表单中的 ...
- Bootstrap源码分析之dropdown
源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...
- Mega Dropdown - 带子分类的响应式下拉菜单
当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带 ...
- DEV:GridControl 筛选复选框 Checked Dropdown更改数据源
用了DEV网站给的图: 起初,我并不知道这个圈起来的部分叫做Filter Dropdown,这个List里面的数据默认与GridControl中的数据保持一致的. 现在需要对这个FilterDropd ...
- Magento添加一个下拉登陆菜单Create Magento Dropdown Login in a few minutes
Dropdown login forms are not a feature many online stores use, but in some cases they could be quite ...
- semantic-ui dropdown is not a function
按照semantic-ui官网示例,编写了如下示例,却不见效果. <div class="ui secondary menu"> <a class="i ...
- JSF 2 multiple select dropdown box example
In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...
- JSF 2 dropdown box example
In JSF, <h:selectOneMenu /> tag is used to render a dropdown box – HTML select element with &q ...
随机推荐
- 函数flst_init
/** The null file address */UNIV_INTERN fil_addr_t fil_addr_null = {FIL_NULL, 0}; /***************** ...
- poj1062
经典的图论建模题: 先拿开的等级问题不看: 每个物品本身的价格就是有一个自定义源点到这个点距离: 有了A物品B物品优惠为W就代表由B到A的有向路权值为W: 最后的最小花费就是源点的点1的最短路径(酋长 ...
- multiselect2side双向选择列表插件改进版
为了满足实际程序需要,特在multiselect2side插件的基础上改进已满足异步加载(如MVC)的需要.增加了加载url.saveurl属性以及控件实时刷新加载数据方法,请注意下面红色标记部分. ...
- BZOJ_1020_[SHOI2008]_安全的航线flight_(计算几何+二分)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1020 给出一条航线(折线),给出\(c\)个陆地(多边形).求航线上距离陆地的最近距离最远的距 ...
- MySQL全世界最流行的开源数据库软件
誉天全国首推全球市场占有率第二的数据库——MySQL培训课程,阿里巴巴.新浪等知名企业正在使用MySQL数据库系统,而这方面的人才需求也是供不应求,誉天作为国内2014年首批ORACLE官方授权MyS ...
- asp.net(vs2005) + Sql2000 缓存依赖
1.开启数据库缓存依赖支持 开始,运行,cmd 输入 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_regsql -S localhost ...
- 浅谈HTTP中Get、Post、Put与Delete的区别
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- SPOJ 962 Intergalactic Map (从A到B再到C的路线)
[题意]在一个无向图中,一个人要从A点赶往B点,之后再赶往C点,且要求中途不能多次经过同一个点.问是否存在这样的路线.(3 <= N <= 30011, 1 <= M <= 5 ...
- 多线程程序设计学习（11）Two-phapse-Termination pattern
Two-phapse-Termination[A终止B线程] 一:Two-phapse-Termination的参与者--->A线程--->B线程 二:Two-phapse-Termina ...
- SharePoint 2010 出错！ HTTP Error 503. The service is unavailable
转:http://544729.blog.51cto.com/534729/464087 昨天,公司的sharepoint 2010 无法打开,提示HTTP Error 503. The servic ...