-
按钮大小 上一节介绍了按钮的定制风格，也就是如何实现Web页面中多种风格按钮。在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。 在Bootstrap框架中提供了三个类名来控制按钮大小： 从上表中不难发现，在Bootstrap框架中控制按钮的大小都是通过修改按钮的padding、line-height、font-size和border-radius几个属性。 /*源码查阅bootstrap.css文件中第2319行～第2339行*/ .btn-lg, .btn-group-lg> .btn { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } .btn-sm, .btn-group-sm> .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-xs, .btn-group-xs> .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }查看全部
-
网格长度最大是12： <div class="form-group"> <div class="col-xs-12"> <input type="text" class="form-control input-sm" placeholder=".col-xs-12是最大的长度"> </div> </div>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定制风格</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <button class="btn btn-info" type="button">信息按钮</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">链接按钮.btn-link</button> </body> </html>查看全部
-
默认按钮 Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。 /*源码请查阅bootstrap.css文件第2040行～第2044行*/ .btn-default { color: #333; background-color: #fff; border-color: #ccc; } 使用默认按钮风格也非常的简单，只需要在基础按钮“btn”的基础上增加类名“btn-default”即可： <button class="btn btn-default" type="button">默认按钮</button> 运行效果如下或查看右侧结果窗口查看全部
-
基本按钮 Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如说文本阴影（text-shadow）、渐变背景（background-image）、边框阴影（box-shadow）等。 难能可贵的是，Bootstrap框架中的考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在不同的浏览器中所呈现的效果基本相同。 源码请查阅bootstrap.css文件第1992行～第2010行： .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } Bootstrap框架的按钮使用非常的简单，使用方式如下： <button class="btn" type="button">我是一个基本按钮</button>查看全部
-
<small>标签来制作副标题。独特样式： 1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。 2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%； 详细代码请参阅bootstrap.css文件中第407行~第443行。查看全部
-
在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码： .help-inline{ display:inline-block; padding-left:5px; color: #737373; } 如果你不想为bootstrap.css增加自己的代码，而且设计又有这种样的需求，那么只能借助于Bootstrap的网格系统。(网格系统在后面的章节中会详细讲解) <form role="form"> <div class="form-group"> <label class="control-label" for="inputSuccess1">成功状态</label> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div> <span class="col-xs-6 help-block">你输入的信息是正确的</span> </div> </div> </form> 运行效果如下或查看右侧结果窗口： 结束语：有关于Bootstrap框架中表单的运用除了按钮部分，到此就算是介绍完了。如果你觉得这样的表单效果并不是你需要的，你完全可以通过forms.less或者_forms.scss文件进行定制，然后重新编译就可以得到你需要的表单效果。在接下来的一节中，我们Bootstrap框架中另一个核心内容——按钮。查看全部
-
表单提示信息 平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。 <form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="help-block">你输入的信息是正确的</span> <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> … </form>查看全部
-
<small>标签——用来制作副标题，样式： 1. 行高都是1，font-weight常规效果（不加粗），颜色设置为灰色（#999） 2. <small>内的文本自提在h1-h3内，大小为当前字体的65%，在h4-h6内的字号设置为当前字号的75%;查看全部
-
1. 重新设置了所有标题的margin-top和margin-bottom的距离，但是h1-h3的magin top距离和h4-h6的稍有区别，分别是h1-h3：margin-top 20px，margin-bottom 10px，h4-h6：margin-top 10px，margin-bottom 10px。 2. 所有标题行高都是1.1，文本颜色和自提都继承父元素的颜色和自提。 3. 不同标题字体大小固定。 4. 在样式表中定义了.h1-.h6类名，使得标题元素和非标题元素的样式一致。查看全部
-
表单控件状态(验证状态) 在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。 1、.has-warning:警告状态（黄色） 2、.has-error：错误状态（红色） 3、.has-success：成功状态（绿色） 使用的时候只需要在form-group容器上对应添加状态类名。 <form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> </div><div class="form-group has-error"><label class="control-label" for="inputError1">错误状态</label><input type="text" class="form-control" id="inputError1" placeholder="错误状态"> </div> </form> 运行效果如下或查看右侧结果窗口： 从效果可以看出，三种状态下效果都是一样的，只是颜色不一样而以。 其他两种状态省略源码不在此展示。 很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起查看全部
-
使用方法： 在进度条“progress progress-striped”两个类的基础上再加入“active”类名 特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果 其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片查看全部
-
使用方法： 通过“thumbnail”样式配合bootstrap的网格系统来实现。 <div class="container"> <div class="row"> <div class="col-xs-6 col-md-3">//针对不同分辨率显示几个12/每个图所占列数 <a href="#" class="thumbnail"> <img ...查看全部
-
据说对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。我们一起来验证一下： <form role="form"> <fieldset disabled> <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend> … </fieldset> </form>查看全部
-
表单控件状态(禁用状态) Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是，Bootstrap框架做了一些样式风格的处理： /*源码请查看bootstrap.css文件第1723行～第1729行*/ .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { cursor: not-allowed; background-color: #eee; opacity: 1; } 使用方法为：只需要在需要禁用的表单控件上加上“disabled”即可： <input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>查看全部
举报
0/150
提交
取消