Bootstrap中button用法快速入门

Bootstrap中button的用法

1.可以使用的class

class	作用
.btn	基本样式
.btn-default	默认样式
.btn-primary	原始样式
.btn-success	成功
.btn-info	信息
.btn-warning	警告
.btn-danger	危险操作
.btn-link	连接样式
.btn-lg	大按钮
.btn-sm	小按钮
.btn-xs	超小按钮
.btn-block	块按钮
.active	被点击
.disabled	禁用

示例

<button type="button" class="">nullbutton>
<button type="button" class="btn">btnbutton>
<button type="button" class="btn-default">btn-defaultbutton>
<button type="button" class="btn btn-default">btn btn-defaultbutton>
<button type="button" class="btn-info">btn-infobutton>
<button type="button" class="btn btn-info">btn btn-infobutton>

<button type="button" class="btn btn-success">successbutton>
<button type="button" class="btn btn-warning">warningbutton>
<button type="button" class="btn btn-primary">primarybutton>
<button type="button" class="btn btn-link">linkbutton>
<button type="button" class="btn btn-block">blockbutton>

<button type="button" class="btn btn-success btn-lg btn-block disabled">btn btn-success btn-lg btn-block disabledbutton>
<button type="button" class="btn btn-danger btn-block btn-sm active">btn btn-danger btn-block btn-sm activebutton>

效果

2.按钮组

结构

<div class="btn-group ">
			<button type="button" class="btn btn-primary">button1button>
			<button type="button" class="btn btn-primary">button2button>
			<button type="button" class="btn btn-primary">button3button>
		div>

垂直排列（btn-group-vertical）

<div class="btn-group btn-group-lg btn-group-vertical">
    <button type="button" class="btn btn-primary">button1button>
    <button type="button" class="btn btn-primary">button2button>
    <button type="button" class="btn btn-primary">button3button>
div>

大小调整（btn-group-lg/sm/xs）

<div class="btn-group btn-group-lg ">
    <button type="button" class="btn btn-primary">button1button>
    <button type="button" class="btn btn-primary">button2button>
    <button type="button" class="btn btn-primary">button3button>
div>

自适应大小

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">helloa>
    <a href="#" class="btn btn-primary">helloa>
    <a href="#" class="btn btn-primary">helloa>
    <a href="#" class="btn btn-primary">helloa>
div>

注意：button的类还可以用在a、input标签上，使用a标签是直接使用btn-group包裹即可

但如果使用button，则应该按照下面的格式来写代码，否则会出现浏览器兼容性问题

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">button1button>
    div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">button2button>
    div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">button3button>
    div>
div>



<div class="btn-group btn-group-justified">
    <button type="button" class="btn btn-primary">button1button>
    <button type="button" class="btn btn-primary">button2button>
    <button type="button" class="btn btn-primary">button3button>
div>