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

玩转Bootstrap(基础)

  • 禁用状态有两种,1:通过disabled属性  2:用过类名disabled,代码如下

    <button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
    <button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
    <button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>


    查看全部
  • 块状按钮只需加上类btn-block即可

    <button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
    <button class="btnbtn-primary btn-block" type="button">正常按钮</button>
    <button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
    <button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>


    查看全部
    0 采集 收起 来源:块状按钮

    2018-06-01

  • 按钮大小

    <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
    <button class="btn btn-primary" type="button">正常按钮</button>
    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
    <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>


    查看全部
    0 采集 收起 来源:按钮大小

    2018-06-01

  • <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">信息按钮.btn-info</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>
    
    按钮的定制风格
    查看全部
    0 采集 收起 来源:定制风格

    2018-06-01

  • 多标签支持制作按钮,如下所示

    <button class="btn btn-default" type="button">button标签按钮</button>
    <input type="submit" class="btn btn-default" value="input标签按钮"/>
    <a href="##" class="btn btn-default">a标签按钮</a>
    <span class="btn btn-default">span标签按钮</span>
    <div class="btn btn-default">div标签按钮</div>


    查看全部
    0 采集 收起 来源:多标签支持

    2018-06-01

  • <button class="btn btn-default" type="button">默认按钮</button>n>

    查看全部
    0 采集 收起 来源:默认按钮

    2018-06-01

  • <button class="btn" type="button">我是一个基本按钮</button>

    type="button"必写!!!

    查看全部
    0 采集 收起 来源:基本按钮

    2018-06-01

  •  <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">信息按钮.btn-info</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> 


    查看全部
    0 采集 收起 来源:按钮

    2018-06-01

  • 1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
    2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

    查看全部
  • 文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

    查看全部
  • 使用input时必须添加type类型,否则得不到正确的样式

    查看全部
  • 先给表格添加一个DIV并添加一个类

    class="table-responsive"

    再在这个DIV中放置<table>标签。这样就成为响应式表格

    查看全部
  • 给table标签添加class="table table-condensed"这个类

    查看全部
  • 给table标签添加class="table table-hover"这个类,table-hover和其他table类可以一起使用。比如

    <table class="table table-striped table-bordered table-hover">


    查看全部
  • 给table标签添加class="table table-bordered"这个类即可

    查看全部

举报

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

微信扫码,参与3人拼团

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

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