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

玩转Bootstrap(基础)

  • 列1中可以添加行1,这个行1中还能添加列2。 (注: 1、行1的宽度为100%时,就是列1的宽度 2、列2的总数不超过12)
    查看全部
    0 采集 收起 来源:列的嵌套

    2017-11-02

  • 移动列eg: <div class="col-md-4 col-md-push-8">.col-d-4</div>将col-md-4向右移动8个单元格 <div class="col-md-8 col-md-pull-4">.col-md-8</div>将col-md-8向左移动4个单元格 (其实就是他们两个互换位置)
    查看全部
    0 采集 收起 来源:列排序

    2018-03-22

  • <script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script> <script src='https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
    查看全部
  • 网格列的偏移: 给每一个合并了的列加入class=" col-md(四种)-offset-n"表示列向右移动四列的间距 注:列与偏移列的总数不超过12 eg: <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3 col-md-offset-3">col-md-offset-3</div> <div class="col-md-4">col-md-4</div> </div>
    查看全部
    0 采集 收起 来源:列偏移

    2018-03-22

  • 网格的大小(根据屏幕)由大到小 col-xs(auto) col-sm(750px) col-md(970px) col-lg(1170px)
    查看全部
    0 采集 收起 来源:基本用法

    2017-11-01

  • 在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如: <div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div>
    查看全部
    0 采集 收起 来源:工作原理

    2018-03-22

  • 网格系统 eg: <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> </div>
    查看全部
    0 采集 收起 来源:实现原理

    2018-03-22

  • 小图标eg: <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-asterisk"></span> 具体的类名保存在微信收藏里
    查看全部
    0 采集 收起 来源:图标(二)

    2018-03-22

  • 图像 给图像<img>添加class为 响应式:img-responsive 圆角:img-rounded(IE8以上) 圆形:img-circle(IE8以上) 缩略图:img-thumbnail 注:需要通过其他的方式来处理图片大小,比如控制图片容器大小,但是不能通过css 样式直接修改img图片的大小。
    查看全部
    0 采集 收起 来源:图像

    2018-03-22

  • 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。 自定义JQuery插件,完整的类库,基于Less等。
    查看全部
  • icon: <span class="glyphicon glyphicon-ok form-control-feedback"></span> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    查看全部
  • 使用的时候只需要在form-group容器上对应添加状态类名。 很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:
    查看全部
  • 1、宽度变成了100% 2、设置了一个浅灰色(#ccc)的边框 3、具有4px的圆角 4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999
    查看全部
    0 采集 收起 来源:基础表单

    2017-10-31

  • 把按钮禁用 给button标签加入disabled语句 eg:disabled="disabled" 或者class="disabled" 区别:disable:禁止样式和行为、.disabled只禁止样式
    查看全部
  • 按钮的状态:活动状态、禁用状态 活动状态:悬浮状态(:hover) 、点击状态(:active)、焦点状态(:focus)
    查看全部

举报

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

微信扫码,参与3人拼团

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

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