<script src="jquery.1.9.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<h2>Files Required</h2>
<h3>1.jquery.js</h3>
<h3>2.bootstrap.min.js</h3>
<h3>3.bootstrap.min.css</h3>
<h3>4.bootstrap-theme.min.css</h3>
<body>
<h3>Grid system </h3>
<p>1.layout </p>
<div class="row">
<div class="col-md-2 col-xs-2">
<p>col-md-2 is for desktop</p>
<p>col-xd-2 is for phone</p>
</div>
<div class="col-md-4 col-xs-4">
<p>col-md-4 is for desktop</p>
<p>col-xd-4 is for phone</p>
</div>
<div class="col-md-6 col-xs-6">
<p>col-md-6 is for desktop</p>
<p>col-xd-6 is for phone</p>
</div>
</div>
<p>2.offset</p>
<div class="row">
<div class="col-md-4">
<p>col-md-4 is for desktop</p>
<p>col-xd-4 is for phone</p>
</div>
<div class="col-md-4 col-offset-4">
<p>col-md-4 is for desktop</p>
<p>col-xd-4 is for phone</p>
</div>
</div>
<p>3.nested row sample</p>
<div class="row">
<div class="col-md-6">1<br/>1</div>
<div class="col-md-6">
<div class="col-md-12">2.1</div>
<div class="col-md-12">2.2</div>
</div>
</div>
<script >
$(document).ready(function(){
$(".row").children("div").css("border","2 solid #fff000");
$(".row-fluid").children("div").css("border","2 solid #fff000");
});
</script>
</body>
分享到：
相关推荐
Bootstrap-4-网格系统 Bootstrap 4的网格和响应实用程序类，没有任何额外功能。 Sass ans CSS。 轻巧但功能强大。 品味风格。 ##说明在css /文件夹中包含一个预编译的css文件，以获取自定义版本，请遵循以下说明： ...
从源代码了解引导容器和网格系统 用于学习引导容器和网格系统的... grid_sysytem文件夹内部的html里列出了替代系统中一些不同的预定义列的类，并说明了在不同viewport尺寸下的布局表现。 更详细的解读参见慕课网手记
react-grid-system v7为超大屏幕添加了新的屏幕类xxl 。 这可能会对您的应用造成影响。 要退出此新屏幕类别，请使用以下命令： import { setConfiguration } from 'react-grid-system' ; setConfiguration ( { ...
我想将与用于快速原型，或者用作我自己的UI组件库的入口点，或者如果我的应用程序只需要一个Bootstrap组件，现在我可以简单地安装该特定组件。 为了与其他任何库或框架轻松配合，这些组件都使用构建。 我想学习更...
主要为大家详细介绍了Bootstrap3 Grid system原理及应用,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Learn to play with Bootstrap's grid system and base CSS to ensure your designs are robust and that your development process is speedy and efficient. Then, you'll find out how you can extend your ...
Summary 36 Chapter 3: Powering a Rails App with Bootstrap's Grid System 37 What is Bootstrap's grid system? 38 Nesting columns 45 Implementing Bootstrap's grid system in a Rails application 46 Summary...
Learn to use the various Bootstrap CSS and HTML elements, and how to use the new Bootstrap 4 grid layout system with ASP.Net MVC Explore the different input groups and implement alerts, progress bars,...
Learn to use the various Bootstrap CSS and HTML elements, and how to use the new Bootstrap 4 grid layout system with ASP.Net MVC Explore the different input groups and implement alerts, progress bars,...
We then cover the grid system, basic Bootstrap components, HTML elements, and customization components for responsive and mobile first development. This is presented by creating a beautiful Landing ...
使用MySQL+ExpressJS+AngularJS+NodeJS尝试开发的图书管理系统，开发前端后台模块，后台用ExpressJS和NodeJS搭建服务器，前端用AngularJS，样式用的Bootstrap。自己封装了数据库连接池的接口，利用Java项目MVC的思想...
[Bootstrap_4][中文]_03.__Container,_斷點,_與Grid_system
You'll get started with the initial download and customization and a brief introduction to LESS, then move on to learn about the Grid system and Base CSS, which is tailor-made for quicker and more ...
登陆页面网站 基于引导4的登陆页面网站，用于教育目的**请参阅的
A hands-on introduction to building websites with Twitter Bootstrap's powerful front-end development framework Conquer responsive website layout with Bootstrap’s flexible grid system Leverage ...
You'll dive, fingers first, into the basics of both the tools,and once you're familiar with them, you'll get your hands dirty by working with Bootstrap's new Grid system and Angular's built-in ...
Bootstrap 网格系统（Grid System）的工作原理 21 媒体查询 21 网格选项 22 响应式的列重置 23 偏移列 25 嵌套列 26 列排序 28 Bootstrap 排版 31 标题 31 引导主体副本 33 强调 34 缩写 35 地址（Address） 36 引用...
Learn to play with Bootstrap's grid system and base CSS to ensure your designs are robust and that your development process is speedy and efficient. Then, you'll find out how you can extend your ...
Design layouts with responsive, offsetting, nesting columns of the grid system Customize themes using the latest Bootstrap 4 components Use the development and customization environment to create ...
You'll get started with the initial download and customization and a brief introduction to LESS, then move on to learn about the Grid system and Base CSS, which is tailor-made for quicker and more ...