<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>图标菜单按钮组件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.a{ height: 50px; width: 200px; border: 1px solid #ccc; background-color: #eee; }
</style>
</head>
<body style="margin: 50px;">
<!-- <i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span> -->
<!-- <button class="btn btn-default btn-lg">
<i class="glyphicon glyphicon-star"></i>
</button> -->
<!-- <div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="###">首页</a></li>
<li><a href="###">资讯</a></li>
<li><a href="###">产品</a></li>
<li><a href="###">关于</a></li>
</ul>
</div> -->
<!-- <div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="###">首页</a></li>
<li><a href="###">资讯</a></li>
<li><a href="###">产品</a></li>
<li><a href="###">关于</a></li>
</ul>
</div> -->
<!-- <div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="###">首页</a></li>
<li><a href="###">资讯</a></li>
<li><a href="###">产品</a></li>
<li class="divider"><a href="###">产品</a></li>
<li class="disabled"><a href="###">关于</a></li>
</ul>
</div> -->
<!-- <div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button class="btn btn-default">左</button>
<button class="btn btn-default">中</button>
<button class="btn btn-default">右</button>
</div>
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">center</button>
<button class="btn btn-default">right</button>
</div>
</div> -->
<!-- <div class="btn-group">
<button class="btn btn-default">左</button>
<button class="btn btn-default">中</button>
<button class="btn btn-default">右</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="###">首页</a></li>
<li><a href="###">资讯</a></li>
<li><a href="###">产品</a></li>
<li class="divider"><a href="###">产品</a></li>
<li class="disabled"><a href="###">关于</a></li>
</ul>
</div>
</div> -->
<!-- <div class="btn-group-vertical">
<button class="btn btn-default">左</button>
<button class="btn btn-default">中</button>
<button class="btn btn-default">右</button>
</div> -->
<!-- <div class="btn-group-justified">
<a class="btn btn-default">左</a>
<a class="btn btn-default">中</a>
<a class="btn btn-default">右</a>
</div>
<div class="btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">左</button>
</div>
<div class="btn-group">
<button class="btn btn-default">中</button>
</div>
<div class="btn-group">
<button class="btn btn-default">右</button>
</div>
</div> -->
<div class="btn-group">
<button class="btn btn-default">下拉菜单</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="###">首页</a></li>
<li><a href="###">资讯</a></li>
<li><a href="###">产品</a></li>
<li class="divider"><a href="###">产品</a></li>
<li class="disabled"><a href="###">关于</a></li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
效果图：
相关推荐
这个"bootstrap相关组件文件全集"包含了Bootstrap 3.3.7版本的所有核心组件和资源，是前端开发者的重要工具箱。 Bootstrap 3.3.7是Bootstrap的第三个主要版本，它的核心特性包括响应式布局、移动设备优先的策略以及...
第一章 bootstrap介绍 第二章 排版样式 第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式...第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章，后面带开发实例！
Bootstrap是世界上最受欢迎的前端开发框架，它为开发者提供了丰富的组件和设计工具，使得构建响应式、移动优先的网站变得简单高效。在第22章"Bootstrap 首页内容[上]"中，我们将会深入探讨如何利用Bootstrap创建一个...
5. **表单**：Bootstrap提供了预格式化的表单组件，如输入框、选择器、复选框和单选按钮，以及表单布局工具，帮助创建功能性和美观的表单。 6. **卡片（Card）**：卡片是Bootstrap中的多功能组件，常用于展示内容，...
6. **第7章 图标菜单和按钮组件**：Bootstrap提供了大量的图标集，可以方便地用于导航菜单和按钮，增强用户体验。 7. **第11章 进度条、媒体对象和Well组件**：进度条显示任务的完成程度，媒体对象则帮助组织媒体...
3. **按钮和按钮组**：Bootstrap提供了各种预定义的按钮样式，包括普通按钮、带图标的按钮、下拉菜单按钮等。按钮组（`btn-group`）则可以将多个按钮组合在一起，形成一个单元。 4. **表单**：Bootstrap的表单组件...
Bootstrap是由Twitter开发并开源的一款CSS/HTML/JS框架，它提供了丰富的预设样式、组件和JavaScript插件，大大简化了网页的开发过程。其主要特点包括响应式设计、网格系统、易于定制和丰富的UI元素。 2. **响应式...
在实践中，你可以尝试创建一个完整的网站，包括首页、关于我们、服务介绍、联系我们等页面，充分利用Bootstrap 3 的组件和布局来设计和构建。此外，还可以与其他库如jQuery、AngularJS等配合，实现更复杂的交互功能...
Bootstrap是由Twitter开发并开源的，它提供了一系列预先设计的CSS样式、JavaScript组件和字体图标，使得开发者可以快速地创建具有现代感的网页设计。在本课程中，你将了解到以下关键知识点： 1. **响应式设计**：...
15. **自定义字体和图标** (`glyphicons`): Bootstrap早期版本包含 Glyphicons 图标库，但现在推荐使用第三方图标库如 Font Awesome 或 Material Icons。 16. **媒体对象** (`media object`): `.media` 类用于创建...
这个框架由Twitter的开发者创建，旨在简化Web开发过程，提供一套预先设计的组件和样式，使得开发者能够快速构建美观且功能强大的网页。Bootstrap的核心特性包括网格系统、表单元素、导航、按钮、图标等，同时它还...
Bootstrap 组件、Bootstrap 字体图标、Bootstrap 下拉菜单、Bootstrap 按钮组、Bootstrap 按钮下拉菜单、Bootstrap 输入框组、Bootstrap 导航元素、Bootstrap 导航栏、Bootstrap 面包屑导航、Bootstrap 分页、...
2. **预定义的组件**：Bootstrap包含一系列预先设计的UI组件，如导航条、下拉菜单、按钮组、模态框、警告提示、表单元素等，这些组件大大简化了网页的开发过程。 3. **样式和排版**：Bootstrap提供了丰富的CSS类，...
3. **Components**：Bootstrap 3.0.0 包含一系列可重用的UI组件，如导航栏、下拉菜单、按钮组、表单、模态框、警告提示、分页、图像轮播等。这些组件大大简化了开发过程，因为它们已经预先进行了样式化和优化，只需...
7. **扩展工具**：Bootstrap生态系统中有许多第三方插件和扩展，如Bootswatch提供预设的主题，Font Awesome提供图标集，以及各种增强功能的库，如Bootstrap Datepicker和Bootstrap Select等。 8. **最佳实践**：...
基于Bootstrap的后台模板，是专为网站管理界面设计的用户界面模版，通常包括各种页面布局、导航菜单、表单元素、图表、按钮、图标和其他组件，以提升后台管理系统的视觉效果和用户体验。 Bootstrap的核心特点包括：...
7. **字体图标**：Bootstrap 3.3.4集成了Glyphicons字体图标库，提供了大量矢量图标供开发者使用。 8. **兼容性**：Bootstrap 3.3.4对主流浏览器有良好的支持，包括Chrome、Firefox、Safari、Edge以及IE9及以上版本...