为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 玩转Bootstrap（基础） 笔记

玩转Bootstrap（基础）

大漠 Web前端工程师
查看讲师更多课程 大漠讲师的其他课程
难度初级
时长10小时 0分
学习人数
综合评分9.53
686人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.4 逻辑清晰
最热 最新
  • 温柔w

    块状按钮 就是按钮的宽度会充满整个父容器（width；100%)

    在按钮中添加了一个类名“btn-block”

    例如：

     <button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> 

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

    2019-02-20

  • 温柔w

    按钮使用中，几个类名可以配合按钮中其他颜色类名使用，但唯一不能缺少.btn类名。

    改变按钮样式 .btn btn-default 

    改变按钮大小 .btn btn-lg

    <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 

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

    2019-02-20

  • 温柔w

    多标签支持按钮

    制作按钮除了使用<button>之外，还可以使用<input type="submit"和</a>标签等,还需要在制作按钮的标签元素上添加类名.btn，否则没有任何按钮效果

    <button class="btn btn-default" type="button"></button>

    <input type="submit" class="btn btn-default"/>

    <input type="button" class="btn btn-default"/>

    <span class="btn btn-default">span标签按钮</span>

    <div class="btn btn-default">div标签按钮</div>

    <a href="" class="btn btn-default">a表标签按钮</a>

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

    2019-02-20

  • 温柔w

    按钮风格

    <button class="" type="button"/></button>

    class="btn" 基础按钮

    class="btn btn-default" 默认按钮

    class="btn btn-primary" 主要按钮

    class="btn btn-success" 成功按钮

    class="btn btn-info" 信息按钮

    class="btn btn-warning" 警告按钮

    class="btn btn-danger" 危险按钮

    class="btn btn-link" 链接按钮

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

    2019-02-20

  • 温柔w

    表单提示信息

    在控件底部提供不同的提示信息，使用了help-block样式。例如：

     <div class="form-group has-success has-feedback">

        <label class="control-label" for="inputSuccess1">成功状态</label>

        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

        <span class="help-block">你输入的信息是正确的</span>

        <span class="glyphicon glyphicon-ok form-control-feedback"></span>

      </div>

    如果想要提示和控件在同一行，可以借助bootstrap的网格系统




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

    2019-02-19

  • 温柔w

    表单验证状态

    .has-warning 警告状态（黄色）

    .has-error 错误状态（红色）

    .has-success 成功状态 （绿色）

    使用的时候只需要在form-group容器上添加状态类名

    <div class="form-group has-success">

        <label class="control-label" for="inputSuccess1">成功状态</label>

        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

      </div>

    如果想要加一个图标，则在对应状态下添加类名has-feedback,注意要与has-error等在一起,还必须添加一个span,则改成

    <div class="form-group has-success has-feedback">

        <label class="control-label" for="inputSuccess1">成功状态</label>

        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

        <span class="glyphicon glyphicon-ok form-control-feedback"></span>

      </div>



    查看全部
    0 采集 收起 来源：表单控件状态(验证状态)

    2019-02-19

  • 温柔w

    表单控件状态--禁用状态

    1.给某一个控件加禁用状态 ，只需要加上disabled属性即可

    <input class="form-control" id="disabledInput" type="text"placeholder="已禁用，不可输入"disabled>

    加上form-control之后禁用有样式

    2.可以使整个域设置设置disabled属性，整个域处于被禁用状态

    <fieldset disabled></fieldset>

    3.在整个禁用的域中，如果有<legend>标签中有输入框，这个输入框是无法禁用的。

    <fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
    …
</fieldset>


    查看全部
    0 采集 收起 来源：表单控件状态(禁用状态)

    2019-02-19

  • 郭郭357

    列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。

        list-group-item-success：成功，背景色绿色

        list-group-item-info：信息，背景色蓝色

        list-group-item-warning：警告，背景色为黄色

        list-group-item-danger：错误，背景色为红色

    如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名：

    <div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

    运行效果如下：

    原理实现：

    同样的，这几个类名仅修改了背景色和文本色，对应的源码为：boostrap.css文件第4899行～第4986行：

    .list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}
a.list-group-item-success {
  color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
  color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}

    由于篇幅问题，其它状态样式代码请查看源码文件。


    查看全部
    0 采集 收起 来源：列表组--多彩列表组

    2019-02-19

  • 郭郭357

    Bootstrap框加在链接列表组的基础上新增了两个样式：

        list-group-item-heading：用来定义列表项头部样式

        list-group-item-text：用来定义列表项主要内容

    这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容，如下面的示例：

    <div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>

    运行效果如下：

    原理实现：

    ‘这两个样式主要控制不同状态下的文本颜色：

    /*bootstrap.css文件第4850行～第4852行*/
a.list-group-item .list-group-item-heading {
  color: #333;
}
/*bootstrap文件第4865行～第4874行*/
.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
  color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
  color: #777;
}
/*bootstrap.css文件第4883行～第4898行*/
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}
/*bootstrap.css文件第4987行～第4994行*/
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}


    查看全部
    0 采集 收起 来源：列表组--列表项的状态设置

    2019-02-19

  • 郭郭357

    Bootstrap框加在链接列表组的基础上新增了两个样式：

        list-group-item-heading：用来定义列表项头部样式

        list-group-item-text：用来定义列表项主要内容

    这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容，如下面的示例：

    <div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>

    运行效果如下：

    原理实现：

    ‘这两个样式主要控制不同状态下的文本颜色：

    /*bootstrap.css文件第4850行～第4852行*/
a.list-group-item .list-group-item-heading {
  color: #333;
}
/*bootstrap文件第4865行～第4874行*/
.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
  color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
  color: #777;
}
/*bootstrap.css文件第4883行～第4898行*/
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}
/*bootstrap.css文件第4987行～第4994行*/
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}


    查看全部
    0 采集 收起 来源：列表组--自定义列表组

    2019-02-19

  • 郭郭357

    带链接的列表组，其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上，给列表项的文本添加链接：

    <ul class="list-group">
    <li class="list-group-item">        <a href="##">揭开CSS3的面</a>
    </li>
    <li class="list-group-item">        <a href="##">CSS3选择器</a>
    </li>
    ...
</ul>

    运行效果如下：

    这样做有一个不足之处，就是链接的点击区域只在文本上有效：

    但很多时候，都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；

    虽然这样能解决问题，达到需求。但在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果：

    <div class="list-group">
    <a href="##" class="list-group-item">图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩转Bootstrap</a>
</div>

    运行效果如下：

    原理实现：

    如果使用a.list-group-item时，在样式需要做一定的处理，比如说去文本下划线，增加悬浮效果等：

    /*bootstrap.css文件第4847行～第4858行*/
a.list-group-item {
  color: #555;
}
a.list-group-item .list-group-item-heading {
  color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}


    查看全部
    0 采集 收起 来源：列表组--带链接的列表组

    2019-02-19

  • 郭郭357

    带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”：

    <ul class="list-group">
    <li class="list-group-item">        <span class="badge">13</span>揭开CSS3的面
    </li>
    <li class="list-group-item">        <span class="badge">456</span>CSS3选择器
    </li>
    <li class="list-group-item">        <span class="badge">892</span>CSS3边框
    </li>
    <li class="list-group-item">        <span class="badge">90</span>CSS3背景
    </li>
    <li class="list-group-item">        <span class="badge">1290</span>CSS3文本
    </li>
</ul>

    运行效果如下：

    实现原理：

    实现效果非常简单，就是给徽章设置了一个右浮动，当然如果有两个徽章同时在一个列表项中出现时，还设置了他们之间的距离：

    /*bootstrap.css文件第4841行～第4846行*/
.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}


    查看全部
    0 采集 收起 来源：列表组--带徽章的列表组

    2019-02-19

  • 温柔w

    让控件在焦点状态下有样式，需要给控件添加类名“form-control”

    查看全部
    0 采集 收起 来源：表单控件状态(焦点状态)

    2019-02-19

  • 郭郭357

    基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：

        list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

        list-group-item：列表项，常用的是li元素，当然也可以是div元素

    来看一个简单的示例：

    <ul class="list-group">
    <li class="list-group-item">揭开CSS3的面纱</li>
    <li class="list-group-item">CSS3选择器</li>
    <li class="list-group-item">CSS3边框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>

    运行效果如下：

    原理分析：

    对于基础列表组并没有做过多的样式设置，主要设置了其间距，边框和圆角等：

    /*bootstrap.css文件第4820行～第4840行*/
.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}


    查看全部
    0 采集 收起 来源：列表组--基础列表组

    2019-02-19

  • 温柔w

    表单控件大小

    bootstrap框架提供了两个不同的类名，用来控制表单控件的高度，input-sm变得更小，input-lg变得更大；这两个类适用于表单中的input,textarea,select控件。具体如下：

    <input class="form-control input-lg" type="text" placeholder="控件变大">

    但只是对控件高度进行了处理，有时候我们需要控制控件宽度，就可以使用网格布局。例如：

    <div class="form-group">

        <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>

        <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>

      </div>  

    如果表单使用了类名form-horizontal，其中form-group没法使用，就相当于网格系统中的row,则改成：

    <div class="row">

        <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>

        <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>

      </div>  


    查看全部
    0 采集 收起 来源：表单控件大小

    2019-02-19

首页上一页37383940414243下一页尾页

举报

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

微信扫码，参与3人拼团

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

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

查看已购买的课程