BootStrap学习笔记-7

来源：互联网发布：时间序列预测算法编程编辑：程序博客网时间：2024/05/22 00:54
sevenLesson-BootStrap-组件-媒体对象，面板，well
<!DOCTYPE html><html lang="zh-CN"><head><meta charset = "utf-8"><title>BootStrap-组件-媒体对象，面板，well</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  <!-- 设置样式以显示出对齐效果 --><style>body{margin:10px 0;}img{width:70px;height:70px;}</style></head><body><!-- media 媒体对象 --><div class="container"><div class="media"><a class="media-left" href="#" ><img src="icon.png" alt=""></a><div class="media-body"><h4 class="media-heading">欢迎来到大学糖</h4><p>欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖</p><div class="media"><div class="media-body"><h4 class="media-heading">欢迎来到大学糖</h4><p>欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖</p></div><!-- img放右边需要注意代码运行，需要剪切到后面 --><a class="media-right media-bottom" href="#" ><img src="icon.png" alt=""></a></div></div></div><div class="media"><a class="media-right media-middle" href="#" ><img src="icon.png" alt=""></a><div class="media-body"><h5 class="media-heading">欢迎来到大学糖</h5><p>欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖</p></div></div><div class="media"><a class="media-left media-bottom" href="#" ><img src="icon.png" alt=""></a><div class="media-body"><h4 class="media-heading">欢迎来到大学糖</h4><p>欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖</p></div></div><hr><!-- 使用table来创建media --><ul class="media-list"><li class="media"><a class="media-left" href="#"><img src="icon.png" alt=""></a><div class="media-body"><h4 class="media-heading">欢迎来到大学糖</h4><p>欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖</p></div></li><li class="media"><a class="media-left media-bottom" href="#"><img src="icon.png" alt=""></a><div class="media-body"><h4 class="media-heading">欢迎来到大学糖</h4><p>欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖</p></div></li><li class="media"><a class="media-left media-middle" href="#"><img src="icon.png" alt=""></a><div class="media-body"><h4 class="media-heading">欢迎来到大学糖</h4><p>欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖欢迎来到大学糖</p></div></li></ul><hr><!-- 面板组件-内容包在一个盒子当中 --><div class="panel panel-success"><div class="panel-body">hello world</div></div><!-- 创建带标题与footer panel --><div class="panel panel-default"><div class="panel-heading">学习网站</div><div class="panel-body">hello world<br>hello world</div><div class="panel-footer panel-danger">www.tangxinli.com</div></div><!-- 代表各的面板 --><div class="panel panel-default"><div class="panel-heading">学习网站</div><div class="panel-body"><table ></table></div><div class="panel-footer panel-danger">www.tangxinli.com</div></div><hr><!-- 响应式 --><div class="embed-responsive embed-responsive-16by9"></div><!-- well --></div></body></html>
0 0