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 ...
随机推荐
- Confluence 6 删除和归档空间
我们希望你已经成功的完成了这个任务,同时还学习到了一些有关 Confluence 空间的多样性和强大的功能.后推到 18 个月以后,我们来看看你的火星移民计划进行的怎么样了. 如果你希望删除老的空间( ...
- windows上使用composer安装yii2
切换成中国镜像 composer config -g repo.packagist composer https://packagist.laravel-china.org 在电脑的dos命令中写入: ...
- P2469 [SDOI2010]星际竞速
在何Au的讲解下终于搞明白了这个以前的坑. 首先考虑最小路径覆盖. 这个题意又要求我们求出的最大流为n-1(这样才能保证路径为1条) 考虑高速航行模式的图怎么建,只需要保证最大流的同时费用最小即可,显 ...
- SQL 2016安装
微软数据库SQL Server 2016正式版在2016年6月就发布,由于近期工作忙,一直拖到现在才有时间把安装过程写到博客上,分享给大家.本人一直习惯使用英文版,所以版本和截图都是英文版的.废话少说 ...
- 『MXNet』im2rec脚本使用以及数据读取
一.im2rec用法简介 首先看文档: usage: im2rec.py [-h] [--list] [--exts EXTS [EXTS ...]] [--chunks CHUNKS] [--tra ...
- 6月13 ThinkPHP控制器
控制器 控制器是MVC模式中的核心,tp默认有一个Index控制器: 1.控制器的命名规则:新建一个主页面的控制器 在JiaoWu/Home/Controller下新建一个文件:MainControl ...
- react-navigation学习笔记
1.关于this.props.navigation.navigate()与this.props.navigation.push()的区别 navigate方法在跳转时会在已有的路由堆栈中查找是否已经存 ...
- java集合类整理
LinkedList 优点:插入删除迅速 缺点:不适合随机访问 List<String> staff = new LinkedList<String>(); staff.add ...
- 微信小程序 HMACSHA256 哈希加密
下载CryptoJS, 增加红色的这句 module.exports = CryptoJS /* CryptoJS code.google.com/p/crypto-js (c) 2009-2012 ...
- 在Windows系统下搭建ELK日志分析平台
简介: ELK由ElasticSearch.Logstash和Kiabana三个开源工具组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索 ...