Bootstarp学习教程（7） 表单 ﹏ヽ暗。殇╰゛Y 2023-10-16 19:11 2阅读 0赞 基本案例：“form-control”修饰的`<input>`、`<textarea>`和`<select>`元素都将被默认设置为`width: 100%;表单控件包裹在".form-group"中可以获得最好的排列` `` <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="js/bootstrap.min.js"></script> </head> <body> <!--容器 --> <div class="container"> <div class="row"> <div class="col-md-4"> <form class="form"> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请在此输入用户名"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请在此输入密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 是否记住用户名和密码 </label> </div> <button type="submit" class="btn btn-default">登入</button> </form> </div> </div> </div> </body> </html> ![Center][] `内联表单:"form-inline"可使其内容左对齐并且表现为inline-block级别的控件。只适用于浏览器窗口至少在 768px 宽度时` `注意：需要设置宽度` `在Bootstrap中，input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。` `一定要设置label` `如果你没有为每个输入控件设置label，屏幕阅读器将无法正确识读。对于这些内联表单，你可以通过为label设置.sr-only已将其隐藏。` `` <div class="row"> <div class="col-md-6"> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">邮箱 </label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="在此输入邮箱地址"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">密码</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="在此输入密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 是否记住 </label> </div> <button type="submit" class="btn btn-default">登入</button> </form> </div> </div> ![Center 1][] `水平排列的表单:表单添加"form-horizontal"，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变"form-group"的行为，使其表现为栅格系统中的行（row），因此就无需再使用"row"了。` `` <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">用户名</label> <div class="col-sm-4"> <input type="text" class="form-control" id="inputEmail3" placeholder="在此输入用户名"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-4"> <input type="password" class="form-control" id="inputPassword3" placeholder="在此输入密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 是否保留 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登入</button> </div> </div> </form> ![Center 2][] `被支持的控件:在表单布局案例中展示了其所支持的标准表单控件` `Input:大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。(只有正确设置了type的input控件才能被赋予正确的样式。)` `Textarea:支持多行文本的表单控件。可根据需要改变rows属性。` `Checkbox 和 radio:Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。` `内联checkboxes：通过将“checkbox-inline” 或 “radio-inline”应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行` `Select:使用默认选项或添加multiple属性可以显示多个选项。` `` `(4)静态控件:在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为<p>元素添加.form-control-static即可。` `<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form>` `` `(5)控件状态:通过为控件和label设置一些基本状态，可以为用户提供回馈。` `输入焦点:表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式.` `被禁用的输入框:为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观.` `被禁用的fieldset:为<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。` `` <form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="disabledSelect">Disabled select menu</label> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </fieldset> </form> ![Center 3][] `校验状态:Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。` `` <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> </div> (6)控件尺寸:通过`.input-lg`之类的class可以为控件设置高度，通过`.col-lg-*`之类的class可以为控件设置宽度。 #### 高度尺寸 #### 创建大一些或小一些的表单控件以匹配按钮尺寸。 .input-lg Default select .input-sm <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"> <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select> #### 调整列尺寸 #### 用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。 <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> `` [Center]: https://img-blog.csdn.net/20140117163503984?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center [Center 1]: https://img-blog.csdn.net/20140117164446515?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center [Center 2]: https://img-blog.csdn.net/20140117165137359?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center [Center 3]: https://img-blog.csdn.net/20140117171730671?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
还没有评论，来说两句吧...