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

玩转Bootstrap（基础）

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

    图标

    在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，

    查看全部
    0 采集 收起 来源：图标（一）

    2018-06-04

  • qq_你不懂傻丫头_0

    图像

    1、img-responsive：响应式图片，主要针对于响应式设计
    2、img-rounded：圆角图片
    3、img-circle：圆形图片
    4、img-thumbnail：缩略图片

    查看全部
    0 采集 收起 来源：图像

    2018-06-04

  • 慕沐6519175

    1. Bootstrap中的JS插件依赖于JQuery，因此JQuery要在Bootstrap之前引用。

    2. Bootstrap不支持IE的兼容模式，因此<meta http-equiv="X-UA-Compatible" content="IE=edge">能使其在IE浏览器中运行最新的渲染模式。

    3. <meta name="viewport" content="width=device-width,initial-scale=1">用于适配移动浏览器，初始化移动浏览器的显示。


    查看全部
    0 采集 收起 来源：如何开始使用Bootstrap

    2018-06-04

  • 慕粉1342047057 
    <div class="btn-group">
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-backward"></span>
  </button>
   …
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-forward"></span>
  </button>
</div>

    按钮组重要的就是要帮所有按钮放到一个同以往的“容器中”即一个DIV里。

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

    2018-06-01

  • 慕粉1342047057

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>菜单项状态</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    </head>

    <body>

    <div class="dropdown">

      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

        下拉菜单

        <span class="caret"></span>

      </button>

      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

        <li role="presentation" ><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

        <li role="presentation" class="divider"></li>

        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

      </ul>

    </div> 

      <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

    </body>

    </html>


    查看全部
    0 采集 收起 来源：下拉菜单（菜单项状态）

    2018-06-01

  • 慕粉1342047057

    Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，

    上面代码中的“pull-right”类可以用“dropdown-menu-right”代替，两个类的作用是一样的

    查看全部
    0 采集 收起 来源：下拉菜单（对齐方式）

    2018-06-01

  • 慕粉1342047057

    下拉菜单（菜单标题）

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>菜单标题</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <link rel="stylesheet" href="style.css">

    </head>


    <body>

    <div class="dropdown">

      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

        下拉菜单

        <span class="caret"></span>

      </button>

      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation" class="dropdown-header">水果</li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>


        <li role="presentation" class="divider"></li>

        <li role="presentation" class="dropdown-header">蔬菜</li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>

        

        <li role="presentation" class="divider"></li>主食

        <li role="presentation" class="dropdown-header"></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>

      </ul>

    </div> 

      <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 


    </body>

    </html>


    查看全部
    0 采集 收起 来源：下拉菜单（菜单标题）

    2018-06-01

  • 慕粉1342047057

    下拉分隔线示例

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>下拉分隔线</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <link rel="stylesheet" href="style.css">

    </head>


    <body>

     <div class="dropdown">

      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

        食物

        <span class="caret"></span>

      </button>

      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>

        <li role="presentation" class="divider"></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>

        <li role="presentation" class="divider"></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>

      </ul>

    </div> 

      <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

    </body>

    </html>


    查看全部
    0 采集 收起 来源：下拉菜单（下拉分隔线）

    2018-06-01

  • 慕粉1342047057

    下拉菜单示例

    <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
   …
   <li role="presentation" class="divider"></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>


    查看全部
    0 采集 收起 来源：下拉菜单（基本用法）

    2018-06-01

  • 慕粉1342047057

    “col-md-4”居左，“col-md-8”居右，如果要互换位置，需要将“col-md-4”向右移动８个列的距离，也就是8个offset ,也就是在“<div class=“col-md-4”>”添加类名“col-md-push-8”，调用其样式。

    也要将“col-md-8”向左移动４个列的距离，也就是4个offset，在“<div class=”col-md-8”>”上添加类名“col-md-pull-4”：

    查看全部
    0 采集 收起 来源：列排序

    2018-06-01

  • 慕粉1342047057

    宽度百分比

    .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }


    查看全部
    0 采集 收起 来源：基本用法

    2018-06-01

  • 慕粉1342047057

    网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

    查看全部
    0 采集 收起 来源：实现原理

    2018-06-01

  • 慕粉1342047057

    所有icon都是以”glyphicon-”前缀的类名开始，然后后缀表示图标的名称

    查看全部
    0 采集 收起 来源：图标（二）

    2018-06-01

  • 慕粉1342047057

    <span class="glyphicon glyphicon-search"></span>

    <span class="glyphicon glyphicon-asterisk"></span>

    <span class="glyphicon glyphicon-plus"></span>

    <span class="glyphicon glyphicon-cloud"></span>

    去glyphicon.com网站上就可以找到图标了

    查看全部
    0 采集 收起 来源：图标（一）

    2018-06-01

  • 慕粉1342047057 
    <img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">


    查看全部
    0 采集 收起 来源：图像

    2018-06-01

首页上一页114115116117118119120下一页尾页

举报

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

微信扫码，参与3人拼团

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

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

查看已购买的课程