BootStrap -- Grid System

最新推荐文章于 2024-08-26 20:25:07 发布
最新推荐文章于 2024-08-26 20:25:07 发布
阅读量101 收藏
点赞数
文章标签： javascript ViewUI 
<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>

mybwu_com
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习（302）：bootstrap学习4之grid下
歌谣的博客
01-03 177
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Bootstrap---Grid system 网格系统
网站开发初中级代码参考-转载
04-23 131
Bootstrap 使用12网格系统，即将整体页面（有效页面）分为12等分。使用的时候通过添加span*类来区分。如： &lt;divclass=”container”&gt; &lt;div class=”row”&gt; &lt;div class=”span6”&gt;&lt;/div&gt; &lt;div class=”span6”&gt;&lt;/div&gt; &...
**BOOTSTRAP** Bootstrap CSS-网格系统grid
Estom_yin的博客
07-25 669
>Bootstrap网格系统 >>网格的定义 Bootstrap提供了一套响应式、移动设备优先的流逝网格系统，随着屏幕或视口（viewport）尺寸的增加，系统自动分为最多12列。 在平面设计中，网格是由一种或一系列用于组织内容的相交的直线组成的结构，广泛应用于设计布局和内容布局。在网页设计中，它是一种用于快速创建一直的布局和有效地使用HTML和CSS的方法。 用于组织内容，让网站易于
960 Grid System 基本使用实例
zhengxiujuan的专栏
07-01 1152
首先，你需要学习关于”如何让框架工作”。你可以通过自己的尝试来学习，不过我仍然会在这里为大家进行讲解，那就开始吧。不要编辑960.css先说一点需要注意的:不要编辑960.css文件，如果你修改了它，那么你今后将无法更新这个框架。读取网格在我们使用外部文件中的CSS代码之前，首先要在我们的HTML文件中调用它们。像这样调用:当我们调用好它们以后，我们要调用自己的CSS文件了。
bootstrap 网格系统（Grid system） 总结与实践
往前的娘娘
06-27 1818
概述： 小知识点 1、@media 会在网页宽度为大于768、992、1200像素，设置网页container修饰div宽度分别为 750、970、1170 2、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸（一般指手机）、小尺寸（平板电脑）、中等尺寸(普通PC)、大型尺寸 3、col-sm-* 小于768会堆显示不会分栏，col-md-*
Bootstrap研究1-精巧的网格布局系统
weixin_30772105的博客
03-28 140
本网格布局系统属于Scaffolding（框架，布局）部分。在Scaffolding里面有（固定）网格布局（Grid System）和流式网格布局（Fluid Grid System）。本文讨论第一种固定网格布局。 Bootstrap采用的是12列布局格式，即在页面一行之内最多可以布置12列。当然我们通常不会那么变态。我们通常是使用2列，或者3列，最多不会超过4列。那么具体怎么设置这些列呢？ok，...
Bootstrap-4-grid-system:Bootstrap 4的网格和响应实用程序类，没有任何额外功能。 Sass和CSS。 轻巧但功能强大。 品味风格
04-28
Bootstrap-4-网格系统 Bootstrap 4的网格和响应实用程序类，没有任何额外功能。 Sass ans CSS。 轻巧但功能强大。 品味风格。 ##说明在css /文件夹中包含一个预编译的css文件，以获取自定义版本，请遵循以下说明： ...
understanding-bootstrap-containers-and-grid-system-from-source-code:用于学习引导容器和网格系统的演示-bootstrap source code
03-25
从源代码了解引导容器和网格系统 用于学习引导容器和网格系统的... grid_sysytem文件夹内部的html里列出了替代系统中一些不同的预定义列的类，并说明了在不同viewport尺寸下的布局表现。 更详细的解读参见慕课网手记
bootstrap-3.3.7-dist
05-24
这主要通过一系列的栅格系统（Grid System）实现，它使用行（Row）和列（Column）来组织内容，确保在任何设备上都能保持良好的视觉效果。 2. **预定义的类（Class）**：Bootstrap提供了一套丰富的预定义CSS类，如 `...
bootstrap-porject-1:bootstrap-porject-1
03-06
5. **栅格（Grid System）**：项目可能会使用Bootstrap的栅格系统来安排内容，确保在不同设备上布局的正确显示。 6. **脚本（JavaScript Plugins）**：除了HTML和CSS，Bootstrap还提供了许多JavaScript插件，如模态...
react-grid-system：用于React的功能强大的类似Bootstrap的响应式网格系统
02-04
react-grid-system v7为超大屏幕添加了新的屏幕类xxl 。 这可能会对您的应用造成影响。 要退出此新屏幕类别，请使用以下命令： import { setConfiguration } from 'react-grid-system' ; setConfiguration ( { ...
bootstrap精简教程
weixin_34080903的博客
04-22 459
  bootstrap 的学习非常简单，并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。 bootstrap中文网：http://v3.bootcss.com/   bootstrap提供了三种类型的下载： ------------------------------------------------------------- 用于生产环境的 Bootstrap...
Bootstrap-treeview使用API
12-01 3403
1、首先要在页面中引入依赖文件和 bootstrap-treeview.js文件 2、可以使用任何HTML DOM元素来作为该列表树的容器： 3、该列表树插件最基本的调用方法如下：对于JavaWeb而言data需要我们从后台返回树形数据。 function getTree() { return data; } $(‘#tree’).
使用960网格系统(960 Grid System)设计网页
热门推荐
小李专栏
01-03 1万+
如果您喜欢这些文章，欢迎点击此处订阅本Blog<!--google_ad_client = "pub-7343546549496470";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "image";//2
vue ref和reactive区别
灰海
08-25 542
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 385
npm。
2024前端面试题-js篇
FormAda的博客
08-22 905
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
layui栅格布局设置列间距不起作用
最新发布
gc_2299的博客
08-26 584
记录layui栅格布局设置列间距不起作用的解决办法
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 848
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
如何使用ssm实现模具制造企业订单跟踪管理系统+vue
a253399414的博客
08-26 488
【代码】ssm模具制造企业订单跟踪管理系统+vue
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值