[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 ...
随机推荐
- SpringContextHolder 静态持有SpringContext的引用(如何取得Spring管理的bean )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- 【转】COCOS2D-X之CCHttpRequest下载图片Demo
#include "pthread.h" #pragma comment(lib,"libcurl_imp.lib") #pragma comment(lib, ...
- Android学习系列(23)--App主界面实现
在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...
- IRP_MJ_CREATE
原文链接:http://laokaddk.blog.51cto.com/368606/125553/ MSDN:https://msdn.microsoft.com/library/windows/h ...
- ADB Server Didn’t ACK ,failed to Start Daemon 解决方法
解决方法如下: 1.adb nodaemon server 查看不能执行的原因,输出: cannot bind ‘tcp:5037’ 2.定位到了是端口的问题!是5037端口被占用了! 3.netst ...
- CentOS无损调整home，root磁盘的大小
调整硬盘分区大小想增加root空间,减少home空间. 需要说明的是整个操作需要使用root用户. 1.查看硬盘使用情况. [root@Slave1 /]# df -h Filesystem Size ...
- leetcode@ [79/140] Trie树应用 Word Search / Word Search II
https://leetcode.com/problems/word-search/ class Solution { public: struct Trie{ Trie *next[]; bool ...
- 各种排序算法代码（C语言版）
选择排序 #include <stdio.h> /* * 选择排序 * 稳定性:不稳定 * 时间复杂度:O(N^2) **/ void select_sort(int a[], int l ...
- WebApi Json格式化
两种转换方式: 1.全局设定,针对GlobalConfiguration.Configuration.Formatters.JsonFormatter做设定,位于Global.asax 如: var ...
- A Tour of Go Methods with pointer receivers
Methods can be associated with a named type or a pointer to a named type. We just saw two Abs method ...