`

Bootstrap网格系统布局

bootstrap 
阅读更多
layout.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-wdith,initial-scale=1.0">
<!--[if lt IE 9]>
      <script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
 <h1 class="page-header">布局<small> 使用Bootstrap网格系统布局网页</small></h1>
    
    <p>Bootstrap网格布局就是将网页分成一定的栏数，Bootstrap网格系统就是将网页分成12栏，如果想让一个元素占用一定栏数的宽度，你可以在这个元素上应用一个特定的类，Bootstrap使用的是span加栏数</p>
    
    <h2 class="page-header">区块一</h2>
    <p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
    
    <h2 class="page-header">区块二</h2>
    <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
    
    <h2 class="page-header">区块三</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>

<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>


layout-finish.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局完成</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-wdith,initial-scale=1.0">
<!--[if lt IE 9]>
      <script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container"><!-- 内容显示在页面的中间 -->
 <h1 class="page-header">布局<small> 使用Bootstrap网格系统布局网页</small></h1>
    
    <p>Bootstrap网格系统布局就是将网页分成一定的栏数，Bootstrap网格系统就是将网页分成12栏，如果想让一个元素占用一定栏数的宽度，你可以在这个元素上应用一个特定的类，Bootstrap使用的是span加栏数</p>
    
    <div class="row">
    	<div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块一</h2>
	    	<p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
	    </div>
	    
	    <div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块二</h2>
	    	<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
	    </div>
	    
	    <div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块三</h2>
	    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
    	</div>
    </div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
分享到：
| 开始学习Bootstrap
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Bootstrap 网格系统布局详解

    二、什么是Bootstrap网格系统？ Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更...

    jQuery Bootstrap网格布局和列表布局切换代码

    本话题将深入探讨如何利用jQuery和Bootstrap实现网格布局与列表布局之间的切换，这对于创建灵活且用户友好的界面至关重要。 在Bootstrap中，网格系统是基于12列的栅格布局，允许开发者创建响应式的页面布局。通过...

    jQuery可伸展的Bootstrap图片网格布局代码.zip

    在这个代码示例中，jQuery被用来增强Bootstrap网格系统的功能，特别是在响应式布局的动态调整上。jQuery允许开发者在用户交互或页面加载后执行特定的JavaScript代码，从而实现更复杂的行为。 可能的实现方式是，当...

    基于Bootstrap的可拖拽式网格系统插件

    总的来说，jquery.gridstrap.js提供了一个强大的工具，使开发者能够在Bootstrap环境中轻松创建和调整拖拽式网格布局。这个插件对于那些需要构建动态、互动且适应性强的网页项目的人来说，无疑是一个宝贵的资源。通过...

    基于Bootstrap的网格布局和列表布局切换特效

    在本主题“基于Bootstrap的网格布局和列表布局切换特效”中，我们将探讨如何利用Bootstrap的网格系统以及jQuery库实现动态的布局转换。 Bootstrap的网格系统是其核心特性之一，它提供了一种灵活的响应式布局方法。...

    jQuery可伸展的Bootstrap图片网格布局代码

    Bootstrap图片网格布局是一种高效、灵活的网页设计框架，它允许开发者创建响应式和移动优先的网站。在这个场景中，我们讨论的是一个利用jQuery增强的Bootstrap图片网格系统，它提供了类似于谷歌图片画廊的可伸展效果...

    【Bootstrap网格系统全攻略】构建响应式布局的秘籍

    1. **响应式布局**：Bootstrap的网格系统可以自动调整布局以适应不同的屏幕尺寸。 2. **预制组件**：提供了丰富的UI组件，如按钮、表单、导航条、卡片、弹窗等。 3. **定制性**：可以通过Sass变量轻松定制Bootstrap...

    bootstrap3离线布局工具.zip

    1. **网格系统**：Bootstrap3的12列网格系统是其布局的基础。工具中的网格组件让用户能方便地调整列宽，创建多列布局，并根据屏幕尺寸自动调整，实现响应式设计。 2. **组件**：包括导航条（navbar）、按钮...

    bootstrap可视化布局

    在"bootstrap可视化布局"中，我们将探讨如何利用Bootstrap的网格系统、预定义的CSS类以及其可视化工具来构建直观的网页布局。 Bootstrap的核心在于它的网格系统，这是一个基于Flexbox布局模型的12列流动网格。通过...

    bootstrap可视化布局系统

    在Bootstrap的可视化布局系统中，网格（Grid System）是最核心的组成部分。它基于12列的响应式栅格，可以根据屏幕尺寸动态调整元素的宽度，以适应不同设备的需求。例如，开发者可以将一个容器内空间分割为12等份，...

    基于Bootstrap的响应式可伸展的网格布局系统

    在“基于Bootstrap的响应式可伸展的网格布局系统”中，我们聚焦于Bootstrap的核心特性——网格系统（Grid System）。这个系统允许开发者创建灵活、自适应的页面布局，无论是在桌面端还是移动设备上都能提供良好的...

    Bootstrap响应式布局

    响应式布局的核心在于媒体查询（Media Queries）和流式网格系统（Fluid Grids）。在Bootstrap中，流式网格系统通过百分比定义容器、行和列的宽度，而非固定像素值，从而实现不同屏幕尺寸下的自适应。例如，Bootstrap...

    bootstrap布局模板

    1. **栅格系统**：Bootstrap的栅格系统是其布局的核心，它基于12列的网格模型，允许开发者通过简单的类来创建响应式的页面布局。你可以通过调整列的数量和排列方式，轻松地控制内容在不同设备上的展示。 2. **响应...

    bootstrap图片瀑布布局 Masonry插件

    首先，Bootstrap是Twitter推出的一个开源的前端框架，它包含了一系列响应式布局、移动设备优先的Web组件，如网格系统、下拉菜单、导航、表单、按钮等，极大地简化了网页开发工作。 Masonry是一个JavaScript插件，...

    Bootstrap在线编辑可视化布局系统模板

    Bootstrap在线编辑可视化布局系统模板是一种基于Bootstrap框架的创新设计工具，它允许用户通过直观的拖放界面轻松构建网页布局，而无需深入理解HTML、CSS或JavaScript的复杂细节。这个工具，名为LayoutIt!，旨在提高...

    Bootstrap商品图片网格布局代码

    首先，Bootstrap网格系统是基于12列的模型工作，允许你将页面分成最多12等份。你可以通过设置行(row)和列(column)来创建布局。例如，如果你想要创建一个两列的商品展示，你可以在一个`.row`类容器内放置两个`.col-sm...

    bootstrap3.3 布局工具 离线版本 没网络也能用

    通过使用`.container`、`.row` 和 `.col-*-*` 类，开发者可以创建灵活的网格布局，适应不同屏幕尺寸。例如，`.col-md-4` 表示在中等（medium）屏幕尺寸下占据12列中的4列。 ### 2. 响应式设计 (Responsive Design) ...

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    Bootstrap栅格系统是一种基于12列的响应式布局框架，旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果，优化用户体验。Bootstrap栅格系统的...

    离线版Bootstrap可视化布局

    然后，你就可以开始使用Bootstrap的类来添加样式和功能，如`container`、`row`和`col-*-*`来创建网格布局，或者使用`btn`、`navbar`、`form-control`等类来创建按钮和表单。 总的来说，离线版Bootstrap可视化布局是...

Magicbox
Global site tag (gtag.js) - Google Analytics