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

玩转Bootstrap(基础)

  • Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。
    查看全部
  • 单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。
    查看全部
  • 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。 内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)。
    查看全部
    0 采集 收起 来源:内联表单

    2018-03-22

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

    2018-03-22

  • 定制了一个类名`form-control` 1、宽度变成了100% 2、设置了一个浅灰色(#ccc)的边框 3、具有4px的圆角 4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999
    查看全部
    1 采集 收起 来源:基础表单

    2017-09-02

  • Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格。 Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将<table class="table">置于这个容器当中,这样表格也就具有响应式效果。 Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。
    查看全部
  • 实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中,通过类名“table-condensed”重置了单元格内距值。 紧凑型表格的运用,也只是需要在<table class="table">基础上添加类名“table-condensed
    查看全部
  • top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/
    查看全部
  • 当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,时刻告诉用户正在阅读表格哪一行的数据。其提供了一个“.table-hover”类名来实现这种表格效果。
    查看全部
  • Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可: <table class="table table-bordered"> … </table>
    查看全部
  • <span class="caret"></span>是后面的三角号
    查看全部
  • 让表格带有背景条纹效果。只需要在<table class="table">的基础上增加类名“.table-striped
    查看全部
  • 如果在<table>元素中不添加任何类名,表格是无任何样式效果的。想得到基础表格,我们只需要在<table>元素上添加“.table”类名 “.table”主要有三个作用: 给表格设置了margin-bottom:20px以及设置单元内距 在thead底部设置了一个2px的浅灰实线 每个单元格顶部设置了一个1px的浅灰实线
    查看全部
  • .active 表示当前活动的信息#f5f5f5 .success 表示成功或者正确的行为#dff0d8 .info 表示中立的信息或行为#d9edf7 .warning 表示警告,需要特别注意#fcf8e3 .danger 表示危险或者可能是错误的行为#f2dede
    查看全部
  • <pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
    查看全部
    0 采集 收起 来源:代码(二)

    2018-03-22

举报

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

微信扫码,参与3人拼团

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

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