AOW >> Bootstrap

Bootstrap

Twitter was created a bootstrap in mid of 2010 and officially released on 19 August, 2011 and day was Friday.

Bootstrap is a most using framework for HTML, CSS, JAVA SCRIPT. Bootstrap is used for making the website mobile responsive by using bootstrap you can easily access your website on mobile, tablets and PC’s. Bootstrap have there own predefined classes by accessing these classes we can make our design attractive, efficient and responsive. Bootstrap help us to implement the front-end design easily and accurately.

Bootstrap have there many versions now the currently version which is in commonly use  is v3.3.6 and the new version Bootstrap 4 will coming soon.

Bootstrap Css

Most commonly class use for css are

<head>
// For loading css file of bootstrap
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
</head>
class="row"  //use for defining a row
class="col-md-12" //use for defining column in a row
class="form-control" //for giving style to HTML fields
class="btn btn-primary" //for giving style to HTML buttons
<div class="row">
<div class="col-md-2">
alloverwebs.com
</div>
<div class="col-md-2">
Babar
</div>
<div class="col-md-2">
Zaeem
</div>
<div class="col-md-2">
<input type="text" class="form-control">
</div>
<div class="col-md-4">
<input type="button" class="btn btn-primary">
</div>
</div>

 

Remember one most important thing every row have 12 columns and you can divide these columns according to your needs as described in above code.

There are many other classes for bootstrap such as:

class="col-xs-3"
class="col-sm-"4"
class="col-lg-6"
class="col-xl-"7"

class=”col-xs-3″  xs means extra small so, that class=”col-xs-3″ defines number of columns on extra small screen.

class=”col-sm-4″  sm means small so, that class=”col-sm-4″ defines number of columns on small screen.

class=”col-lg-6″  lg means large so, that class=”col-lg-6″ defines number of columns on large screen.

class=”col-xl-7″  xl means extra large so, that class=”col-xl-3″ defines number of columns on extra large screen.4

Bootstrap JavaScript

There are many built-in classes for jQuery  by using these classes animations, pop-ups, navigation bars are added in website

<head>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

Above code shows a popup as an output.

Bootstrap HTML

In bootstrap html we can give design to the buttons, tables, fields…

Buttons

bootstrap_buttons

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Tables

bootstrap table

<table class="table table-striped">
  ...
</table>

Fields

fields

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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>

Above code’s are the basic examples of Bootstrap.

Likes(0)Dislikes(0)
Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *


*