精华内容
下载资源
问答
  • Bootstrap响应式布局

    千次阅读 2018-06-07 10:39:39
    使用Bootstrap响应式布局首先需要在head标签里面添加 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> width=device-width 宽度是设备屏幕的...

    使用Bootstrap响应式布局首先需要在head标签里面添加

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    width=device-width  宽度是设备屏幕的宽度

    initial-scale=1.0  初始的缩放比例

    maximum-scale=1  最大的缩放比例

    user-scalable=yes  用户是否可以调整缩放比例

    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列

    1丶.row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)

    2丶通过.row在水平方向创建一组“列(column)”

    3丶栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

    4丶如果一.row中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列

    Bootstrap栅格系统在不同屏幕上的说明 (栅格类适用于与屏幕宽度大于或等于分界点大小的设备)

    例:手机端显示一列,PC端显示3列

    <div class="row">
      <div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
      <div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
      <div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
      <div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
      <div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
      <div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
    </div>

     

    展开全文
  • bootstrap响应式布局

    2018-08-21 15:17:46
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="...bootstrap响应式布局&lt;/title&gt; &lt;!-- 最新版本的 B
    <!DOCTYPE html>
    <html>
    <head>
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>bootstrap响应式布局</title>
    	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    	<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    </head>
    <body>
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project Name</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Concat</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <div class="container">
    	<div class="row">
    
    		<div class="col-sm-9">
    			 <p class="pull-right visible-xs">
    				  	<button class="btn-xs btn btn-primary">Toggle</button>
    			</p>
    			<div class="jumbotron">
    				 
    				  <h1>Hello, world!</h1>
    				  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    			</div>
    			<div class="row">
    				<div class="col-6 col-sm-6 col-lg-4">
    					<h2>Heading</h2>
    					<p>onec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    					<a class="btn btn-default">view details&gt;&gt;</a> 
    				</div>
    				<div class="col-6 col-sm-6 col-lg-4">
    					<h2>Heading</h2>
    					<p>onec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    					<a class="btn btn-default">view details&gt;&gt;</a> 
    				</div>
    				<div class="col-6 col-sm-6 col-lg-4">
    					<h2>Heading</h2>
    					<p>onec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    					<a class="btn btn-default">view details&gt;&gt;</a> 
    				</div>
    				<div class="col-6 col-sm-6 col-lg-4">
    					<h2>Heading</h2>
    					<p>onec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    					<a class="btn btn-default">view details&gt;&gt;</a> 
    				</div>
    				<div class="col-6 col-sm-6 col-lg-4">
    					<h2>Heading</h2>
    					<p>onec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    					<a class="btn btn-default">view details&gt;&gt;</a> 
    				</div>
    				<div class="col-6 col-sm-6 col-lg-4">
    					<h2>Heading</h2>
    					<p>onec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    					<a class="btn btn-default">view details&gt;&gt;</a> 
    				</div>
    				
    			</div>
    		</div>
    		<div class="col-sm-3">
    			<div class="list-group">
    			  <a href="#" class="list-group-item active">
    			    Cras justo odio
    			  </a>
    			  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    			  <a href="#" class="list-group-item">Morbi leo risus</a>
    			  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    			  <a href="#" class="list-group-item">Vestibulum at eros</a>
    			  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    			  <a href="#" class="list-group-item">Morbi leo risus</a>
    			  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    			  <a href="#" class="list-group-item">Vestibulum at eros</a>
    			</div>
    		</div>
    	</div>
    </div>
    
    </body>
    </html>

    网页效果

    网页缩放时:

    心得:在使用bootstrap框架的时候,根据需求查Boostrap官方文档  

    展开全文
  • Bootstrap 响应式布局

    2020-05-20 20:37:45
    了解过媒体查询后,就可以进行响应式布局了 如果不希望在屏幕变小时上所有列都堆在一起。那就可以使用针对小屏幕所定义的类 <div class="container"> <div class="row"> <div class="col-md-4 ...

    了解过媒体查询后,就可以进行响应式布局了

    如果不希望在屏幕变小时上所有列都堆在一起。那就可以使用针对小屏幕所定义的类

        <div class="container">
            <div class="row">
                <div class="col-md-4 bg-primary col-xs-6">1</div>
                <div class="col-md-4 bg-warning col-xs-6">1</div>
                <div class="col-md-4 bg-danger col-xs-6">1</div>
            </div><br>
    
            <div class="row">
                <div class="col-md-4 bg-danger">2</div>
                <div class="col-md-4 bg-primary">2</div>
                <div class="col-md-4 bg-warning">2</div>
            </div>
        </div>

     

    展开全文
  • bootstrap 响应式布局

    2019-09-26 10:07:12
    先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: white; } @media screen and (max-width: 960px){ body { bac...

    先上点媒体查询css(某个著名的”段子“),跟bootstrap无关:

    <html>
    <head>
    <style>
    body {  
        background-color: white;  
    }  
    @media screen and (max-width: 960px){  
        body {  
            background-color: red;  
        }  
    }  
    @media screen and (max-width: 768px){  
        body {  
            background-color: yellow;  
        }  
    }  
    @media screen and (max-width: 550px){  
        body {  
            background-color: green;  
        }  
    }  
    @media screen and (max-width: 320px){  
        body {  
            background-color: blue;  
        }  
    }
    </style>
    </head>
    <body>
    </body>
    </html>

    保存以上文件为test.html, 然后用浏览器打开。缩放浏览器看效果。(ps:如果看不到任何效果,说明你的浏览器太老了,不支持css3)

     

    再来说bs的布局:默认情况下,bs认为你是在为移动设备编写样式!

    注意这句,但前提是,网页的head里要加这么一段

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    然后,就可以愉快的忽略上面css样式的问题。不用为了某个尺寸的设备写一大堆重复的代码。

    当然, 必要时需要写少量代码,做某个尺寸设备的适配。配合 :

    visible-lg/sm/md

    hidden-xs/sm/md/lg 

    来动态显示,宽度比例的调整根据col-lg/md/sm/xs-1~12 来做。

    转载于:https://www.cnblogs.com/Tommy-Yu/p/5695171.html

    展开全文
  • 主要和大家谈一谈bootstrap响应式布局,本教程讲解如何在网页布局中应用响应式设计,感兴趣的小伙伴们可以参考一下
  • BootStrap响应式布局

    2017-10-29 14:40:59
    详见官网http://www.bootcss.com/
  • 11_Bootstrap响应式布局

    2019-12-03 15:24:23
    Bootstrap响应式布局 1、Bootstrap响应式设计
  • bootstrap响应式布局练习 在三种不同的屏幕下呈现不同的效果 大屏(pc端) 小屏下(平板) 超小屏(手机) html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <...
  • 前端响应式开发介绍响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。如果pc端和移动端内容非常多...
  • Bootstrap响应式布局原理

    万次阅读 2017-04-05 11:40:50
    Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:...
  • 目前bootstrap响应式布局提供的分辨率区间只能到1200px,大于1200px均算作1200px区间。随着屏幕分辨率的提高,1200px已无法满足要求,需要更多大于1200px的区间。在1200px基础上,为了满足公司portal的需求,自己...
  • Bootstrap响应式布局、栅格系统 同一套页面可以兼容不同分辨率的设备。 实现: 依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 步骤: 定义容器。相当于之前的table 容器分类: container :...
  • 作者 | Brilliant Open Web团队编辑 | Brilliant Open Web团队本文继续在响应式布局上深入讨论,主要通过多个实际例子,探讨表格在不同设备下的响应式布局方式,以提供良好的用户体验。当我们有大量结构化数据需要在...
  • 蓝色win8扁平风格的bootstrap响应式布局后台管理模板
  • 移动web开发布局模式(混合制作移动端界面)之Bootstrap响应式布局
  • ②将代码复制项目中下载下来之后会有一个bootstrap-3.3.7-dist.zip的压缩包,解压后会得到一个bootstrap-3.3.7-dist的文件夹,将文件夹中的内容直接复制到项目中即可。③引入必要的资源文件创建HTM...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,186
精华内容 1,274
关键字:

bootstrap响应式布局