指引网

当前位置: 主页 > 网页制作 > HTML >

Bootstrap按钮组简单实现代码

来源:网络 作者:佚名 点击: 时间:2017-07-06 20:53
[摘要]  本文为大家介绍了Bootstrap按钮组简单实现代码,文中给出的代码非常详细,有兴趣的可以参考一下

 

 代码如下 复制代码

<html>

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE-edge">

<metaname="viewport"content="width=device-width,initial-scale=1">

<title>Bootstrap 101 Template</title>

<linkhref="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"rel="external nofollow"rel="stylesheet">

<linkhref="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"rel="external nofollow"rel="stylesheet">

</head>

<body>

<!-- 按钮组 -->

<divclass="btn-group">

<buttontype="button"class="btn btn-default">left</button>

<buttontype="button"class="btn btn-default">center</button>

<buttontype="button"class="btn btn-default">right</button>

</div>

<hr>

 

<!-- 按钮组,垂直 -->

<divclass="btn-group-vertical">

<buttontype="button"class="btn btn-default">left</button>

<buttontype="button"class="btn btn-default">center</button>

<buttontype="button"class="btn btn-default">right</button>

</div>

<hr/>

 

<!-- 按钮组嵌套下拉菜单 -->

<divclass="btn-group-vertical">

<buttontype="button"class="btn btn-default">left</button>

<buttontype="button"class="btn btn-default">center</button>

<buttontype="button"class="btn btn-default">right</button>

 

<divclass="dropdown">

<buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown">

Dropdown<spanclass="caret"></span></button>

 

<ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1">

<lirole="presentation"class="dropdown-header">Dropdown header</li>

<lirole="presentation"><arole="menuitem"tabindex="-1"href="#"rel="external  nofollow"rel="external nofollow">Action</a></li>

<lirole="presentation"class="divider"></li>

<lirole="presentation"><arole="menuitem"tabindex="-1"href="#"rel="external  nofollow"rel="external nofollow">Another action</a></li>

 

</ul>

</div>

</div>

<br/>

<br/>

<br/>

<br/>

<br/>

<!-- 按钮组的组 -->

<divclass="btn-toolbar"role="toolbar">

 

<divclass="btn-group btn-group-lg">

<buttontype="button"class="btn btn-default">left</button>

<buttontype="button"class="btn btn-default">center</button>

<buttontype="button"class="btn btn-default">right</button>

</div>

<hr/>

<divclass="btn-group btn-group-sm">

<buttontype="button"class="btn btn-default">left</button>

<buttontype="button"class="btn btn-default">center</button>

<buttontype="button"class="btn btn-default">right</button>

</div>

<hr/>

<divclass="btn-group">

<buttontype="button"class="btn btn-default">left</button>

<buttontype="button"class="btn btn-default">center</button>

<buttontype="button"class="btn btn-default">right</button>

</div>

<hr/>

<divclass="btn-group btn-group-xs">

<buttontype="button"class="btn btn-default">left</button>

<buttontype="button"class="btn btn-default">center</button>

<buttontype="button"class="btn btn-default">right</button>

</div>

<br/>

 

</div>

 

<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<scriptsrc="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<scriptsrc="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>

</body>

</html>

 

效果图:

------分隔线----------------------------