码迷,mamicode.com
首页 > 其他好文 > 详细

BootStrap栅格系统(图片会随屏幕的大小重新排列)

时间:2017-03-12 16:55:23      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:type   document   back   lan   ext   jquer   min   移动   bsp   


<!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--以移动设备为优先,user-scalable=no禁止用户缩放--> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/jquery.min.js"</script> <script src="bootstrap/js/bootstrap.min.js"</script> <style type="text/css" media="screen"> div[class*="col-"] { border:1px solid grey; } </style> </head> <body> <div class="container-fluid" style="background: #fff";> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img src="image/栅格系统1.jpg" class="img-responsive img-thumbnail"> <h1 class="page-header">栅格系统1</h1> <p>我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。</p> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img src="image/栅格系统2.jpg" class="img-responsive img-thumbnail"> <h1 class="page-header">栅格系统2</h1> <p>我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。</p> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img src="image/栅格系统3.jpg" class="img-responsive img-thumbnail"> <h1 class="page-header">栅格系统3</h1> <p>我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。</p> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img src="image/栅格系统3.jpg" class="img-responsive img-thumbnail"> <h1 class="page-header">栅格系统3</h1> <p>我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。</p> </div> </div> </body> </html>

技术分享

技术分享

技术分享

 

BootStrap栅格系统(图片会随屏幕的大小重新排列)

标签:type   document   back   lan   ext   jquer   min   移动   bsp   

原文地址:http://www.cnblogs.com/juansilence/p/6538150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!