杂记

1.图标组件注意项

不要和其他组件混合使用

只对内容为空的元素起作用

改变图标字体文件的位置(要在同级目录)

2.输入框组注意事项

只支持文本输入框 <input>

输入框组中的工具提示和弹出框需要特别的设置

不要和其他组件混用

作为额外元素的多选框和单选框

一.单词部分

dropdown下拉菜单   nav导航   navbar导航条  toggle可见状态

thumbnail缩略图  media媒体  list-group列表组   pagination分页导航 

二.预习部分

1.bootstrap有哪些组件？分别是什么

①css组件 ②js组件

前者：列表，进度条.......

后者:选项卡，警告框.........

2.使用bootstrap可以 直走几种导航样式分别是什么

①选项卡导航.nav-tabs

②胶囊式选项卡导航.nav-pills

③自适应导航.nav-justified

④二级导航前面的和下拉菜单结合实现

三.练习部分

1.制作美联英语在线VIP页面-导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>


<style>
    .container{
        background-color: #0f0f0f;
        height: 40px;
    }
    #ulli li{
        list-style: none;
        margin-top: 10px;
        margin-left: 50px;
        color: white;
        float: left;
    }
</style>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">


</head>
<body>
<div class="container">
    <ul id="ulli">

        <li><span class="glyphicon glyphicon-home"></span>首页</li>
        <li><span class="glyphicon glyphicon-gift"></span>通用英语</li>
        <li><span class="glyphicon glyphicon-pencil"></span>海外考试</li>
        <li><span class="glyphicon glyphicon-globe"></span>青少英语</li>
        <li><span class="glyphicon glyphicon-tower"></span>行业英语</li>
        <li><span class="glyphicon glyphicon-shopping-cart"></span>在线购买</li>
        <li><span class="glyphicon glyphicon-user"></span>全球师资</li>
        <li>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">更多栏目</a>
                <span class="caret"></span>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li><a href="#" role="menuitem">学员案例</a> </li>
                <li><a href="#" role="menuitem">免费体验</a> </li>
                <li><a href="#" role="menuitem">英语胶囊</a> </li>
                <li><a href="#" role="menuitem">精彩动态</a> </li>

            </ul>
        </div></li>

    </ul>

</div>


</body>
</html>

2.制作课工场响应式导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课工场</title>

</head>
<body>
<nav class="nav navbar-inverse">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse"
                data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>
        <img src="image/logo.png"  width="140" height="30" class="navbar-brand">

    </div>
    <div class="collapse navbar-collapse navbar-left">
        <ul class="nav navbar-nav">

            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">入门课</a></li>
            <li><a href="#">岗位课</a></li>
            <li><a href="#">技能库</a></li>
            <li><a href="#">微社区</a></li>
            <li><a href="#">学员<span style="margin-left: 6px;" class="label label-danger">new</span> </a></li>

        </ul>

    </div>
    <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入要搜索的内容">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
</nav>
<script src="../jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>


</body>

</html>

3.制作优酷视频列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优酷视频列表</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.min.js"></script>
    <style>
        #row{

            border-top: 1px black solid;
        }
        .col-md-3{
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row"><div class="col-md-2"><img src="image/1.jpg">七月独播</div><br>
        <br><br>

    </div>
    <div class="row" id="row">
        <div class="col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="image/2.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="image/2.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="image/2.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="image/2.jpg">
                <div class="caption">
                    <p>kbhkbkjkjbhkbhbkhbhkb</p>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>

 

4.制作QQ消息列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
    #container{
        background-color: rgba(29,140,255,0.36);

    }
    .col-xs-1{
        margin: 5px;
    }
    #ulli li{
        float: left;
        list-style: none;
        margin-left: 20px;
    }
</style>
</head>
<body>
<div class="container" id="container">
    <div class="row">
        <div class="col-xs-1"><img src="image/1.jpg" width="32" height="30"></div>
        <div class="col-xs-1 col-xs-push-8"><img src="image/2.jpg" width="32" height="30"></div>
    </div></div>

<ul class="list-group">
    
    <li class="list-group-item"><img src="image/3.jpg" width="32" height="30"><span><strong style="font-size: 20px">任务三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭包扥使用原理
    <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/4.jpg" width="32" height="30"><span><strong style="font-size: 20px">任务三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/5.jpg" width="32" height="30"><span><strong style="font-size: 20px">任务三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/6.jpg" width="32" height="30"><span><strong style="font-size: 20px">任务三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/7.jpg" width="32" height="30"><span><strong style="font-size: 20px">任务三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/7.jpg" width="32" height="30"><span><strong style="font-size: 20px">任务三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/5.jpg" width="32" height="30"><span><strong style="font-size: 20px">任务三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭包扥使用原理
        <span class="badge">1</span>
    </li>
    <li class="list-group-item"><img src="image/6.jpg" width="32" height="30"><span><strong style="font-size: 20px">任务三</strong></span>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭包扥使用原理
        <span class="badge">1</span>
    </li>
</ul>
<div class="container">
    <nav class="navbar navbar-default navbar-fixed-bottom" style="opacity:0.8;">
        <div class="row">
        <div class="col-xs-2 col-xs-push-1"><span class="glyphicon glyphicon-envelope" style="margin-left: 5px"></span><br>消息</div>
            <div class="col-xs-2 col-xs-push-3"><span class="glyphicon glyphicon-user" style="margin-left: 5px"></span><br>消息</div>
            <div class="col-xs-2 col-xs-push-5"><span class="glyphicon glyphicon-star" style="margin-left: 5px"></span><br>消息</div>
        </div>

    </nav>
</div>

</body>
</html>

四.总结部分

 

1.媒体对象

对齐

图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

媒体对象列表

用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>



欢迎提问，欢迎指错，欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的

  原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣：2265682997