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

玩转Bootstrap(基础)

  • Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。
    查看全部
    0 采集 收起 来源:列的嵌套

    2016-05-08

  • for 属性规定 该标签与哪个表单元素绑定。 for属性的值与input的id值相同时,点击label时鼠标焦点也会指向input
    查看全部
  • 对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的。
    查看全部
  • <li role="presentation" class="divider"></li> 分割线
    查看全部
  • Bootstrap框架中的图标都是字体图标,其实现原理就是通过@font-face属性加载了字体。
    查看全部
    0 采集 收起 来源:图标(一)

    2016-05-08

  • 由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。比如说控制图片容器大小。也就是img标签,可以设置width=100%来自适应div的大小。直接为div设置大小是不行的
    查看全部
    0 采集 收起 来源:图像

    2016-05-08

  • .table:基础表格 .table-striped:斑马线表格 .table-bordered:带边框的表格 .table-hover:鼠标悬停高亮的表格 .table-responsive:响应式表格
    查看全部
    0 采集 收起 来源:表格

    2016-05-08

  • <pre>元素一般用于显示大块的代码,并保证原有格式不变,但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小,只需要在pre标签上添加类名, "pre-scrollable",就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
    查看全部
    0 采集 收起 来源:代码(二)

    2018-03-22

  • 在Bootstrap框架中,要禁用按钮有两种实现方式: 方法1:在标签中添加disabled属性 方法2:在元素标签中添加类名“disabled” 两者的主要区别是: “.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。 在这儿演示时都可以禁用的 这应该是环境问题,单独写确实是不可以禁用的 这里的测试环境应该还引用了别的东西。 自己新建页面去写,只引用<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">这个样式表,是禁止不了行为的,测试代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>按钮状态——禁用状态</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <form role="form"> <input type="text" placeholder="input something"> <button type="reset" class="btn disabled" >reset</button> <br> <a class="btn disabled" target="_blank" href="https://www.baidu.com/">去百度</a> </form> </body> </html>
    查看全部
  • 通过添加类名".list-inline"来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号,保持水平显示。可以说内联列表就是为制作水平导航而生
    查看全部
  • 本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格: 1、使用<code></code>来显示单行内联代码 2、使用<pre></pre>来显示多行块代码 3、使用<kbd></kbd>来显示用户输入代码 预编译版本的Bootstrap将代码的样式单独提取出来: 1、LESS版本,请查阅code.less文件 2、Sass版本,请查阅_code.scss文件 编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行,由于代码太长,此处不一一列举。 在使用代码时,用户可以根据具体的需求来使用不同的类型: 1、<code>:一般是针对于单个单词或单个句子的代码 2、<pre>:一般是针对于多行代码(也就是成块的代码) 3、<kbd>:一般是表示用户要通过键盘输入的内容 虽然不同的类型风格不一样,但其使用方法是类似的。
    查看全部
    0 采集 收起 来源:代码(一)

    2018-03-22

  • text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d) .text-info:通知信息,使用浅蓝色(#31708f) .text-warning:警告,使用黄色(#8a6d3b) .text-danger:危险,使用褐色(#a94442)
    查看全部
    0 采集 收起 来源:强调相关的类

    2016-05-08

  • 当按钮处理正在点击状态(也就是鼠标按下的未松开的状态),对于<button>元素是通过“:active”伪类实现,而对于<a>这样的标签元素则是通过添加类名“.active”来实现。
    查看全部
  • Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。
    查看全部
    0 采集 收起 来源:默认按钮

    2016-05-08

  • 在bootstrap中,不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时,千万注意,你的<table>元素中一定不能缺少类名“table”。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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