bootstrapTest
<!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/bootstrap@3.3.7/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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>你好，世界！</h1>
BootStrap栅格布局是灵活使用BootStrap的基础。BootStrap将屏幕分为12等分，在具体的DIV中，可以通过设置DIV的所占等分的数字确定其在屏幕中占有的宽度。如：
<div class="row"><!--表示另起一行-->
<div class="col-md-8" style="border:1px solid black;height:100px;"></div>
<div class="col-md-4" style="border:1px solid black;height:100px;"></div>
</div>
在第一个DIV中class="col-md-8",第二个DIV中class="col-md-4", 其中‘8’和‘4’就是其DIV所占屏幕宽度的数值，加在一起等于‘12’。也就是第一个DIV占整个屏幕宽度的‘8/12’,第二个DIV占‘4/12’。 注：在上述代码中为了突显区块，我们设置了DIV的边框宽度为1像素黑色实线，高度设为100像素。
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<hr>
<table class="table">
<!-- On rows -->
<tr class="active"><td>ddd</td></tr>
<tr class="success"><td>fff </td</tr>
<tr class="warning"><td>d </td</tr>
<tr class="danger"><td>dd </td</tr>
<tr class="info"><td>d </td</tr>
</table>
<hr>
col-xs-* 超小屏幕 手机 (<768px) <br>
col-sm-* 小屏幕 平板 (≥768px) <br>
col-md-* 中等屏幕 桌面显示器 (≥992px) <br>
col-lg-* 大屏幕 大桌面显示器 (≥1200px) <br>
<div class="row"><!--表示另起一行-->
<div class="col-xs-4" style="border:1px solid black;height:100px;"></div>
<div class="col-md-4" style="border:1px solid black;height:100px;"></div>
</div>
<h3>多个布局属性</h3>
如果想让一个DIV在不同的屏幕中占有不同的屏宽该怎么做呢？ BootStrap允许我们在一个DIV中写多个类别的布局属性，从而让该DIV在不同的屏幕中呈现不同的屏宽。如：
<div class="row">
<div class="col-md-8 col-xs-6 col-lg-4" style="border:1px solid black;height:100px;"></div>
</div>
该DIV在中等屏幕中占有‘8/12’，在手机中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。
<hr>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand active" href="首页URL">顶求网</a>
<a class="navbar-brand" href="图书页面URL">图书</a>
<a class="navbar-brand" href="文章页面URL">文章</a>
</div>
<div class="btn-group" style="margin-top:10px; float:right;">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
会员登陆 <span class="caret"></span>
</button>
<ul class="dropdown-menu" 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/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
bootstrapTest的更多相关文章
- MVC系列——MVC源码学习：打造自己的MVC框架（三：自定义路由规则）
前言:上篇介绍了下自己的MVC框架前两个版本,经过两天的整理,版本三基本已经完成,今天还是发出来供大家参考和学习.虽然微软的Routing功能已经非常强大,完全没有必要再“重复造轮子”了,但博主还是觉 ...
- MVC系列——MVC源码学习：打造自己的MVC框架（二：附源码）
前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...
- java8--类加载机制与反射(java疯狂讲义3复习笔记)
本章重点介绍java.lang.reflect包下的接口和类 当程序使用某个类时,如果该类还没有被加载到内存中,那么系统会通过加载,连接,初始化三个步骤来对该类进行初始化. 类的加载时指将类的clas ...
- AngularJS中bootstrap启动
对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html ...
- AngularJS API之bootstrap启动
对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了. 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到htm ...
- bootstrap入门-1.可视化布局
下载地址:http://v3.bootcss.com/getting-started/#download HTML模板: <!DOCTYPE html> <html> &l ...
- Bootstrap_基本HTML模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- java加载机制整理
本文是根据李刚的<疯狂讲义>作的笔记,程序有的地方做了修改,特别是路径,一直在混淆,浪费了好多时间!!希望懂的同学能够指导本人,感激尽............ 1.jvm 和 类的关系 当 ...
- 在 Ubuntu 12.04 上安装 GitLab6.0
安装环境: 操作系统: Ubuntu 12.4 LTS 英文 数据库: mysql5.5.32 web服务器: nginx1.4.1 首先, 添加git和nginx的ppa,并升级 ...
随机推荐
- JDBC链接数据库。
第一步,创建一个空包: 给包起个名字: 新建Modules: 给Modules起名: 创建libs文件: 点击file---->new---->project---->Directo ...
- spring总结————AOP面向切面总结
spring总结————AOP面向切面 一.spring aop概念 spring aop面向切面编程,java是面向对象的语言. 真正的service层代码 业务逻辑层再处理业务之前和之后都要进行一 ...
- 聊聊OkHttp实现WebSocket细节，包括鉴权和长连接保活及其原理！
一.序 OkHttp 应该算是 Android 中使用最广泛的网络库了,我们通常会利用它来实现 HTTP 请求,但是实际上它还可以支持 WebSocket,并且使用起来还非常的便捷. 那本文就来聊聊, ...
- Mol Cell Proteomics. | Elevated Hexokinase II Expression Confers Acquired Resistance to 4-Hydroxytamoxifen in Breast Cancer Cells（升高的己糖激酶II表达使得乳腺癌细胞获得对他莫昔芬的抗性）(解读人：黄旭蕾)
文献名:Elevated Hexokinase II Expression Confers Acquired Resistance to 4-Hydroxytamoxifen in Breast Ca ...
- 洛谷1972 HH的项链 树状数组查询区间内不同的数的数量
题目链接:https://www.luogu.com.cn/problem/P1972 题意大致是:给定一个序列长度为n,给出m个查询区间,要求响应是区间内不同的数的个数.为此我们考虑到树状数组的区间 ...
- CF1326C Permutation Partitions 题解，
原题链接 简要题意: 给定一个 \(1\) ~ \(n\) 的置换,将数组分为 \(k\) 个区间,使得每个区间的最大值之和最大.求这个值,和分区的方案数. 关键在于 \(1\) ~ \(n\) 的置 ...
- ASP.NET Core 奇淫技巧之伪属性注入
一.前言 开局先唠嗑一下,许久未曾更新博客,一直在调整自己的状态,去年是我的本命年,或许是应验了本命年的多灾多难,过得十分不顺,不论是生活上还是工作上.还好当我度过了所谓的本命年后,许多事情都在慢慢变 ...
- 说说自己为什么用Mac不用Win系统？
原本Mac和Win系统各有优劣,但偏偏最近有人误导身边的朋友说"学编程肯定是Windows系统呀,Mac不行的",又不给出有说服力的理由,于是我心有愤懑,正好趁机总结一下自己对于两 ...
- Rasa Stack：创建支持上下文的人工智能助理和聊天机器人教程
相关概念 Rasa Stack 是一组开放源码机器学习工具,供开发人员创建支持上下文的人工智能助理和聊天机器人: • Core = 聊天机器人框架包含基于机器学习的对话管理 • NLU = 用于自然语 ...
- 巴什博弈 HDU-1846
描述:一堆石子有 n 个 ,两个人开始轮流取,每人最多取m个,最少取1个,最后一个将石子取完的是赢家. 思路:对于先手来说,如果有(m+1)个石子,先手取 k 个,后手就可以取 m+1-k 个,所以有 ...