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

玩转Bootstrap(基础)

  • 按钮状态——禁用状态

    和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。

    禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。

    https://img1.sycdn.imooc.com//5b5b0b4c0001530403780666.jpg

    https://img1.sycdn.imooc.com//5b5b0b560001befb03680749.jpg

    https://img1.sycdn.imooc.com//5b5b0b83000134b803890129.jpg


    查看全部
  • 按钮状态——活动状态

    https://img1.sycdn.imooc.com//5b5b0b09000173ba03760579.jpg

    https://img1.sycdn.imooc.com//5b5b0b1400013d0403650437.jpg




    查看全部
  • 块状按钮

    有时候在制作按钮的时候需要按钮宽度充满整个父容器(width:100%),特别是在移动端的制作中。

    那么前面的方法我们都无法很好的实现,除非重新定义按钮的宽度。

    其实在Bootstrap中并不需要这样做,Bootstrap框架中提供了一个类名“btn-block”。

    按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。

    在实际当中,常把这种按钮称为块状按钮。

    https://img1.sycdn.imooc.com//5b5b0ac70001072e03650309.jpg

    https://img1.sycdn.imooc.com//5b5b0aed00014f0d03660227.jpg

    https://img1.sycdn.imooc.com//5b5b0ae400015f6c03840175.jpg


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

    2018-07-27

  • 按钮大小

    在Bootstrap框架中,对于按钮的大小,也是可以定制的。类似于input一样,通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。

    在Bootstrap框架中提供了三个类名来控制按钮大小:

    53b36a7600014af106910605.jpg

    https://img1.sycdn.imooc.com//5b5b0a44000128b503330531.jpg

    https://img1.sycdn.imooc.com//5b5b0a4c000123e503470226.jpg

    https://img1.sycdn.imooc.com//5b5b0a5d0001d27603720087.jpg


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

    2018-07-27

  • 按钮定制风格

    https://img1.sycdn.imooc.com//5b5b06980001506603700156.jpg


    53b367bd0001d59c07530312.jpg


    53b367d10001846a08020810.jpg

    https://img1.sycdn.imooc.com//5b5b06d700018dce03660422.jpghttps://img1.sycdn.imooc.com//5b5b071f0001394103290161.jpg


    查看全部
    0 采集 收起 来源:定制风格

    2018-07-27

  • 多标签支持

    https://img1.sycdn.imooc.com//5b5b065d000190e303130386.jpg

    https://img1.sycdn.imooc.com//5b5b066c00016c9c03460082.jpg

    https://img1.sycdn.imooc.com//5b5b06750001b6b603200091.jpg

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

    2018-07-27

  • 默认按钮

    https://img1.sycdn.imooc.com//5b5b05db0001e5e203660348.jpg

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

    https://img1.sycdn.imooc.com//5b5b05cb0001985601100060.jpg

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

    2018-07-27

  • 基本按钮

    https://img1.sycdn.imooc.com//5b5b055300018e0003680699.jpg

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

    53b28609000143a602800084.jpg

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

    2018-07-27

  • 按钮

    按钮也是Bootstrap框架核心内容之一。

    因为按钮是Web制作中不可缺少的东西。

    而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等。

    那么Bootstrap框架也考虑了这些因素,接下来的内容我们一起来探讨Bootstrap框架中的另一核心部分内容——按钮。

    https://img1.sycdn.imooc.com//5b5b04ff0001bde306610181.jpg

    https://img1.sycdn.imooc.com//5b5b050b0001d61103710159.jpg



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

    2018-07-27

  • 表单提示信息

    平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。

    https://img1.sycdn.imooc.com//5b5b041b000110c903760307.jpg

    https://img1.sycdn.imooc.com//5b5b04c8000187c203830299.jpg

    https://img1.sycdn.imooc.com//5b5b04420001f2ee03670595.jpg

    https://img1.sycdn.imooc.com//5b5b046f0001bb0603660081.jpg

    结束语:有关于Bootstrap框架中表单的运用除了按钮部分,到此就算是介绍完了。如果你觉得这样的表单效果并不是你需要的,你完全可以通过forms.less或者_forms.scss文件进行定制,然后重新编译就可以得到你需要的表单效果。


    查看全部
    0 采集 收起 来源:表单提示信息

    2018-07-27

  • 表单控件状态(验证状态)

    https://img1.sycdn.imooc.com//5b5994e30001042703740556.jpg

    https://img1.sycdn.imooc.com//5b5994ec00012ea101930241.jpg

    https://img1.sycdn.imooc.com//5b5995140001433c03880505.jpg

    https://img1.sycdn.imooc.com//5b59951e000149fb01950247.jpg

    https://img1.sycdn.imooc.com//5b59953a0001d35203880128.jpg

    查看全部
  • 表单控件状态(禁用状态)

    https://img1.sycdn.imooc.com//5b59841d0001c37d03680419.jpg

    https://img1.sycdn.imooc.com//5b59844a0001251705130065.jpg

    https://img1.sycdn.imooc.com//5b5984640001bcdb03640401.jpg


    https://img1.sycdn.imooc.com//5b59847300011eb303680593.jpg

    https://img1.sycdn.imooc.com//5b5984a50001679005130231.jpg

    https://img1.sycdn.imooc.com//5b5984ad0001493003670256.jpg


    https://img1.sycdn.imooc.com//5b59848e00014f2205100261.jpg




    https://img1.sycdn.imooc.com//5b59840b0001e57309500780.jpg


    查看全部
  • 表单控件状态(焦点状态)

    https://img1.sycdn.imooc.com//5b5983b90001a37a03550490.jpg

    https://img1.sycdn.imooc.com//5b5983c600013dfe03750723.jpg

    查看全部
  • 表单控件(按钮)

    https://img1.sycdn.imooc.com//5b597f190001b19303880384.jpg

    https://img1.sycdn.imooc.com//5b597f0f0001555003990658.jpg

    查看全部
  • 表单控件(复选框和单选按钮水平排列)

    有时候,为了布局的需要,将复选框和单选按钮需要水平排列。

    Bootstrap框架也做了这方面的考虑:
    1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
    2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
    如下所示:

    https://img1.sycdn.imooc.com//5b597e050001e22903600780.jpg

    https://img1.sycdn.imooc.com//5b597e1200010da903610333.jpg

    查看全部

举报

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

微信扫码,参与3人拼团

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

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