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 ...
随机推荐
- Linux简介和安装
Andrew S. Tanenbaum参考Unix,写了Minix,并开源,Linus Torvalds以其为模板写了Linux. Linux包含内核版本和发行版本. Linux内核版本 Linux内 ...
- Spring Batch 批量处理策略
为了帮助设计和实现批量处理系统,基本的批量应用是通过块和模式来构建的,同时也应该能够为程序开发人员和设计人员提供结构的样例和基础的批量处理程序. 当你开始设计一个批量作业任务的时候,商业逻辑应该被拆分 ...
- 卸载WPS后怎么WORD的图标还是WPS
在电脑中选择使用Microsoft Office并将之前安装的WPS Office办公软件卸载了.但是卸载之后发现电脑系统中的Word.Excel等文件无法正常显示图标.在这样的情况下,我们应该如何解 ...
- (CCPC-Final 2018)K - Mr. Panda and Kakin
题意:x是\([1e5,1e9]\)的随机数,p是小于x的最大素数,q是大于等于x的最小素数,\(n=pq\),\(c=f^{2^{30}+3}\mod{n}\),给n和c求f 题解:rsa解密,首先 ...
- SQL Server查询优化中的两个选项
本文中,我们将介绍两个SQL Server中的可用概念,它们是使用SQL Server时值得注意的技术. 1. OPTIMIZE FOR Unknown SQL Server 2005版 ...
- Oracle 12c新特性之——TABLE ACCESS BY INDEX ROWID BATCHED
Oracle12c开始,我们在获取SQL语句的执行计划时,也会经常看到"TABLE ACCESS BY INDEX ROWID BATCHED"操作,那么,这个操作到底是什么意思呢 ...
- 正则表达式test()和exec()、 search() 和 replace()用法实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- laravel创建资源路由控制器
php artisan make:controller PhotoController --resource
- jsp 中文乱码
解决jsp中文乱码问题的几个步骤 1 jsp页面设置 <%@ page language="java" contentType="text/html; ...
- learning at command AT+CEREG
AT command AT+CEREG [Purpose] Learning how to query the network registration status [Eeviro ...