Bootstrap 3 按钮标签实例代码
本文给大家介绍按钮标签的实例代码,具体内容如下:
通过将按钮类添加到<a>, <button>, <input>来实现按钮样式
<aclass="btnbtn-default"href="#"rel="externalnofollow"role="button">Link</a> <buttonclass="btnbtn-default"type="submit">Button</button> <inputclass="btnbtn-default"type="button"value="Input"> <inputclass="btnbtn-default"type="submit"value="Submit">
仅仅<button>适用于导航条以及导航条控件
如果<a>被作为按钮使用而不是链接,请注意添加role="button"
高度推荐使用<button>
选项
<!--Standardbutton--> <buttontype="button"class="btnbtn-default">Default</button> <!--Providesextravisualweightandidentifiestheprimaryactioninasetofbuttons--> <buttontype="button"class="btnbtn-primary">Primary</button> <!--Indicatesasuccessfulorpositiveaction--> <buttontype="button"class="btnbtn-success">Success</button> <!--Contextualbuttonforinformationalalertmessages--> <buttontype="button"class="btnbtn-info">Info</button> <!--Indicatescautionshouldbetakenwiththisaction--> <buttontype="button"class="btnbtn-warning">Warning</button> <!--Indicatesadangerousorpotentiallynegativeaction--> <buttontype="button"class="btnbtn-danger">Danger</button> <!--Deemphasizeabuttonbymakingitlooklikealinkwhilemaintainingbuttonbehavior--> <buttontype="button"class="btnbtn-link">Link</button>
尺寸
通过添加.btn-lg,.btn-sm,.btn-xs来实现尺寸
<p> <buttontype="button"class="btnbtn-primarybtn-lg">Largebutton</button> <buttontype="button"class="btnbtn-defaultbtn-lg">Largebutton</button> </p> <p> <buttontype="button"class="btnbtn-primary">Defaultbutton</button> <buttontype="button"class="btnbtn-default">Defaultbutton</button> </p> <p> <buttontype="button"class="btnbtn-primarybtn-sm">Smallbutton</button> <buttontype="button"class="btnbtn-defaultbtn-sm">Smallbutton</button> </p> <p> <buttontype="button"class="btnbtn-primarybtn-xs">Extrasmallbutton</button> <buttontype="button"class="btnbtn-defaultbtn-xs">Extrasmallbutton</button> </p>
通过添加.btn-block来实现块级按钮
<buttontype="button"class="btnbtn-primarybtn-lgbtn-block">Blocklevelbutton</button> <buttontype="button"class="btnbtn-defaultbtn-lgbtn-block">Blocklevelbutton</button>
激活状态
<buttontype="button"class="btnbtn-primarybtn-lgactive">Primarybutton</button> <buttontype="button"class="btnbtn-defaultbtn-lgactive">Button</button>
禁用状态
IE9以下无法兼容
<buttontype="button"class="btnbtn-lgbtn-primary"disabled="disabled">Primarybutton</button> <buttontype="button"class="btnbtn-defaultbtn-lg"disabled="disabled">Button</button>
以上所述是小编给大家介绍的Bootstrap3按钮标签实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!