Bootstrap 流式布局

最新推荐文章于 2025-05-17 16:01:34 发布
最新推荐文章于 2025-05-17 16:01:34 发布
阅读量5.2k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Bootstrap 教程 文章标签： Bootstrap Bootstrap 流式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ixygj197875/article/details/79439996
本文介绍如何使用Bootstrap创建流式布局，通过将栅格系统置于class=container-fluid中实现响应式设计，使得布局能填充整个浏览器窗口宽度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

同理，将Bootstrap的流式栅格放到 class="container-fluid" 的流式容器中，即可创建流式布局。流式布局将填满整个视口宽度。如：



  1. <div class="container-fluid">
  2.   <div class="row-fluid">
  3.     <div class="span2">
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div class="span10">
  7.       <!--Body content-->
  8.     </div>
  9.   </div>
  10. </div>


布局效果如图 2‑9所示：

Bootstrap流式布局图2-9 Bootstrap流式布局


 
关于作者

 
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。



                

        

    

    
  



    



                



	

		

			

				
					
BootStrap4（二）布局

				
			

			

				

					weixin_45650998的博客
				

				

					09-02
					
					1488
					
				

			

		

		

			
				
Bootstrap4.4 在制作自适应页面时或多或少会用到，而且非常方便，如何实现某个元素只在PC上显示其他屏幕不显示，或者在移动小屏幕和PC上显示，平板上隐藏；要隐藏元素，只需对任何响应屏幕变化使用.d-none这个class即可，要仅在给定的屏幕尺寸间隔上显示元素，可以将一个.d-将为所有屏幕尺寸隐藏该元素，但在中型和大型则会显示。-none类与一个.d--*类组合使用，例如，

			
		

	



                

            
              



	

		

			

				
					
bootstrap 流式布局示例

				
			

			

				

					hichinamobile的博客
				

				

					06-22
					
					8551
					
				

			

		

		

			
				
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>










质量录入


	rest/wx" method="post">
	
		JA

			
		

	



              


  
              

                


	

		

			

				
					
Bootstrap---Fluid layout 流布局

				
			

			

				

					网站开发初中级代码参考-转载
				

				

					04-23
					
					321
					
				

			

		

		

			
				
   流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写，然后自适应各种不同大小的屏幕（手机，PAD…）。
&lt;div class="container-fluid"&gt; 
 &lt;div class="row-fluid"&gt; 
 &lt;div class="span2"&gt;
 &lt;/div&amp

			
		

	





	

		

			

				
					
JQuery处理JSON数据的实战应用

					
最新发布

				
			

			

				

					weixin_42575505的博客
				

				

					05-17
					
					489
					
				

			

		

		

			
				
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript的一个子集，但JSON是独立于语言的，几乎所有的编程语言都支持JSON格式数据的生成和解析。

			
		

	



		

			
		



	

		

			

				
					
Bootstrap流式布局-20140515

				
			

			

				

					xjwolaile的博客
				

				

					05-16
					
					561
					
				

			

		

		

			
				
流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写，然后自适应各种不同大小的屏幕（手机，PAD…）。

[code="html5"]

  
    
    
    
     
   

[/code]

最外面包含块有 container-fluid类，表明内容布局是流布局，其主要作用是作为一个包含块来...

			
		

	





	

		

			

				
					
Bootstrap实战 - 瀑布流布局

				
			

			

				

					除除的博客
				

				

					12-05
					
					4218
					
				

			

		

		

			
				
讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。

			
		

	





	

		

			

				
					
bootstrap响应式布局左右结构项目模版

				
			

			

				

					06-01
				

			

		

		

			
				
2. **响应式布局**：响应式设计是现代网页设计的关键，它通过媒体查询（Media Queries）和流式布局（Fluid Grids）来实现。在这个项目模版中，网页元素会根据浏览器窗口大小变化，如导航栏、内容区域和侧边栏会进行...

			
		

	





	

		

			

				
					
Bootstrap 网格系统布局详解

				
			

			

				

					08-31
				

			

		

		

			
				
Bootstrap 网格系统是一种响应式、移动设备优先的流式网格系统，可以随着屏幕或视口尺寸的增加自动分为最多12列。网格系统通过一系列包含内容的行和列来创建页面布局。在平面设计中，网格是一种由一系列用于组织内容...

			
		

	





	

		

			

				
					
06前端学习之移动web开发：移动布局(流式布局)、Flex伸缩布局、移动响应式web开发(rem布局)、响应式布局(Bootstrap框架)

				
			

			

				

					浅弋、璃鱼的博客
				

				

					07-26
					
					775
					
				

			

		

		

			
				
文章目录一、移动布局(流式布局):二、Flex伸缩布局:
一、移动布局(流式布局):
二、Flex伸缩布局:



			
		

	





	

		

			

				
					
02-流式布局.zip

				
			

			

				

					09-01
				

			

		

		

			
				
例如，使用Bootstrap框架，它内置了预定义的栅格系统，基于栅格的流式布局可以轻松实现。Bootstrap的栅格系统将页面分为12列，通过调整类选择器，可以控制元素在不同屏幕尺寸下的显示方式。  五、挑战与注意事项 ...

			
		

	





	

		

			

				
					
Bootstrap页面布局3 - BS布局以及流动布局

				
			

			

				

					weixin_30726161的博客
				

				

					07-30
					
					302
					
				

			

		

		

			
				
1、
　　<h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1>
　　得到如图所示：
　　　　　　　　
2、给需要的元素添加一个容器，使其居中显示
　　<div class='container'>
　　　　<h1 class='page-he...

			
		

	





	

		

			

				
					
uflo+springboot2.0.3审批流的demo

				
			

			

				

					10-11
				

			

		

		

			
				
uflo和springboot2.0.3结合审批流的demo示例，可以进行在web页面上进行用户角色的配置！希望对大家有帮助，谢谢！

			
		

	





	

		

			

				
					
前端web开发之移动端笔记【流式布局，flex布局，rem布局，响应式布局(bootstrap)】

				
			

			

				

					q1471729313的博客
				

				

					01-07
					
					2332
					
				

			

		

		

			
				
移动端基础

mate视口标签
视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽。想要理想视口，我们需要给我们的移动端页面添加 meta视口标签。

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&g

			
		

	





	

		

			

				
					
Bootstrap布局

				
			

			

				

					歪脖先生的博客
				

				

					03-04
					
					1940
					
				

			

		

		

			
				
Bootstrap布局Bootstrap提供了两种类型的布局容器，一种是固定宽度的布局容器，一种是流式布局容器。将栅格放在某种容器中，即可实现相应的布局。固定布局将Bootstrap的默认栅格放到 class="container" 的容器中，即可创建固定宽度的布局。固定布局在整个页面上居中显示。如：&lt;body&gt;  &lt;div class="container"&gt;    .....

			
		

	





	

		

			

				
					
Bootstrap 流式栅格系统

				
			

			

				

					歪脖先生的博客
				

				

					03-04
					
					1921
					
				

			

		

		

			
				
流式栅格系统Bootstrap的默认栅格系统没有启用响应式布局，如果加入响应式布局的CSS文件bootstrap-responsive.css，栅格系统会自动根据视口（viewport）宽度，在 724px 到 1170px 进行动态调整。当视口宽度小于 767px 时，这些列将采用流式布局，并在垂直方向堆叠。流式栅格系统对每一列的宽度定义使用百分比，而不是像素。流式网格系统与固定网格系统一样都具...

			
		

	





	

		

			

				
					
bootstrap常用的几种布局

				
			

			

				

					m0_56565958的博客
				

				

					03-12
					
					1145
					
				

			

		

		

			
				
五、弹性布局（rem/em布局）：使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。三、自适应布局（Adaptive Layout）：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。2、优点：这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式。

			
		

	





	

		

			

				
					
Bootstrap的行、列布局设计(网络-网格系统设计)

				
			

			

				

					昊虹AI笔记
				

				

					09-05
					
					3858
					
				

			

		

		

			
				
Bootstrap的行、列布局设计(网络系统设计)

			
		

	





	

		

			

				
					
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)

				
			

			

				

					xy_is_fhh的博客
				

				

					12-11
					
					4151
					
				

			

		

		

			
				
一：单独制作移动端页面

1.流式布局(百分比布局)

· 流式布局，就是百分比布局，也称为非固定像素布局

· 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

· 流式布局方式是移动端web开发使用的比较常见的布局方式。

· max-width 最大宽度(max-height 最大高度)

· min-width 最小宽度(min-height 最小高度)

演示 ????


<!DOCTYPE html>
<html lang="en.

			
		

	





	

		

			

				
					
深入理解BootStrap之栅格系统（布局）

					
热门推荐

				
			

			

				

					 秋水不寒的专栏
				

				

					05-26
					
					2万+
					
				

			

		

		

			
				
1、栅格系统（布局）

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：


			
		

	





	

		

			

				
					
Android流式布局的自定义View实现详解

				
			

			

				

					
				

			

		

		

			
				
早期可以通过继承ViewGroup类来自定义流式布局，而到了Android 5.0及以上版本，推荐使用FlexboxLayout、GridLayout等更先进的布局管理器来实现流式布局，或者可以利用第三方库如Android-Bootstrap或Easy-Android-...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值