zoukankan      html  css  js  c++  java
  • 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>

     

     

  • 相关阅读:
    使用 asp.net mvc和 jQuery UI 控件包
    ServiceStack.Redis 使用教程
    HTC T8878刷机手册
    Entity Framework CodeFirst 文章汇集
    2011年Mono发展历程
    日志管理实用程序LogExpert
    使用 NuGet 管理项目库
    WCF 4.0路由服务Routing Service
    精进不休 .NET 4.0 (1) asp.net 4.0 新特性之web.config的改进, ViewStateMode, ClientIDMode, EnablePersistedSelection, 控件的其它一些改进
    精进不休 .NET 4.0 (7) ADO.NET Entity Framework 4.0 新特性
  • 原文地址:https://www.cnblogs.com/xidongyu/p/5370096.html
Copyright © 2011-2022 走看看