day 58 关于bootstrap
<!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-block
visible-xs-block
<div class="visible-xs-block">只有小屏幕才能看见我</div> <script src="jquery-3.2.1.min.js"></script>
</body>
</html>
day 58 关于bootstrap的更多相关文章
- 敏捷数据科学：用Hadoop创建数据分析应用
敏捷数据科学:用Hadoop创建数据分析应用(数据分析最佳实践入门敏捷大数据首作分步骤|全流程演示思路.工具与方法) [美]Russell Jurney(拉塞尔·朱尔尼) 著 冯文中 朱洪波 译 ...
- 手动部署 kubernetes HA 集群
前言 关于kubernetes HA集群部署的方式有很多种(这里的HA指的是master apiserver的高可用),比如通过keepalived vip漂移的方式.haproxy/nginx负载均 ...
- Openshift 4.4 静态 IP 离线安装系列：初始安装
上篇文章准备了离线安装 OCP 所需要的离线资源,包括安装镜像.所有样例 Image Stream 和 OperatorHub 中的所有 RedHat Operators.本文就开始正式安装 OCP( ...
- day 58 bootstrap part2
bootstrap组件的官网, https://v3.bootcss.com/components/#page-header 在bootstrap里面出了HTML和css样式之外还有很多的辅助工具,我 ...
- day 58 bootstrap -part1
我们的bootstrap主要使用都是官网里面的内容,官网里面的都整理得很完备,有需要的时候就直接去里面找即可, 关于这个bootstrap,我所理解的就是,我们前面所学的那些,从html开始一直到后面 ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- 利用Bootstrap快速搭建个人响应式主页（附演示+源码）
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
- Bootstrap Metronic 学习记录（二）菜单栏
1.简介 1) .环境配置 2) .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...
- Ubuntu 14.04 编译安装 boost 1.58
简介 Boost is a set of libraries for the C++ programming language that provide support for tasks and s ...
随机推荐
- Huffman Coding
哈夫曼树 霍夫曼编码是一种无前缀编码.解码时不会混淆.其主要应用在数据压缩,加密解密等场合. 1. 由给定结点构造哈夫曼树 (1)先从小到大排序(nlogn) (2)先用最小的两个点构造一个节点,父节 ...
- 77. Combinations (java 求C(n,k)的组合，排除重复元素)
题目: Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. 解析:同求全 ...
- POJ No.2386 Lake Counting
题目链接:http://poj.org/problem?id=2386 分析:八联通的则为水洼,我们则需遍历一个单位附近的八个单位并将它们都改成'.',但附近单位可能仍连接着有'W'的区域,这种情况下 ...
- 迭代FFT
int reverse(int x, int len){ ; ; i < len; i <<= ){ t <<= ; ; } return t; } Complex A[ ...
- 【其他】【服务器】【2】把jar包做成服务，在Service中管理
三个文件:service_install.xml,service_install.exe,install-service.bat: 和xx.jar放在同一个目录下 service_install.xm ...
- Leetcode 5016. 删除最外层的括号
5016. 删除最外层的括号 显示英文描述 我的提交返回竞赛 用户通过次数446 用户尝试次数469 通过次数456 提交次数577 题目难度Easy 有效括号字符串为空 ("&quo ...
- Web Services的学习一
1.Web Services可以将应用程序转换成为网络应用程序,也就是说可以通过Web Services,应用程序可以向全世界发布信息,或者提供功能. 而且通过Web Services发布的,可以被其 ...
- 一个典型的多表参与连接的复杂SQL调优（SQL TUNING）引发的思考
今天在看崔华老师所著SQL优化一书时,看到他解决SQL性能问题的一个案例,崔华老师成功定位问题并进行了解决.这里,在崔华老师分析定位的基础上,做进一步分析和推理,以便大家一起研究探讨,下面简述该案例场 ...
- SQL优化过程中常见Oracle HINT
在SQL语句优化过程中,我们经常会用到hint,现总结一下在SQL优化过程中常见Oracle HINT的用法: 1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量, ...
- 一款c语言实现的赛车游戏
博主学习c语言已经有一段时间了,出于对自己学习检验的目的,自制了一款c语言赛车游戏. 由于本质是检验和尝试,所以并没有注重游戏的界面.下文是开发文档,在博主的github网页可以下载源码,注意本项目使 ...