Basic steps in notepad using bootstrap

Basic steps in notepad using bootstrap

Add Comment Edit

Nowadays to design website bootstrap is used more (a  front-end framework) and it reduces more time to work on CSS.If you are serious in web designing you should try this.The basic framework is simple which have white and black with some coloured buttons.If you have deep knowledge then it will not be a problem for you.

bootstrap

Lets have a look at basic steps

  • First goto http://www.getbootstrap.com
  • Download bootstrap and it is very less size only .
  • Then extract files in desired location of your system  and you have three files.css ,fonts,js..Keep it. 
  • Now Open notepad and paste the below things,
  • You can find the below codes also  in bootstrap website.
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


  • Now save it as index.html(use UTF-8) in the extracted files location like below

desktop



  • Now open with chrome and firefox.You can see hello world.In browsers.Lets see a simple homepage design.
  • Add all codes between <body>…</body>
  • Now goto notepad below <body> add this



<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>



  • Now see in browser,you will get like below

image


Next ,add jumbotron below this.


<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg">Learn more</a></p>
  </div>
</div>



  • Now see in browser,you will get like below

 


jumbotron



  • Then add the follow code,below jumbotron account

<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4"><img src="image.png" alt="..." class="img-circle"><h1>Hello, world!</h1>.col-md-4Description lists
A description list is perfect for defining terms.
.<p>
  <button type="button" class="btn btn-primary">View details>></button>
  </p></div>
<div class="col-xs-6 col-sm-4 col-md-4"><img src="image.png" alt="..." class="img-circle"><h1>Hello, world!</h1>.col-md-4Description lists
A description list is perfect for defining terms.
<p><button type="button" class="btn btn-primary">View details>></button></p></div>
<div class="col-md-4"><img src="image.png" alt="..." class="img-circle"><h1>Hello, world!</h1>.col-md-4Description lists
A description list is perfect for defining terms.
<p><button type="button" class="btn btn-primary">View details>></button></p></div>
</div>


simple design


Note:Resize image to 140*140.And open to your browser and note the URL and replace it with image.png.


It’s a simple design and now it’s a time to show your creativity in bootstrap for different designs in notepad.


Thankyou.

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )

Pages