Boostrap响应式与非响应式

非响应式布局

　　在使用非响应式布局时,在<head>标签中需要加入一下内容，其中最主要的是non-responsive.css文件

 1 <head>
 2         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 3        
 4         <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 5         
 6         <!-- The above 2 meta tags *must* come first
 7         in the head; any other head content must come *after* these tags --> 
 8         
 9         <!-- Note there  is no responsive meta tag here -->
10         <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
11         <title>Non-responsive Template for Bootstrap</title>
12         
13         <!-- Bootstrap core CSS -->
14         <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
15 
16         <!-- Custom styles for this    template -->
17         <link href="http://v3.bootcss.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
18 
19         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
20         <!--[if lt IE 9]>
21             <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
22             <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
23         <![endif]-->
24 </head>

响应式布局

　　在使用响应式布局时,在<head>标签中只需要加入 <meta name="viewport" content="width=device-width, initial-scale=1"> 

　　其<head></head>标签中的内容是这样的

 1 <head>
 2         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 3        
 4         <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 5         
 6         <!-- The above 2 meta  tags *must*  come first
 7         in the head; any other head content must come *after* these tags --> 
 8         
 9         <!-- Note there is no responsive meta tag here -->
10         <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
11         <title>responsive Template for Bootstrap</title>
12         
13         <!-- Bootstrap core CSS -->
14         <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
15         <meta name="viewport" content="width=device-width, initial-scale=1">
16 
17         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
18         <!--[if lt IE 9]>
19             <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
20             <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
21         <![endif]-->
22     </head>

 

 

 

posted @ 2016-04-08 21:46  被罚站的树  阅读(457)  评论(0)  编辑  收藏  举报