JS组件Bootstrap开关组与下拉按键详解,BootStrap学习

作者: 韦德国际1946国际网址  发布:2019-06-24

布局组件

啥是开关组?

尽管把一排开关整齐的放在一组
如下

图片 1

image.png

正文先为咱们分享按钮组的选用格局,具体内容如下

JS组件Bootstrap开关组与下拉按键详解,BootStrap学习类别之布局组件。随着上篇的剧情,在上篇给大家介绍了Bootstrap学习连串之使用 Bootstrap Typeahead 组件落实百度下拉效应

下拉按键     

怎么完成?

增多btn-group那些类就足以

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 基本的按钮组</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://www.cyspc.com/uploads/allimg/190624/115Q1I53-1.jpg"></script>
    <script src="http://www.cyspc.com/uploads/allimg/190624/115Q1N26-2.jpg"></script>
</head>
<body>


<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>

</body>
</html>

新手教程在线编辑器

一、按钮组(Button Groups)

Bootstrap,来自 推特,是近些日子最受接待的前端框架。Bootstrap 是依据HTML、CSS、JAVASCLANDIPT 的,它简洁利落,使得 Web 开辟非常高效。

<div class="dropdown">
      <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown">
        帮助
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation">
          <a role="menuitem" tabindex="-1" href="#"> 关于我们 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 关于我们 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 关于我们 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 关于我们 </a>
        </li>
      </ul>
    </div>

1、单个开关组
用.btn-group封装多个带.btn的<button>

官方:

要构建贰个下拉菜单,首先,要求二个div加class(dropdown)来兼容全数代码(不然下拉菜单定位找不到),然后在加四个触及下拉菜单的开关(恐怕a标签),再加一个下拉菜单ul

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 

示例:(本文突显:Open Source Projects by 推特(TWTR.US))

触发者样式: .dropdown-toggle ; 属性:data-toggle=”dorpdown”

2、三个开关组
将多个<div class="btn-group">放进<div class="btn-toolbar">中。

花色源码:(点击Download ZIP下载typeahead.js-master.zip)

美食指南样式: .dropdown-menu 属性:role=”menu” aria-labelledby='id'

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 

先给大家显示下效果图:

其他:role=”presentation”; role=”menuitem”

3、垂直开关组
向.btn-group添加.btn-group-vertical。

图片 2

体制: .divider 分割线; .dropdown-header:下拉菜单底部(不可点击); .dropdown-menu-right:向右对齐的美食做法; .dropup:上拉样式(给父类容器加多)

<div class="btn-group btn-group-vertical"> 
 ... 
</div> 

1.实现

按钮组

二、下拉开关(Button Dropdowns)

HTML

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:JS组件Bootstrap开关组与下拉按键详解,BootStrap学习

关键词: JavaScript 让前端飞 伟德国际1946111