为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(基础)

  • 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1、在<form>元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解) 在<form>元素上使用类名“form-horizontal”主要有以下几个作用: 1、设置表单控件padding和margin值。 2、改变“form-group”的表现形式,类似于网格系统的“row”。
    查看全部
    0 采集 收起 来源:水平表单

    2018-03-22

  • 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。 1、宽度变成了100% 2、设置了一个浅灰色(#ccc)的边框 3、具有4px的圆角 4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999
    查看全部
    0 采集 收起 来源:基础表单

    2015-01-04

  • 1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline” 2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
    查看全部
  • <table class="table table-bordered table-striped"> <td><button class="btn" href="#">Default</button></td> <td><button class="btn btn-primary" href="#">Primary</button></td> <td><button class="btn btn-info" href="#">Info</button></td> <td><button class="btn btn-success" href="#">Success</button></td> <td><button class="btn btn-warning" href="#">Warning</button></td> <td><button class="btn btn-danger" href="#">Danger</button></td> <td><button class="btn btn-inverse" href="#">Inverse</button></td>
    查看全部
  • 按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: ☑ input[type=“submit”] ☑ input[type=“button”] ☑ input[type=“reset”] ☑ <button>
    查看全部
  • 表单控件(复选框和单选按钮水平排列) 有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑: 1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline” 2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline” 如下所示: <form role="form"> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" value="option1">游戏 </label> <label class="checkbox-inline"> <input type="checkbox" value="option2">摄影 </label> <label class="checkbox-inline"> <input type="checkbox" value="option3">旅游 </label> </div> <div class="form-group"> <label class="radio-inline"> <input type="radio" value="option1" name="sex">男性 </label> <label class="radio-inline"> <input type="radio" value="option2" name="sex">女性 </label> <label class="radio-inline"> <input type="radio" value="option3" name="sex">中性 </label> </div> </form>
    查看全部
  • 1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
    查看全部
  • 从上面的示例,我们可以得知: 1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
    查看全部
  • 文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
    查看全部
  • 多行选择设置multiple属性的值为multiple <div class="form-group"> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div>
    查看全部
  • <div class ="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 食物 <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li role="presentation" class="dropdown-header">水果</li> <li role="presentation"> <a href="#" role="menuitem" tabindex="-1"> 苹果 </a> </li> <li role="presentation"> <a href="#" role="menuitem" tabindex="-1"> 梨 </a> </li> </li> <li role="presentation"> <a href="#" role="menuitem" tabindex="-1"> 桃 </a> </li> <li class="divider"></li> <li class="dropdown-header">蔬菜</li> <li> <a href="">芹菜</a> </li> <li> <a href="#">萝卜</a> </li> </ul> </div>
    查看全部
  • 如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。
    查看全部
    0 采集 收起 来源:强调内容

    2015-01-04

  • placeholder="Enter email"
    查看全部
  • 还有label标签怎么没显示出来。如果你仔细看,在label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了。 /*源码请查阅bootstrap.css文件第342行~第350行*/ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
    查看全部
    0 采集 收起 来源:内联表单

    2015-01-04

  • css放在head中 js要引用jQuery,放在body里面的最后面
    查看全部
    0 采集 收起 来源:基本的HTML模板

    2015-01-04

举报

0/150
提交
取消
课程须知
本教程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、了解Bootstrap框架 2、如何使用Bootstrap制作Web页面或Web应用程序 3、如何定制个性化Bootstrap

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!