Form of bootstrap css style and bootstrapcss Style

Source: Internet
Author: User

Form of bootstrap css style and bootstrapcss Style

The examples in this article share the code of the bootstrap form for your reference. The details are as follows:

1. Basic Form usage

<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label>  <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button></form>

2. inline form

Add a. form-inline class to the form element to align its content left and display it as an inline-block-level control. It is only applicable when the viewport is at least PX width (the form is folded if the width of the view is smaller ).
Be sure to add a label

If you do not set a label for each input control, the screen reader will not be able to recognize it correctly. For these inline forms, you can hide them by setting. sr-only for the label class.

<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group">  <div class="input-group-addon">@</div>  <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label>  <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button></form>

3. Horizontally arranged forms

By adding the. form-horizontal class to the form and using the grid class preset by Bootstrap, You Can horizontally layout the label and control group. In this way, the behavior of. form-group will be changed to row in the raster system, so no additional. row is required.

<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <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-2 control-label">Password</label> <div class="col-sm-10">  <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>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.