bootstrap-表单三
<!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>