Bootstrap响应式前端框架笔记五——按钮

Bootstrap响应式前端框架笔记五——按钮

    Bootstrap中预设了default，primary，info，warning，danger和link6种按钮风格，示例以下：

<p>Bootstrap中预设的按钮样式以下</p>
		<button type="button" class="btn btn-default">正常</button>
		<button type="button" class="btn btn-primary">重要</button>
		<button type="button" class="btn btn-success">成功</button>
		<button type="button" class="btn btn-info">信息</button>
		<button type="button" class="btn btn-warning">警告</button>
		<button type="button" class="btn btn-danger">危险</button>
		<button type="button" class="btn btn-link">连接</button>

效果以下：

能够为按钮元素添加btn-lg，btn-sm，btn-xs类来进行按钮尺寸的设置，示例以下：

<p>设置按钮的大小</p>
		<button type="button" class="btn btn-default btn-lg">正常</button>
		<button type="button" class="btn btn-primary">重要</button>
		<button type="button" class="btn btn-success btn-sm">成功</button>
		<button type="button" class="btn btn-info btn-xs">信息</button>

效果以下图：

使用btn-block类能够将按钮设置为充满整个父元素，示例以下：

<p>使用btn-block类能够将按钮设置为充满父元素</p>
		<button type="button" class="btn btn-default btn-block">正常</button>
		<button type="button" class="btn btn-primary btn-block">重要</button>

效果以下：

须要注意：当button标签被用户点击时，按钮周围会出现边框，若是不须要这个边框，能够使用a标签来建立按钮。

   另外，本篇博客中全部的实例代码及显示效果，在以下地址中，须要的能够自行对照学习。

http://zyhshao.github.io/bootStrapDemo/button.html。

前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536