<!DOCTYPE HTML>
<HTML lang="zh-CN">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">
<!-- 上述3个Meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<Title>bootstrapTest</Title>
<!-- bootstrap -->
<link href="https://cdn.Jsdelivr.net/npm/[email protected]/dist/CSS/bootstrap.min.CSS" rel="stylesheet">
<!-- HTML5 shim 和 Respond.Js 是为了让 ie8 支持 HTML5 元素和媒体查询（media querIEs）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 HTML 页面拖拽到浏览器中）访问页面时 Respond.Js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.Jsdelivr.net/npm/[email protected]/dist/HTML5shiv.min.Js"></script>
<script src="https://cdn.Jsdelivr.net/npm/[email protected]/dest/respond.min.Js"></script>
<![endif]-->
</head>
<body>
<div >
<h1>你好，世界！</h1>
bootstrap栅格布局是灵活使用bootstrap的基础。bootstrap将屏幕分为12等分，在具体的div中，可以通过设置div的所占等分的数字确定其在屏幕中占有的宽度。如：
<div ><!--表示另起一行-->
<div ></div>
<div ></div>
</div>
在第一个div中,第二个div中,其中‘8’和‘4’就是其div所占屏幕宽度的数值，加在一起等于‘12’。也就是第一个div占整个屏幕宽度的‘8/12’,第二个div占‘4/12’。 注：在上述代码中为了突显区块，我们设置了div的边框宽度为1像素黑色实线，高度设为100像素。
<span aria-hIDden="true"></span>
<hr>
<table >
<!-- On rows -->
<tr ><td>ddd</td></tr>
<tr ><td>fff </td</tr>
<tr ><td>d </td</tr>
<tr ><td>dd </td</tr>
<tr ><td>d </td</tr>
</table>
<hr>
col-xs-* 超小屏幕 手机 (<768px) <br>
col-sm-* 小屏幕 平板 (≥768px) <br>
col-md-* 中等屏幕 桌面显示器 (≥992px) <br>
col-lg-* 大屏幕 大桌面显示器 (≥1200px) <br>
<div ><!--表示另起一行-->
<div ></div>
<div ></div>
</div>
<h3>多个布局属性</h3>
如果想让一个div在不同的屏幕中占有不同的屏宽该怎么做呢？ bootstrap允许我们在一个div中写多个类别的布局属性，从而让该div在不同的屏幕中呈现不同的屏宽。如：
<div >
<div ></div>
</div>
该div在中等屏幕中占有‘8/12’，在手机中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。
<hr>
<div role="navigation">
<div >
<div >
<a href="首页URL">顶求网</a>
<a href="图书页面URL">图书</a>
<a href="文章页面URL">文章</a>
</div>
<div >
<button type="button" data-toggle="dropdown">
会员登陆 <span ></span>
</button>
<ul role="menu">
<li><a href="会员登陆页面URL" target="_top">会员登陆</a></li>
<li><a href="会员注册页面URL" target="_top">会员注册</a></li>
</ul>
</div>
</div>
</div>
<hr>
</div>
<!-- jquery (bootstrap 的所有 JavaScript 插件都依赖 jquery，所以必须放在前边) -->
<script src="https://cdn.Jsdelivr.net/npm/[email protected]/dist/jquery.min.Js"></script>
<!-- 加载 bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.Jsdelivr.net/npm/[email protected]/dist/Js/bootstrap.min.Js"></script>
</body>
</HTML>
以上是内存溢出为你收集整理的bootstrapTest全部内容，希望文章能够帮你解决bootstrapTest所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）