Button-按钮

按钮的样式

<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-info">info</button>
<button class="btn btn-link">link</button>
<button class="btn btn-danger">danger</button>

样式展示

按钮的大小

<button class="btn btn-lg">btn</button>
<button class="btn btn">btn</button>
<button class="btn btn-sm">btn</button>
<button class="btn btn-xs">btn</button>

大小展示

从左到右分别为在大屏（lg）、标准屏幕（md）、平板（sm）和手机（xs）上的按钮大小

样式展示

btn-block 用于充满父级容器

<button class="btn btn-block">btn</button>

样式展示

a、input标签也可以添加btn样式

<a href="" class="btn btn-default">default</a>
<input type="text" name="" id="" value="input" class="btn btn-default" />

样式展示

btn禁用状态

<button class="btn btn-default" disabled>default</button>

样式展示

题外

<!-- img标签的样式 -->
<!-- 圆形图片（根据所给的照片尺寸定义圆的形状，当宽高比为1:1时所呈现的是正圆 -->
<img src="http://placehold.it/400x200" alt="" class="img-circle">
<img src="http://placehold.it/200x200" alt="" class="img-circle">
<!-- 带圆角的正方形图片 -->
<img src="http://placehold.it/400x200" alt="" class="img-rounded">
<!-- 带边框的正方形图片 -->
<img src="http://placehold.it/400x200" alt="" class="thumbnail">

样式展示

Bootstrap-button btn样式相关推荐

bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意一.总结一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
利用jQuery和bootstrap更改radio样式
<div class="container body-content"><div class="row"><div class=& ...
自定义的html radio button的样式
设计要求效果如下: 平时看到的radio button效果如下: 可以看出设计上图的radio button选中和没有选中的状态都有自定义的图片样式.但是我们使用radio button基本上都是需要 ...
36种漂亮的网页Button按钮样式
本页面向大家展开了36种漂亮的网页Button按钮样式,各式各样的都有,适合不同的场合使用.CSS3技术的确非常强大,不过大家测试的时候不要使用IE8,因为IE8还没有完全支持css3,微软如此不屑C ...
去除bootstrap的table样式中单元格边框线
使用bootstrap的table样式,在非纯白背景下,会有单元格边框线,影响美观. 去除方式: <style type="text/css"> bod ...
微信小程序：去掉button默认样式
去除button默认样式: /* 去掉背景色和内外边距 */ button {margin: 0;padding: 0;background-color: inherit;position: stat ...
引用Bootstrap无法显示样式，可能是安装的版本和参考的文档不相符
安装版本时没有指定版本号,默认安装最新版本4.0.0,但是使用时参考的是3.3.7版本的文档,导致不显示样式. 所以,如果使用bootstrap时出现样式问题,可以从引用文件是否正确这方面来考虑.
bootstrap php ajax,ThinkPHP 整合Bootstrap Ajax分页样式
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
改变Button的样式
改变Button的样式是很困难的,你改换个思路:使用2个size一样的Button(只是样式不同),通过切换visible达到改变样式目的典型场景:UI说要一个按钮可点击和不可点击时样式不同(肯定要 ...

Bootstrap-button btn样式

Button-按钮

按钮的样式

样式展示

按钮的大小

大小展示

样式展示

btn-block 用于充满父级容器

样式展示

a、input标签也可以添加btn样式

样式展示

btn禁用状态

样式展示

题外

样式展示

Bootstrap-button btn样式相关推荐

最新文章

热门文章