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 ...
随机推荐
- VS Code设置中文插件
Vscode是一款开源的跨平台编辑器.默认情况下,vscode使用的语言为英文(en) 1)打开vscode工具: 2)使用快捷键组合[Ctrl+Shift+p],在搜索框中输入“configure ...
- P2469 [SDOI2010]星际竞速
在何Au的讲解下终于搞明白了这个以前的坑. 首先考虑最小路径覆盖. 这个题意又要求我们求出的最大流为n-1(这样才能保证路径为1条) 考虑高速航行模式的图怎么建,只需要保证最大流的同时费用最小即可,显 ...
- 『算法设计_伪代码』贪心算法_最短路径Dijkstra算法
Dijkstra算法实际上是一个贪婪算法(Greedy algorithm).因为该算法总是试图优先访问每一步循环中距离起始点最近的下一个结点.Dijkstra算法的过程如下图所示. 初始化 给定图中 ...
- 『Re』正则表达式模块_常用方法记录
『Re』知识工程作业_主体识别 一个比较完备的正则表达式介绍 几个基础函数 re.compile(pattern, flags=0) 将正则表达式模式编译成一个正则表达式对象,它可以用于匹配使用它的m ...
- spring boot(七)mybatis多数据源解决方案
说起多数据源,一般都来解决那些问题呢,主从模式或者业务比较复杂需要连接不同的分库来支持业务.我们项目是后者的模式,网上找了很多,大都是根据jpa来做多数据源解决方案,要不就是老的spring多数据源解 ...
- js对象合并
实现js对象大合并,ES6之前就只有循环遍历咯.可以用ES6的话可以用Object.assign(). 以下是Object.assign()示例: var o1 = { a: 1 }; var o2 ...
- CRM函数CRM_ORDER_MAINTAIN封装
抬头结构:ZCRM_MAINTAIN_H flag header: 项目表:ZCRM_MAINTAIN_I 合作伙伴:ZCRM_MAINTAIN_P price:ZCRM_MAINTAIN_PR FU ...
- Logstash 基础入门
原文地址:Logstash 基础入门博客地址:http://www.extlight.com 一.前言 Logstash 是一个开源的数据收集引擎,它具有备实时数据传输能力.它可以统一过滤来自不同源的 ...
- python(2)之列表
列表的使用 names=["zhangyang","liming",["sese","popo"],"xiao ...
- Redis入门第一课
为什么需要NoSQL? 1High performance:web1.0不能点赞互动,web2.0可以互动,里面有很多高并发读写 2Huge Storage:海量数据的高效率存储和访问 3High ...