<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<title>测试表单布局bootstrap</title>
<script type="text/javascript">
</script>
</head>
<body >
<!--表单布局form-search类-->
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox">Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
<!--横向布局form-horizontal横向类-->
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group info">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
<textarea rows="3"></textarea>
<label class="checkbox">
<input type="checkbox" value="tijao">
Option one is this and that-be sure to include why it's great.
</label>
<label class="checkbox">
<input type="checkbox">Remember me
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios" value="option1" checked="">
Option one is this and
</label>
<!--显示在一行-->
<label for="option1" class="checkbox inline">
<input id="option1" type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label for="option2" class="checkbox inline">
<input id="option2" type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label for="option3" class="checkbox inline">
<input id="option3" type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<!--下拉列表-->
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<!--输入框前置和后置问题-->
<div class="input-prepend">
<span class="add-on">搜索</span>
<input class="span2" id="prependedInput" type="text"
placeholder="Username">
</div>
<div class="input-append">
<input class="span2" id="appendedInput" type="text">
<span class="add-on">搜索</span>
</div>
<div class="input-prepend input-append">
<span class="add-on">前置</span>
<input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">后置</span>
</div>
<!--按钮-->
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div>
<!--搜索表单-->
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
<input type="text" class="span2 search-query">
</div>
</form>
<!--控制控件的大小-->
<input class="input-block-level" type="text" placeholder="文本框"><br>
<input class="input-mini" type="text" placeholder=".input-mini"><br>
<input class="input-small" type="text" placeholder=".input-small"><br>
<input class="input-medium" type="text" placeholder=".input-medium"><br>
<input class="input-large" type="text" placeholder=".input-large"><br>
<input class="input-xlarge" type="text" placeholder=".input-xlarge"><br>
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge"><br>
<!--网格设置控件-->
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<!--跨列控件-->
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div><br>
<!--不可编译的类uneditable-input-->
<span class="input-xlarge uneditable-input">Some value here</span>
<!--表单动作-->
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
</div>
<!--帮助文本-->
<input type="text"><span class="help-inline">Inline help text</span><br>
<!--输入控件-->
<input class="input-xlarge" id="focusedInput" type="text"
value="This is focused...">
<!--禁用输入框dsiabled-->
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
<!--警告框的类-->
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
<!--按钮的样式-->
<button class="btn " type="button">按钮1</button><br>
<button class="btn btn-large btn-primary " type="button">按钮2</button><br>
<button class="btn btn-info " type="button">按钮3</button><br>
<button class="btn btn-success " type="button">按钮4</button><br>
<button class="btn btn-warning " type="button">按钮5</button><br>
<button class="btn btn-danger " type="button">按钮6</button><br>
<button class="btn btn-inverse " type="button">按钮7</button><br>
<button class="btn btn-link " type="button">按钮8</button><br>
<!--调整按钮大小btn-large，btn-small，btn-mini-->
<p>
<button class="btn btn-large btn-block btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
</p>
<!--禁用按钮的样式disabled属性即可，注意禁用链接与禁用按钮不一样-->
<a href="#" class="btn bnt-large btn-primary disabled">Primary Link</a>
<a href="#" class="btn btn-large disabled">Link</a>
<br>
<!--图片样式img-rounded ，img-circle，img-polaroid-->
<img src="111.png" style="width:100px;height:100px;margin-left: 50px;" class="img-rounded">
<img src="111.png" style="width:100px;height:100px;margin-left: 50px;" class="img-circle">
<img src="111.png" style="width:100px;height:100px;margin-left: 50px;" class="img-polaroid">
<br><br>
<!--图标的使用-->
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
浙公网安备 33010602011771号