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 ...
随机推荐
- android -------- Eclipse下的NDK配置环境
NDK 全称是Native Development Kit,是一个让开发人员在Android应用中嵌入使用本地代码编写的组件的工具集 原生开发工具包 (NDK) 是一组可让您在 Android 应用中 ...
- LoveIsIntheAir模板换背景
/*simplememory*/#google_ad_c1, #google_ad_c2 {display:none;}.LoveIsIntheAir a, .LoveIsIntheAirdiv, . ...
- 4月24 php基础及函数的应用
PHP是一种被广泛认可应用,运行在服务端的脚本语言,PHP需要安转PHP应用程序服务器去解释执行,是用来协助Web服务器工作的编程语言,因此所写的任何代码只有在www文件下的才能实施预览.PHP是一种 ...
- UI BOL 练习 get value set attr
" " " " "**********************change list************************* "2 ...
- C# 条件表达式max=(a>b)?a:b;含义
a?b:c 这个是条件表达式,表示如果a为真,则表达式值为b,如果a为假,则表达式值为c条件表达式具体说明如下条件语句: if(a>b) max=a; else max=b; 可用条件表达式写为 ...
- [CodeForces - 447B] B - DZY Loves Strings
B - DZY Loves Strings DZY loves collecting special strings which only contain lowercase letters. For ...
- 2.Liunx 系统设置
1.基本命令:clear 2.环境变量: alias .export 大纲 系统管理命令 1.用户管理:adduser .passwd. userdel 2.用户组管理:groupadd.groupd ...
- noip2014生活大爆炸版石头剪刀布
题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一 样,则不分胜负.在<生活大爆炸>第二季第8集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...
- Qt_自定义菜单
一.右键菜单 右键菜单实现:通过重写contextMenuEvent(QContextMenuEvent *event)事件,QMenu+QAction即可完美实现! 重写voidcontextMen ...
- linux nat style
1● nat style 2● link style