<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!--优先使用手机端 viewport 在手机能显示-->    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>练习</title>    <!--引用bootstrap 其实就是引用的的是压缩版bootstrap.min.css-->    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">    <style>

    </style></head><body><!--table-bordered 修改颜色--><!--table-hover  鼠标点上去换色--><!--text-center  文本居中--><!--table-condensed  让表格变得更紧凑--><!--以下代表不同的颜色--><!--success--><!--info--><!--warning--><!--danger--><!--table-responsive 响应式表格,-->

<!--<div class="container">-->    <!--<table class="table   table-bordered table-hover text-center table-condensed">-->        <!--<thead>-->        <!--<tr>-->            <!--<th class="text-center">#</th>-->            <!--<th class="text-center">姓名</th>-->            <!--<th class="text-center">爱好</th>-->            <!--<th class="text-center">操作</th>-->        <!--</tr>-->        <!--</thead>-->        <!--<tbody class="text-center">-->        <!--<tr class="active">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->        <!--<tr class="success">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->        <!--<tr class="info">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->        <!--<tr class="warning">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->        <!--<tr class="danger">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->

        <!--</tbody>-->    <!--</table>-->

    <!--<div class="table-responsive">-->        <!--<table class="table table-striped table-bordered table-hover text-center table-condensed">-->            <!--<thead>-->            <!--<tr>-->                <!--<th class="text-center">#</th>-->                <!--<th class="text-center">姓名</th>-->                <!--<th class="text-center">爱好</th>-->                <!--<th class="text-center">操作</th>-->            <!--</tr>-->            <!--</thead>-->            <!--<tbody class="text-center">-->            <!--<tr class="active">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->            <!--<tr class="success">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->            <!--<tr class="info">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->            <!--<tr class="warning">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->            <!--<tr class="danger">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->

            <!--</tbody>-->        <!--</table>-->    <!--</div>--><!--</div>-->

<!--form-inline+form-group 实现表单横排显示（Bootstrap）-->  <!--sr-only （仅供）屏幕阅读器--><!--"exampleInputAmount  例如输入之和--><!--input-group--><!--input-group-addon   输入添加--><!--btn-primary 预定义样式--><!--Transfer cash   现金移转 -->

<!--<form class="form-inline">-->    <!--<div class="form-group">-->        <!--<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>-->        <!--<div class="input-group">-->            <!--<div class="input-group-addon">￥</div>-->            <!--<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">-->            <!--<div class="input-group-addon">.00000</div>-->        <!--</div>-->    <!--</div>-->    <!--<button type="submit" class="btn btn-primary">Transfer cash</button>-->

<!--</form>--><!--表单出现三行的框--><!--form-control" rows="3   --><!--<textarea class="form-control" rows="3"></textarea>-->

<!--表单内多选单选 出现disabled--><!--label 内部的让其有关联--><!--label>--><!--<input type="checkbox" value="" disabled="">-->            <!--Option two is disabled</label>-->

<!--<form>-->    <!--<div class="checkbox">-->        <!--<label>-->            <!--<input type="checkbox" value="">-->            <!--Option one is this and that—be sure to include why it's great-->        <!--</label>-->    <!--</div>-->    <!--<div class="checkbox disabled">-->        <!--<label>-->            <!--<input type="checkbox" value="" disabled="">-->            <!--Option two is disabled-->        <!--</label>-->    <!--</div>-->    <!--<br>-->    <!--<div class="radio">-->        <!--<label>-->            <!--<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">-->            <!--Option one is this and that—be sure to include why it's great-->        <!--</label>-->    <!--</div>-->    <!--<div class="radio">-->        <!--<label>-->            <!--<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">-->            <!--Option two can be something else and selecting it will deselect option one-->        <!--</label>-->    <!--</div>-->    <!--<div class="radio disabled">-->        <!--<label>-->            <!--<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">-->            <!--Option three is disabled-->        <!--</label>-->    <!--</div>--><!--</form>-->

<!--选择2列 下拉选择5个--><!--<div class="col-md-2">-->    <!--<select multiple class="form-control">-->        <!--<option>1</option>-->        <!--<option>2</option>-->        <!--<option>3</option>-->        <!--<option>4</option>-->        <!--<option>5</option>-->    <!--</select>--><!--</div>-->

<!--占位符   placeholde--><!--：form-control控件 表单控件--><!--<input class="form-control input-lg" type="text"  placeholder=".input-lg">--><!--<input class="form-control"          type="text"  placeholder="Default input">--><!--<input class="form-control input-sm" type="text"  placeholder=".input-sm">-->

</body></html>

-------------------
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!--优先使用手机端 viewport 在手机能显示-->    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>练习</title>    <!--引用bootstrap 其实就是引用的的是压缩版bootstrap.min.css-->    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">    <style>

    </style></head><body><!--table-bordered 修改颜色--><!--table-hover  鼠标点上去换色--><!--text-center  文本居中--><!--table-condensed  让表格变得更紧凑--><!--以下代表不同的颜色--><!--success--><!--info--><!--warning--><!--danger--><!--table-responsive 响应式表格,-->

<!--<div class="container">-->    <!--<table class="table   table-bordered table-hover text-center table-condensed">-->        <!--<thead>-->        <!--<tr>-->            <!--<th class="text-center">#</th>-->            <!--<th class="text-center">姓名</th>-->            <!--<th class="text-center">爱好</th>-->            <!--<th class="text-center">操作</th>-->        <!--</tr>-->        <!--</thead>-->        <!--<tbody class="text-center">-->        <!--<tr class="active">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->        <!--<tr class="success">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->        <!--<tr class="info">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->        <!--<tr class="warning">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->        <!--<tr class="danger">-->            <!--<td>1</td>-->            <!--<td>Alex</td>-->            <!--<td>烫头</td>-->            <!--<td>xxx</td>-->        <!--</tr>-->

        <!--</tbody>-->    <!--</table>-->

    <!--<div class="table-responsive">-->        <!--<table class="table table-striped table-bordered table-hover text-center table-condensed">-->            <!--<thead>-->            <!--<tr>-->                <!--<th class="text-center">#</th>-->                <!--<th class="text-center">姓名</th>-->                <!--<th class="text-center">爱好</th>-->                <!--<th class="text-center">操作</th>-->            <!--</tr>-->            <!--</thead>-->            <!--<tbody class="text-center">-->            <!--<tr class="active">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->            <!--<tr class="success">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->            <!--<tr class="info">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->            <!--<tr class="warning">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->            <!--<tr class="danger">-->                <!--<td>1</td>-->                <!--<td>Alex</td>-->                <!--<td>烫头</td>-->                <!--<td>xxx</td>-->            <!--</tr>-->

            <!--</tbody>-->        <!--</table>-->    <!--</div>--><!--</div>-->

<!--form-inline+form-group 实现表单横排显示（Bootstrap）-->  <!--sr-only （仅供）屏幕阅读器--><!--"exampleInputAmount  例如输入之和--><!--input-group--><!--input-group-addon   输入添加--><!--btn-primary 预定义样式--><!--Transfer cash   现金移转 -->

<!--<form class="form-inline">-->    <!--<div class="form-group">-->        <!--<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>-->        <!--<div class="input-group">-->            <!--<div class="input-group-addon">￥</div>-->            <!--<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">-->            <!--<div class="input-group-addon">.00000</div>-->        <!--</div>-->    <!--</div>-->    <!--<button type="submit" class="btn btn-primary">Transfer cash</button>-->

<!--</form>--><!--表单出现三行的框--><!--form-control" rows="3   --><!--<textarea class="form-control" rows="3"></textarea>-->

<!--表单内多选单选 出现disabled--><!--label 内部的让其有关联--><!--label>--><!--<input type="checkbox" value="" disabled="">-->            <!--Option two is disabled</label>-->

<!--<form>-->    <!--<div class="checkbox">-->        <!--<label>-->            <!--<input type="checkbox" value="">-->            <!--Option one is this and that—be sure to include why it's great-->        <!--</label>-->    <!--</div>-->    <!--<div class="checkbox disabled">-->        <!--<label>-->            <!--<input type="checkbox" value="" disabled="">-->            <!--Option two is disabled-->        <!--</label>-->    <!--</div>-->    <!--<br>-->    <!--<div class="radio">-->        <!--<label>-->            <!--<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">-->            <!--Option one is this and that—be sure to include why it's great-->        <!--</label>-->    <!--</div>-->    <!--<div class="radio">-->        <!--<label>-->            <!--<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">-->            <!--Option two can be something else and selecting it will deselect option one-->        <!--</label>-->    <!--</div>-->    <!--<div class="radio disabled">-->        <!--<label>-->            <!--<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">-->            <!--Option three is disabled-->        <!--</label>-->    <!--</div>--><!--</form>-->

<!--选择2列 下拉选择5个--><!--<div class="col-md-2">-->    <!--<select multiple class="form-control">-->        <!--<option>1</option>-->        <!--<option>2</option>-->        <!--<option>3</option>-->        <!--<option>4</option>-->        <!--<option>5</option>-->    <!--</select>--><!--</div>-->

<!--占位符   placeholde--><!--：form-control控件 表单控件--><!--<input class="form-control input-lg" type="text"  placeholder=".input-lg">--><!--<input class="form-control"          type="text"  placeholder="Default input">--><!--<input class="form-control input-sm" type="text"  placeholder=".input-sm">-->

</body></html>
---------------
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>图片样式</title>    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"></head><body><!--img-rounded  方的--><!--img-circle   圆的--><!--img-thumbnail  边上带个小边框--><!--<div class="container">-->    <!--<img src="Bootstrap_i2.png" alt="..." class="img-rounded">-->    <!--<img src="Bootstrap_i2.png" alt="..." class="img-circle">-->    <!--<img src="Bootstrap_i2.png" alt="..." class="img-thumbnail">--><!--</div>-->

visible-sm-blockvisible-xs-block<div class="visible-xs-block">只有小屏幕才能看见我</div>

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




转载于:https://www.cnblogs.com/xiaoluoboer/p/8244713.html
												


											

day  58  关于bootstrap相关推荐
	

    
								
  1. Bootstrap可以这样学-曹领雄-专题视频课程
		
    Bootstrap可以这样学-123人已学习 课程介绍         课程结构采用思维导图制作,分类清楚,逻辑清晰.可以很直观的了解到所有的Bootstrap的所有内容,相对于官方文档,更适合初学B ...
    
		
    2. 
						
  2. 万字长文，说透了 Openshift4 的安装过程！
		
    上篇文章准备了离线安装 OCP 所需要的离线资源,包括安装镜像.所有样例 Image Stream 和 OperatorHub 中的所有 RedHat Operators.本文就开始正式安装 OCP( ...
    
		
    3. 
						
  3. Openshift 4.4 静态 IP 离线安装系列：初始安装
		
    Openshift 4.4 静态 IP 离线安装系列:初始安装 上篇文章准备了离线安装 OCP 所需要的离线资源,包括安装镜像.所有样例 Image Stream 和 OperatorHub 中的所有 ...
    
		
    4. 
						
  4. How To Deploy OpenShift Container Platform 4.8 on KVM
		
    https://computingforgeeks.com/how-to-deploy-openshift-container-platform-on-kvm/https://computingfor ...
    
		
    5. 
						
  5. 响应式Web程序设计【15】
		
    答案:微信搜索[电大题酷]小程序 1. JavaScript中window对象的clearTimeout(timerID)方法的作用是( ). A.   设置指定的timerID计时器. B.   取 ...
    
		
    6. 
						
  6. OpenShift 容器平台社区版 OKD 4.10.0部署--基于VSphere
		
    参考:OpenShift 容器平台社区版 OKD 4.10.0部署 OpenShift - 部署 OKD 4.5_51CTO博客_openshift 部署 一.Openshift简介 RedHat O ...
    
		
    7. 
						
  7. OpenShift 容器平台社区版 OKD 4.10.0部署
		
    OpenShift简介 RedHat OpenShift 是一个领先的企业级 Kubernetes 容器平台,它为本地.混合和多云部署提供了基础.通过自动化运营和简化的生命周期管理,OpenShift ...
    
		
    8. 
						
  8. Bootstrap框架和inconfont、font-awesome使用
		
    Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
    
		
    9. 
						
  9. vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题
		
    在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2  ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. python——类和对象之__str__方法的使用
		
    2. 
						
  2. WOC？老板让我从Word中复制出1000张图片？
		
    3. 
						
  3. Effective Java之通过接口引用对象(五十二)
		
    4. 
						
  4. mysql递归查询之后的排序问题_MySQL递归排序查询+树节点生成
		
    5. 
						
  5. Chrome格式化json
		
    6. 
						
  6. IT餐馆—第一回 前言
		
    7. 
						
  7. Webdriver常用的元素定位
		
    8. 
						
  8. Java基础知识强化之集合框架笔记15：List集合的特点
		
    9. 
						
  9. 假装认真的LaTeX学习笔记（2）—— LaTeX中如何修改字体（fontspec宏包使用方法）
		
    10. 
						
  10. 现在能否办理5G卡？联通：尚未对公众客户开放办理
		
    11. 
						
  11. 计算机二级word海报体,2016年计算机二级《MSOffice》全真模拟试题
		
    12. 
						
  12. 程序猿生存指南-7 相亲之路（下）
		
    13. 
						
  13. 单射、满射、双射（一一映射）
		
    14. 
						
  14. C# Winform 实现窗体无系统边框，但是具有系统边框的所有功能，同时保证控件不闪烁
		
    15. 
						
  15. java中arSigal_基于AR模型谱估计算法（Yule-Walker方法与Burg方法）的C++实现
		
    16. 
						
  16. 百度2016研发工程师在线编程题
		
    17. 
						
  17. 艾美捷胆固醇肉豆蔻酸酯说明书和相关研究
		
    18. 
						
  18. [Python中的除法、除法取整、除法取余] [运算符分别为：/、//、%]
		
    19. 
						
  19. MySQL 创建函数入门
		
    20. 
						
  20. 通俗的解释卡尔曼滤波（Kalman Filter）以及其Python的实现
		
    21. 
		

	


热门文章
	

    
									
  1. python详细安装教程环境配置-python环境配置详细步骤
			
    2. 
						
  2. python代码示例图形-纯干货：手把手教你用Python做数据可视化（附代码）
			
    3. 
						
  3. python电脑下载有问题-Python 解决火狐浏览器不弹出下载框直接下载的问题
			
    4. 
						
  4. python爬虫流程-Python爬虫入门
			
    5. 
						
  5. python处理表格数据-用Python创建/读取/导出表格数据文件
			
    6. 
						
  6. python绘制曲线图-python怎么画曲线图
			
    7. 
						
  7. python3爬虫实例-Python3 爬虫实例（一）-- 简单网页抓取
			
    8. 
						
  8. python使用方法视频-python读取视频流提取视频帧的两种方法
			
    9. 
						
  9. python学到什么程度可以做兼职-Python学到什么程度就可以找工作？
			
    10. 
						
  10. python三层装饰器-python 三层嵌套定义装饰器
			
    11.