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

玩转Bootstrap(基础)

  • 标题(二)

    除此之外,我们在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果,使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式:

    https://img1.sycdn.imooc.com//5b57169400012f2603650106.jpg

    https://img1.sycdn.imooc.com//5b5716a3000114a503670762.jpg



    查看全部
    0 采集 收起 来源:标题(二)

    2018-07-24

  • 标题(一)

    Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示:

    53acce330001429807730337.jpg

    https://img1.sycdn.imooc.com//5b5715f6000107c003680397.jpg

    查看全部
    0 采集 收起 来源:标题(一)

    2018-07-24

  • 全局样式(reset.css)

    https://img1.sycdn.imooc.com//5b57158800011c4b04300411.jpg

    5410fd59000150f607950426.jpg

    https://img1.sycdn.imooc.com//5b57159a0001e4e804220138.jpg



    查看全部
    0 采集 收起 来源:全局样式

    2018-07-24

  • 基本的HTML模板

    https://img1.sycdn.imooc.com//5b57150d00015fef03850424.jpg

    查看全部
    0 采集 收起 来源:基本的HTML模板

    2018-07-24

  • 在使用.dl-horizontal时,记得有float,可能会造成高度塌陷

    查看全部
  • dropdown-header

    发现标题与列表项无法对齐,原来是列表项没有抱紧a标签。

    查看全部
  • <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>基本用法</title>
        <link rel="stylesheet" href="../bs-3.3.7/css/bootstrap.min.css">
        <script src="../js/jquery-2.0.0.min.js"></script>
        <script src="../bs-3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            ul>li{
                cursor: pointer;
            }
            .dropdown{
                margin: 10px 0 0 10px;
            }
        </style>
    </head>
    <body>
    
    <div class="dropdown">
        <button class=" btn btn-default dropdown-toggle"  type="button" data-toggle="dropdown" id="dropmenu" aria-haspopup="true" aria-expanded="true">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropmenu">
            <li>苹果</li>
            <li>香蕉</li>
            <li>西瓜</li>
            <li>猕猴桃</li>
            <li>西红柿</li>
        </ul>
    </div>
    <script>
        (function mouse() {
            $("li").mouseenter(function () {
                $(this).css("background-color","blue").siblings().css("background-color","#fff ");
            });
            $("li").mouseleave(function () {
                $("li").css("background","white");
            })
        })();
    </script>
    </body>
    </html>


    查看全部
  • bootstrap网格系统

    <div class="container">

       <div class="row">

             <div class="col-md-4">.col-md-4</div>

              <div class="col-md-8">.col-md-8</div>

    </div>

    </div

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

    2018-07-21

  • <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="" alt="">
                </a>
                <div class="caption">
                    <h3>Bootstrap框架系列教程</h3>
                    <p>Bootstrap框架是一个优秀...</p>
                </div>  
            </div>

    查看全部
    0 采集 收起 来源:缩略图(二)

    2018-07-19

  • 响应式导航条x

    class="collapse navbar-responsiv navbar-collapsee-collapse"



    查看全部
    0 采集 收起 来源:响应式导航条

    2018-07-19

  • 因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

    查看全部
  • 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。如:

    查看全部
    0 采集 收起 来源:基础表单

    2018-07-18

  • glyphicon-ok 成功图标

    glyphicon-remove 错误图标

    glyphicon-warning-sign 警告图标


    查看全部
  • 表单控件 chechbox、

    查看全部
  • 表单控件 select multiple

    查看全部

举报

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

微信扫码,参与3人拼团

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

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