您的位置：首页 > Web前端 > BootStrap

bootstrap-内联表单 水平（横向）表单 响应式图片 辅助类 [转]

2016-09-10 17:02 381 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--媒体查询-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--禁止缩放-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
<title></title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--如果ie的版本小于9,让ie8识别html5,同时识别媒体查询语句-->
<!--[if lt IE 9]
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
-->

</head>
<body>

<!--
内联元素:让元素排成一行显示出来，且高度和宽度由内容决定，不能用css控制
块状元素：独立占一行
内联元素与块状元素对立
内联(inline)表单：表单排在一行显示，只有在from中指定  class="form-inline"即可让表单成内联显示
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。

-->
<!--注意label中的for 与 input中的保持一致-->
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<hr/>

<!--
水平排列的表单:
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
-->
<!--指定from:form-horizontal ,就会横向显示-->
<form class="form-horizontal">
<div class="form-group">
<!--前面占两个格，后面还有10个（总共12个）-->
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<!--把input
嵌套在栅格系统里面
一个栅格最多允许12个竖向分格
col-sm-2：表示占两个栅格的宽度 ，则还有10个栅格 ，其中sm表示大小（如手机为xs,平板 sm ,桌面显示器 lg ,....）
-->
<!--余下的10格-->
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-6 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
<hr/>
<!--
表单元素有禁用状态，只读状态，校验状态....
-->
<!--
可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
-->
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<hr/>
<!--
为水平排列的表单和内联表单设置可选的图标
-->
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>

<!--
水平排列的表单组的尺寸
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
只需要在formgroup容器上面添加对应的属性即可
-->
<hr/>
<!--
调整列（column）尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
-->
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>

<!--
响应式图片:，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
图片形状:通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。
-->
<!--如果图片的宽高相同，则为规则的圆，否则可能为随圆-->
<img src="http://img0.bdstatic.com/img/image/70dddc10daaeab1ab987cedb1511d2621426747009.jpg" alt="..." class="img-rounded">
<img src="http://img0.bdstatic.com/img/image/70dddc10daaeab1ab987cedb1511d2621426747009.jpg" alt="..." class="img-circle">
<img src="http://img0.bdstatic.com/img/image/70dddc10daaeab1ab987cedb1511d2621426747009.jpg" alt="..." class="img-thumbnail">

<!--
文本颜色：根据按钮差不多，只不过以text-开头,而按钮颜色以btn-开头
-->
<p class="text-muted">0dddc10daaeab1</p>
<p class="text-primary">0dddc10daaeab1</p>
<p class="text-success">通过为相应的类，可以让图片呈现不同的</p>
<p class="text-info">通过为的类，可以让图片呈现不同的</p>
<p class="text-warning">过为.</p>
<p class="text-danger">过为</p>

<!--
背景颜色:
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
-->

<!--
关闭按钮：可以在div右上角出现一个关闭的按钮
-->
<div class="bg-info" style="width: 200px;height: 200px;">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--
快速浮动：
<div class="pull-left">...</div>
<div class="pull-right">...</div>
-->
<!--
让某个元素内容居中
-->
<div class="center-block" style="width: 500px;height: 100px;">让某个元素内容居中</div>

<!--
清除浮动:通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 加载Bootstrap核心库 -->
<script src="js/bootstrap.min.js"></script>

<!--隐藏或显示-->
<div class="show text-warning">
this is a show div
</div>
<div class="hidden">
this is a hidden div
</div>

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

<!--
响应式：
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航