精华内容
下载资源
问答
我要提问

  • bootstrap的响应式布局

     2020-05-04 01:13:43
    响应式布局是bootstrap的一种布局方式,常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。，主要依赖jquery的，所以使用时先装上jquery 可参考网站：... 
    使用
    

    响应式布局是bootstrap的一种布局方式,常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。，主要依赖jquery的，所以使用时先装上jquery
    
可参考网站：https://www.runoob.com/bootstrap/bootstrap-environment-setup.html 进行使用
    

    何为响应式
    

    

    通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
    
屏幕变小了之后，属于同一行的元素受到挤压后，行的右边元素自动换行显式； 屏幕大了后，本属于同一行的元素尽可能的排在同一行内；
    

    

    一个简单的案例
    

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!--网页编码，要使用的外部文件，自动适应屏幕-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>栅格系统</title>
</head>
<body>
<!--使用Bootstrap如果不使用面板的话，要把元素放进一个占满100%屏幕的容器里-->
<!--class="container"则自动居中-->
<div class="container-fluid">
<!--定义一行-->
<div class="row">
<!--xs代表手机小屏幕，md代表平板中屏幕，lg代表PC大屏幕-->
<!--同一对的元素之和必须等于12，否则出现错误，如A的col-xs-2+B的col-xs-10是等于12的-->
<!--bg-warning是定义浅黄色的背景色-->
<div class="col-xs-2 col-md-8 col-lg-4 bg-warning">
A
</div>
<div class="col-xs-10 col-md-4 col-lg-8 bg-primary">
B
</div>
</div>
<div class="row">
<!--这里的道理与上面的一样，A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的-->
<div class="col-xs-1 col-md-10 col-lg-1 bg-warning">
A
</div>
<div class="col-xs-1 col-md-1 col-lg-10 bg-primary">
B
</div>
<div class="col-xs-10 col-md-1 col-lg-1 bg-success">
C
</div>
</div>
</div>
</body>
</html>

    

    说明
    

    

    先在网页文件夹中配置好Bootstrap，在官网（https://www.bootcss.com/）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档使用Bootstrap3。将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSP Web Project的话就把它们放到WebRoot文件夹下面。
    

    

    开发
    

    响应式开发
    
在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端的设备的展示和阅读时，之前，通常的做法是对移动端单独开发一套特定的版本；但是，如果移动终端设备起来越多的时候赋发成本太大，是因为需要做所有屏幕的适配响应式开发的目的就是:一个网站能够兼容多种终端。
    
在新建的网站上一般都会使用响应式开发移动web开发和响应式开发是必须具备的技能演示响应者页面
    

    响应式开发的原理：媒体查询
    
查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。
    
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单来说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。
    
其使用的一些功能
    


    


    
值
描述

    
    


    
device-height
定义输出设备的屏幕可见高度。

    

    
device-width
定义输出设备的屏幕可见宽度。

    

    
max-device-height
定义输出设备的屏幕可见的最大高度。

    

    
max-device-width
定义输出设备的屏幕最大可见宽度。

    

    
min-device-width
定义输出设备的屏幕最小可见宽度。

    

    
min-device-height
定义输出设备的屏幕的最小可见高度。

    

    
max-height
定义输出设备中的页面最大可见区域高度。

    

    
max-width
定义输出设备中的页面最大可见区域宽度。

    

    



    

    
min-height
定义输出设备中的页面最小可见区域高度。

    

    
min-width
定义输出设备中的页面最小可见区域宽度。

    
    

    <style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

    

    

    具体可以参考https://www.cnblogs.com/welhzh/p/10501780.html来进行操作
    收起
    展开全文

  • BootStrap的响应式布局

     2020-12-23 13:56:03
    1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 ...响应式布局。 同一套页面可以兼容不同分辨率的设备。 2. 快 
    1. 概念：
    

    一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
    

      

    • 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
      • 

    • 好处：
      • 

    

      

    1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。百度搜索BootStrap可视化布局可以自定义布局
      2. 

    2. 响应式布局。
      3. 

    

      

    • 同一套页面可以兼容不同分辨率的设备。
      • 

    

    2. 快速入门
    

      

    1. 下载Bootstrap
      
https://getbootstrap.com/docs/4.0/getting-started/download/
      
在这里插入图片描述
      2. 

    2. 在项目中将这个文件夹复制
      3. 

    3. 创建html页面，引入必要的资源文件
      4. 

    

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

    

    3.响应式布局：同一套页面可以兼容不同分辨率的设备。
    

    实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
    

    步骤：
    

      

    1. 定义容器。相当于之前的table、
      
容器分类：

        

      • container：两边留白
        • 

      • container-fluid：每一种设备都是100%宽度
        • 

      

      2. 

    2. 定义行。相当于之前的tr   样式：row
      3. 

    3. 定义元素。
      
指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
      4. 

    

    设备代号：
    

      

    1. xs：超小屏幕 手机 (<768px)：col-xs-12
      2. 

    2. sm：小屏幕 平板 (≥768px)
      3. 

    3. md：中等屏幕 桌面显示器 (≥992px)
      4. 

    4. lg：大屏幕 大桌面显示器 (≥1200px)
      5. 

    

      

    • 注意：
      • 

    

      

    1. 一行中如果格子数目超过12，则超出部分自动换行。
      2. 

    2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
      3. 

    3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
      4. 

    

    <body>
<!--1.定义容器-->
<div class="container-fluid">
    <!--2.定义行-->
    <div class="row">
        <!--3.定义元素
              在大显示器一行12个格子
              在pad上一行6个格子
          -->
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
        <div class="col-md-1 col-sm-2 inner">栅格系统</div>
    </div>
</div>
</body>

    

    在中等屏幕中：
    
在这里插入图片描述
    

    在小屏幕平板中：
    
在这里插入图片描述
    收起
    展开全文
    java

  • bootstrap的响应式布局详解

     千次阅读 2018-07-23 09:11:17
    栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。 1692年，新登基的法国国王路易十四感到法国的... 
    栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
    


    1692年，新登基的法国国王路易十四感到法国的印刷水平差强人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。
    


    我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
    


    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
    


    也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。
    


    一、基本目标
    


    制作如下的两行，这两行因为设备的不同里面各个单元格的宽度会改变：
    


    


     
    


     
    


    在手机小屏幕上，上行A占2份B占10份，AB分享了这12份，下行A占1份B占1份C占10份，ABC分享了这12份。
    


    在平板的中等屏幕上，上行A占8份B占4份，AB分享了这12份，下行A占10份B占1份C占1份，ABC分享了这12份。
    


    在PC的大屏幕上，上行A占4份B占8份，AB分享了这12份，下行A占1份B占10份C占1份，ABC分享了这12份。
    


    二、制作过程
    


    先在网页文件夹中配置好Bootstrap，在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档使用Bootstrap3。将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSP Web Project的话就把它们放到WebRoot文件夹下面。
    


    之后代码如下，详情请看注释：
    


    
			
    1
    

			
    2
    

			
    3
    

			
    4
    

			
    5
    

			
    6
    

			
    7
    

			
    8
    

			
    9
    

			
    10
    

			
    11
    

			
    12
    

			
    13
    

			
    14
    

			
    15
    

			
    16
    

			
    17
    

			
    18
    

			
    19
    

			
    20
    

			
    21
    

			
    22
    

			
    23
    

			
    24
    

			
    25
    

			
    26
    

			
    27
    

			
    28
    

			
    29
    

			
    30
    

			
    31
    

			
    32
    

			
    33
    

			
    34
    

			
    35
    

			
    36
    

			
    37
    

			
    38
    

			
    39
    

			
    40
    

			
    41
    
			    		
			
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    

			
    <html xmlns="http://www.w3.org/1999/xhtml">
    

			
    <head>
    

			
    <!--网页编码，要使用的外部文件，自动适应屏幕-->
    

			
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    

			
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    

			
    <meta name="viewport"
    

			
    content="width=device-width,initial-scale=1.0,user-scalable=no">
    

			
    <title>栅格系统</title>
    

			
    </head>
    

			
    <body>
    

			
    <!--使用Bootstrap如果不使用面板的话，要把元素放进一个占满100%屏幕的容器里-->
    

			
    <!--class="container"则自动居中-->
    

			
    <div class="container-fluid">
    

			
    <!--定义一行-->
    

			
    <div class="row">
    

			
    <!--xs代表手机小屏幕，md代表平板中屏幕，lg代表PC大屏幕-->
    

			
    <!--同一对的元素之和必须等于12，否则出现错误，如A的col-xs-2+B的col-xs-10是等于12的-->
    

			
    <!--bg-warning是定义浅黄色的背景色-->
    

			
    <div class="col-xs-2 col-md-8 col-lg-4 bg-warning">
    

			
    A
    

			
    </div>
    

			
    <div class="col-xs-10 col-md-4 col-lg-8 bg-primary">
    

			
    B
    

			
    </div>
    

			
    </div>
    

			
    <div class="row">
    

			
    <!--这里的道理与上面的一样，A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的-->
    

			
    <div class="col-xs-1 col-md-10 col-lg-1 bg-warning">
    

			
    A
    

			
    </div>
    

			
    <div class="col-xs-1 col-md-1 col-lg-10 bg-primary">
    

			
    B
    

			
    </div>
    

			
    <div class="col-xs-10 col-md-1 col-lg-1 bg-success">
    

			
    C
    

			
    </div>
    

			
    </div>
    

			
    </div>
    

			
    </body>
    

			
    </html>
    收起
    展开全文

  • Bootstrap的响应式布局----自适应手机、平板和电脑PC端

     万次阅读 2019-01-18 00:09:41
     通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验，屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的... 
          在移动终端设备起来越多的今天，如果要针对做所有屏幕去适配开发成本太大。通过响应式开发使得一个网站能够兼容多种终端。 通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验，屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。
    


    响应式开发的原理：媒体查询
    


          媒体查询，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。
    


    实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。
    


    超小屏幕      （移动设备）         w<768px
    
小屏设备    768px-992px          768 <= w <992
    
中等屏幕    992px-1200px     992 =< w <1200
    
宽屏设备    1200px以上      w>=1200
    
CSS 语法：
    


    @media mediatype and|not|only (media feature) {

    CSS-Code;

}
    


    值   
			描述
		
    device-height  
			 定义输出设备的屏幕可见高度
		
    device-width  
			  定义输出设备的屏幕可见宽度
		
    max-device-height  
			  定义输出设备的屏幕可见的最大高度
		
    max-device-width  
			定义输出设备的屏幕最大可见宽度
		
    min-device-width  
			定义输出设备的屏幕最小可见宽度
		
    min-device-height   
			定义输出设备的屏幕的最小可见高度
		
    max-height 
			定义输出设备中的页面最大可见区域高度
		
    max-width   
			定义输出设备中的页面最大可见区域宽度
		
    min-height
			定义输出设备中的页面最小可见区域高度
		
    min-width 
			定义输出设备中的页面最小可见区域宽度
		
    简单举例：控制不同屏幕尺寸下的屏幕背景色
    


    <style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>
    


     
    收起
    展开全文

  • Bootstrap禁用响应式布局的实现方法

     2020-08-31 04:12:32
    主要介绍了Bootstrap禁用响应式布局的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Bootstrap禁用响应式布局
    
                                    
                                2016-07-11 17:52:00
                            
    
                            
    
                                
    
                                    不过正所谓“萝卜青菜各有所爱”，如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局（或者你所设计的页面布局不允许你使用响应式技术），那么你可以通过以下方式禁用响应式布局。    移除标签  ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    bootstrap:响应式布局
    
                                    
                                    
                                            千次阅读
                                    
                                2017-11-15 16:28:07
                            
    
                            
    
                                
    
                                    我们来了解如何利用栅格系统实现响应式布局：  Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    前端入门【BootStrap-响应式布局】
    
                                    
                                2020-11-29 21:54:47
                            
    
                            
    
                                
    
                                    -[ ] 熟悉BootStrap实现响应式布局的原理 -[ ] 使用BootStrap重写黑马旅游首页 一、BootStrap概述 前端框架： html+css+js  1、BootStrap简介  Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的； ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    bootstrap写响应式布局
    
                                    
                                2020-01-13 16:23:55
                            
    
                            
    
                                
    
                                    bootstrap 栅格布局 1.bootstrap框架 Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javaScript 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        javascript   
                                        css   
                                        html5   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    bootstrap4 网格布局实例_Bootstrap4响应式布局之栅格系统
    
                                    
                                2020-12-24 19:14:20
                            
    
                            
    
                                
    
                                    前面说了Bootstrap4的下载和简单使用，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统，让你能够更快的了解Bootstrap4.(PS：更详细的介绍请访问原K...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    知识笔记| Bootstrap—响应式布局
    
                                    
                                2020-12-05 13:34:02
                            
    
                            
    
                                
    
                                    Bootstrap—响应式布局，一个页面适应所有 响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的     设备划分 尺寸区间 设置宽度 列前缀     超小屏幕（手机） <768px ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    （Bootstrap）响应式布局
    
                                    
                                2020-02-29 17:29:48
                            
    
                            
    
                                
    
                                    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局，可以兼容不同分辨率的设备 传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。 实现：依赖于栅格...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Bootstrap4响应式布局之栅格系统
    
                                    
                                2019-09-29 10:29:59
                            
    
                            
    
                                
    
                                    前面说了Bootstrap4的下载和简单使用，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统，让你能够更快的了解Boo...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    框架Bootstrap实现响应式布局
    
                                    
                                2020-05-07 22:38:37
                            
    
                            
    
                                
    
                                    响应式布局：   同一套页面可以兼容不同分辨率的设备。   实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子   步骤：  定义容器。相当于之前的table、  容器分类：  container：两边留白，...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        前端   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    bootstrap禁用响应式布局
    
                                    
                                2020-10-12 16:30:31
                            
    
                            
    
                                
    
                                    移除head标签里的meta标签：  <meta name="viewport" content="width=device-width, initial-scale=1.0">  这个标签的作用是移动设备在访问网站时不会进行缩放，以100%的比例显示在移动设备中。 2. 给...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    BootStrap #响应式布局 #组件
    
                                    
                                2020-12-03 14:35:33
                            
    
                            
    
                                
    
                                    响应式布局  1.啥叫响应式：根据浏览器页面的设备不同 自动的改变布局 图片 文本 不会影响体验   2.编写响应式的网页：  (1)视口  <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        css   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    vue+bootstrap响应式布局_响应式布局 bootstrap案例
    
                                    
                                2020-12-09 23:35:42
                            
    
                            
    
                                
    
                                    前端响应式开发介绍响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。如果pc端和移动端内容非常多...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    前端框架bootstrap(响应式布局)入门
    
                                    
                                2019-04-24 14:22:00
                            
    
                            
    
                                
    
                                    Bootstrap,是基于HTML,CSS.javascript的前端框架  　该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.)  　开发人员只需要编写HTML结构,添加...2.Bootstrap支持响应式开发,解决了移动...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    2,665
            

            

                精华内容
                    1,066
            

        

        

            
热门标签

            
        


        


        

            关键字：
bootstrap的响应式布局