图片样式，辅助类样式

来源：互联网发布：广西大学网络教育编辑：程序博客网时间：2024/05/16 18:31

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1" /><link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /><title>bootstrap入门</title><script src="js/jquery-1.6.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></head><body style="padding: 50px;background-color: orange;"><div class="container" style="padding: 30px; background-color:white ;"><h3 class="page-header">图片样式应用</h3><div><img class="img-responsive img-rounded" width="400px" height="270px" src="img/IMG_8421.jpg" /><p>这是一条信息</p></div></div><br /><h2 class="page-header">浮动和清除的应用</h2><div style="border: 1px solid greenyellow; width: 400px;" class="clearfix"><ul class="list-unstyled"><li class="pull-left" style="padding: 10px;"><a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br /><a href="#">这是一个测试</a></li><li class="pull-left" style="padding: 10px;"><a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br /><a href="#">这是一个测试</a></li><li class="pull-left" style="padding: 10px;"><a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br /><a href="#">这是一个测试</a></li><li class="pull-left" style="padding: 10px;"><a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br /><a href="#">这是一个测试</a></li></ul></div></body></html>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1" /><link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /><title>bootstrap入门</title><script src="js/jquery-1.6.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></head><body style="padding: 50px;background-color:gainsboro;"><div class="container" style="padding: 30px; background-color:white ;"><h3 class="page-header">图片样式应用</h3><div><img class="img-responsive img-rounded" width="400px" height="270px" src="img/IMG_8421.jpg" /><p>这是一条信息</p></div></div><br /><h5 class="page-header container">浮动和清除的应用</h5><div style="border: 1px solid greenyellow; width: 400px;" class="clearfix container"><ul class="list-unstyled"><li class="pull-left" style="padding: 10px;"><a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br /><a href="#">这是一个测试</a></li><li class="pull-left" style="padding: 10px;"><a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br /><a href="#">这是一个测试</a></li><li class="pull-left" style="padding: 10px;"><a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br /><a href="#">这是一个测试</a></li><li class="pull-left" style="padding: 10px;"><a href="#"><img src="img/IMG_8408.jpg" height="100px" width="150px"></a><br /><a href="#">这是一个测试</a></li></ul></div><!--下拉菜单的应用--><h5 class="page-header container">下拉菜单的应用</h5><div class="dropdown container"><button type="button" class="btn btn-default" data-toggle="dropdown">php课程体系<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">html</a></li><li><a href="#">css</a></li><li><a href="#">js</a></li><li class="divider"></li><li><a href="#">jQuery</a></li><li><a href="#">ajax</a></li></ul></div><!--按钮组的应用 --><h5 class="page-header container">按钮组的应用</h5><div class="container"><div class="btn-group btn-group-lg"><button type="button " class="btn btn-primary">left</button><button type="button" class="btn btn-primary">center</button><button type="button" class="btn btn-primary">right</button></div><div class="btn-group"><button type="button" class="btn btn-success">left2</button><button type="button" class="btn btn-success">center2</button><button type="button" class="btn btn-success">right2</button></div><div class="btn-group btn-group-sm"><button type="button" class="btn btn-warning">left3</button><button type="button" class="btn btn-warning">center3</button><button type="button" class="btn btn-warning">right3</button></div></div><!--按钮式的下拉菜单应用 --><h5 class="page-header container">按钮式的下拉菜单应用</h5><div class="btn-group container"><button class="btn btn-danger" data-toggle="dropdown">ship<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">html</a></li><li><a href="#">html</a></li><li><a href="#">html</a></li><li><a href="#">html</a></li></ul></div></body></html>

阅读全文

0 0