Bootstrap布局组件

(一)Bootstrap 字体图标

已经整理成为HTML文件存在G盘,名为Bootstrap字体图标。

(二)Bootstrap 下拉菜单

class .dropdown 下拉菜单

具体用法:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownmenu" data-toggle="dropdown">主题<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"><li>java</li> <li>C#</li> <li>C++</li> <li>C</li> </ul></div></body></html>

class .pull-right 向右对齐下拉菜单

class .dropdown-header 向下拉菜单的标签区域添加标签

例子:
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownmenu" data-toggle="dropdown">主题<span class="caret"></span></button>
  <ul class="dropdown-menu pull-right" role="menu">
    <li class="dropdown-header">下拉菜单标签1</li>
    <li><a herf="#">java</a></li>
    <li><a herf="#">C#</a></li>
    <li class="dropdown-header">下拉菜单标签2</li>
    <li><a herf="#">C++</a></li>
    <li><a herf="#">C</a></li>
  </ul>
</div>
</body>
</html>
(三)Bootstrap 按钮组

class .btn-group 按钮组

class .btn-toolbar 把几组按钮组结合成为一个更复杂的组件

class .btn-group-lg/sm/xs 按钮组的大小

class .btn-group-vertical 按钮组垂直摆放

可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。当想让下拉菜单与一系列按钮组合使用时,就会用到这个。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值