前言
根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片
这一章我们来讲一下一些组件
一，组件
1.1，字体图标
无处不在的字体图标 如图：
它们在APP页面底部、网站导航条、登录页面或注册页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <div class="container"> <div> <!-- 设置图标 --> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </div> </div> </body> <script src="../js/jquery.js"></script> <script src="../js/bootstrap.min.js"></script> </html>
Bootstrap框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上
1.2，下拉菜单组件
- 用于显示链接列表或有上下文的菜单
- 基本下拉菜单
- 按钮式下拉菜单
1.2.1，基本下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <!-- role="separator" class="divider" 下滑线 --> <li><a href="#">Separated link</a></li> </ul> </div> </body> <script src="../js/jquery.js"></script> <script src="../js/bootstrap.min.js"></script> </html>
1.2.2，按钮式下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </body> <script src="../js/jquery.js"></script> <script src="../js/bootstrap.min.js"></script> </html>
按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离
1.3，导航组件
- 导航可以便于用户查找网站所提供的各种功能服务
- 选项卡导航
- 胶囊式导航
- 自适应导航
- 下拉菜单导航
1.3.1，选项卡导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#">个人中心</a></li> <li><a href="#">商品详情</a></li> <li><a href="#">我的订单</a></li> <li><a href="#">联系客服</a></li> </ul> </div> </body> <script src="../js/jquery.js"></script> <script src="../js/bootstrap.min.js"></script> </html>
1.3.2，胶囊式导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <div class="container"> <ul class="nav nav-pills"> <li class="active"><a href="#">个人中心</a></li> <li><a href="#">商品详情</a></li> <li><a href="#">我的订单</a></li> <li><a href="#">联系客服</a></li> </ul> </div> </body> <script src="../js/jquery.js"></script> <script src="../js/bootstrap.min.js"></script> </html>
1.3.3，自适应导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">首页</a></li> <li><a href="#">购物车</a></li> <li><a href="#">我的订单</a></li> <li><a href="#">联系客服</a></li> </ul> <br> <br> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">首页</a></li> <li><a href="#">购物车</a></li> <li><a href="#">我的订单</a></li> <li><a href="#">联系客服</a></li> </ul> </body> <script src="../js/jquery.js"></script> <script src="../js/bootstrap.min.js"></script> </html>
在大于768px的屏幕上，通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式
