Wednesday, August 26, 2015

Bootstrap Tutorial For Beginners 15 - Creating Panels











<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta charset="utf-8" />
      <link href="Content/bootstrap.min.css" rel="stylesheet" />
      <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
   </head>
   <body>
      <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container">
            <button type="button" class="navbar-toggle"
               data-toggle="collapse"
               data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="www.EasyOnlineConverter.com">ProgrammingKnowledge</a>
            <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav navbar-right">
                  <li class="active"><a href="#"> Home </a></li>
                  <li><a href="#">About</a></li>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle"
                        data-toggle="dropdown">
                        Learn <b class="caret"></b>
                        <ul class="dropdown-menu">
                           <li class="dropdown-header">Examples</li>
                           <li>
                     <a href="#">C++</a>
                     </li>
                     <li><a href="#">Java</a></li>
                     <li class="divider"></li>
                     <li class="dropdown-header">Tutorials</li>
                     <li><a href="#">C++</a></li>
                     <li><a href="#">Java</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <div class="container">
         <div class="jumbotron text-center">
            <h1>Hello World !!!</h1>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Nunc suscipit convallis nisl, eget rutrum lectus commodo at.
               Pellentesque mattis justo vel augue pretium euismod. Interdum
               et malesuada fames ac ante ipsum primis in faucibus. Fusce eu
               turpis eros.
            </p>
            <button type=button class="btn btn-primary"><span class="glyphicon glyphicon-user" style="font-size:30px ; color:blue"></span> </button>
            <button type=button class="btn btn-success"><span class="glyphicon glyphicon-ok" style="font-size:30px"></span> </button>
         </div>
         <div class="row">
            <div class="col-sm-4">
               <div class="panel panel-default">
                  <div class="panel-heading">
                     <h3 class="panel-title">Title</h3>
                  </div>
                  <div class="panel-body">Body of panel</div>
                  <div class="panel-footer">footer</div>
               </div>
            </div>
            <div class="col-sm-4">
               <div class="panel panel-primary">
                  <div class="panel-heading">
                     <h3 class="panel-title">Title</h3>
                  </div>
                  <div class="panel-body">Body of panel</div>
                  <div class="panel-footer">footer</div>
               </div>
            </div>
            <div class="col-sm-4">
               <div class="panel panel-success">
                  <div class="panel-heading">
                     <h3 class="panel-title">Title</h3>
                  </div>
                  <div class="panel-body">Body of panel</div>
                  <div class="panel-footer">footer</div>
               </div>
            </div>
         </div>
      </div>
      <!-- Fixed footer -->
      <div class="navbar navbar-inverse navbar-fixed-bottom">
         <div class="container">
            <div class="navbar-text pull-left">
               <p>copyright ProgrammingKnowledge 2015</p>
            </div>
            <div class="navbar-text pull-right">
               <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
               <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
               <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
            </div>
         </div>
      </div>
      <!-- jQuery (necessary for Bootstrap's JavaScript
         plugins) -->
      <script src="Scripts/bootstrap.min.js"></script>
      <script src="Scripts/jquery-1.9.1.min.js"></script>
   </body>
</html>










Bootstrap Panels

How to Create Bootstrap 3 Panels

Panels - - Working examples

Showing all snippets for Bootstrap tagged with panel

Panels - - Working examplesSearches related to Bootstrap panels

bootstrap panels collapse

bootstrap panels drupal

bootstrap panels side by side

bootstrap accordion

bootstrap tables

bootstrap tabs

bootstrap grid

bootstrap themes

No comments:

Post a Comment