[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 ...
随机推荐
- Webform——Repeater多表联合显示
对于一个表里,通过外键连接如何显示另一个表的数据,前Winform里可以用封装类来实现. 对于Webform,可以用封装类,也可以用Repeater的ItemDataBound事件(//在项被绑定数据 ...
- (十三)学习CSS之两个class连一起隔空格和逗号
1.时常见到css的这两种种写法: a.两个class隔空格连一起: .class1 .class2{......} b.两个class隔逗号连一起: .class1,.class2{......} ...
- 使用ServiceStackRedis链接Redis简介
注:关于如何在windows,linux下配置redis,详见这篇文章:) 目前网上有一些链接Redis的C#客户端工具,这里介绍其中也是目前我们企业版产品中所使用的ServiceStackRedis ...
- 使用Spring Profile和Mybatis进行多个数据源（H2和Mysql）的切换
最近在做WebMagic的后台,遇到一个问题:后台用到了数据库,本来理想情况下是用Mysql,但是为了做到开箱即用,也整合了一个嵌入式 数据库H2.这里面就有个问题了,如何用一套代码,提供对Mysql ...
- 13、Android的多线程与异步任务
课程目标:学习Android中异步操作的三大方式 重点难点:Handler与线程的关系 Handler消息队列的实现 考核目标: 使用Handler是异步的,它会建立新线程么? no Handle ...
- dephi WaitForMultipleObjects 用法
在Delphi中WaitForMultipleObjects的使用 procedure ThreadTest;stdcall; var Handles:TWOHandleArray; //Hand ...
- mac系统 虚拟机安装教程
http://jingyan.baidu.com/article/ff411625b9011212e48237b4.html
- ASCII编码：Linux&Windows
我们的服务器为linux系统,日志中的字段通常会用不同分隔符来做分隔,在不同操作系统编码格式下查看也会有不同的体现,甚至会出现所谓的乱码.我在xshell5下常用的编码格式Unicode(UTF-8) ...
- Java Web程序工作原理
Web开发的最重要的基本功能是HTTP:Java Web开发的最重要的基本功是Servlet Specification.HTTP和Servlet Specitication对于Web Server和 ...
- HDU 1561-The more, The Better（树状背包）
题意: n个城堡,每个有一定的财富,有些城堡不能直接攻克,要攻克这些城堡必须先攻克其他某一个特定的城堡,求应攻克哪m个城堡,获得最大财富. 分析:dp[i][j],以i为根的子树,攻克j个城堡,获得的 ...