非响应式布局
在使用非响应式布局时,在<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>