[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 ...
随机推荐
- javascript 库
http://overapi.com/javascript/ 查javascript http://slimerjs.org/ 自动测试? http://www.cnblogs.com/lhb25/p ...
- linux 读取input输入设备demo
/******************************************************************* * linux 读取input输入设备demo * 说明: * ...
- I.MX6 U-boot PWM hacking
/******************************************************************************* * I.MX6 U-boot PWM ...
- sql null值
SQL Server 提供 SET CONCAT_NULL_YIELDS_NULL { ON | OFF } 来控制 null 与其它字符串连接的行为. 当 SET CONCAT_NULL_YIELD ...
- SharePoint2010 自定义代码登录方法
转:http://yysyb123.blog.163.com/blog/static/192050472011382421717/ SharePoint2010 自定义代码登录方法 (自定义Form验 ...
- CSS遮罩——如何在CSS中使用遮罩
Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...
- C# 中的装箱与拆箱
转角撞倒猪 原文 C# 中的装箱与拆箱 装箱:将一个数据项(副本)从栈中自动复制到堆中的行为. int i = 8; object o = i; // 装箱 // 首先在堆中开辟出一片区域,再将 ...
- 9、四大组件之四-Broadcast Receiver
课程目标: 了解Android消息机制 掌握Broadcast发送消息的两种类型 掌握BroadcastReceiver接收消息的编程 重点难点: sendOrderedBroadcast()的理解 ...
- myeclipse2015不能启动tomcat，提示： Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at local
myeclipse2015不能启动tomcat,提示: Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at local ...
- 理解public，protected 以及 private
经常看到在类中看到public,protected,private以及它们在继承中表示的一些访问范围,很容易搞糊涂.我们首先要明白下面几点. 1.类的一个特征就是封装,public和private作用 ...