杂记
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> 闭包扥使用原理 <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> 闭包扥使用原理 <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> 闭包扥使用原理 <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> 闭包扥使用原理 <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> 闭包扥使用原理 <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> 闭包扥使用原理 <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> 闭包扥使用原理 <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> 闭包扥使用原理 <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