Showing posts with label bootstrap themes. Show all posts
Showing posts with label bootstrap themes. Show all posts

Sunday 14 September 2014

bootstrap theme,templates,website,tutorial

 CHANGE THIS CODE IN bootstrap.min.css
nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}.
CHANGE THIS CODE IN  style.css

/* customized carousel */
.carousel {
    height: 500px;
    margin-bottom: 50px;
    position: relative;
}
.carousel-caption {
    z-index: 10;
    margin-bottom: 90px;
}
.carousel .item {
    background-color: rgba(0, 0, 0, 0.8);
    height: 500px;
}

 Today we will learn in bootstrap tutorial about bootstrap themes,bootstrap css,web designing by bootstrap.

create bootstrap,theme,templates easily and fast :-
create bootstrap website step by step process

AAVIK KUMAR PRODUCTION

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Script Tutorials" />
    <meta name="description" content="Responsive Websites Using BootStrap - demo page">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Responsive Websites Using BootStrap | AAVIK KUMAR</title>

    <!-- css stylesheets -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>

    <!-- modal box -->
    <div class="modal fade" id="my-modal-box" tabindex="-1" role="dialog" aria-labelledby="my-modal-box-l" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <div class="modal-title" id="my-modal-box-l">
              <h3>Share it</h3>
            </div>
          </div><!-- /.modal-header -->
          <div class="modal-body">
            <p>Share it box content</p>
            <!-- AddThis Button BEGIN -->
            <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
            <a class="addthis_button_preferred_1"></a>
            <a class="addthis_button_preferred_2"></a>
            <a class="addthis_button_preferred_3"></a>
            <a class="addthis_button_preferred_4"></a>
            <a class="addthis_button_compact"></a>
            <a class="addthis_counter addthis_bubble_style"></a>
            </div>
            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4dbfb1915f17d240"></script>
          </div><!-- /.modal-body -->
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- menu bar -->
      <nav class="navbar navbar-default navbar-static">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#b-menu-2">
                <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="#">website name</a>
        </div>

        <!-- submenu elements for #b-menu-2 -->
        <div class="collapse navbar-collapse" id="b-menu-2">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> Help</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"></span> About</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Other <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
                <li class="divider"></li>
                <li><a href="#">Submenu 5</a></li>
                <li><a href="#">Submenu 6</a></li>
                <li class="divider"></li>
                <li><a href="#">Submenu 7</a></li>
              </ul>
            </li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li data-toggle="modal" data-target="#my-modal-box"><a href="#"><span class="glyphicon glyphicon-share"></span> Share popup</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </nav>

    <!-- slider -->
    <div id="slider" class="carousel slide" data-ride="carousel">
      <!-- controls -->
      <ol class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0" class="active"></li>
        <li data-target="#slider" data-slide-to="1"></li>
        <li data-target="#slider" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <!-- slides -->
        <div class="item active">
          <div class="container">
            <div class="carousel-caption">
              <h1>Lorem ipsum - 1</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
              <p><a class="btn btn-lg btn-default" href="#" role="button">Button 1</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="container">
            <div class="carousel-caption">
              <h1>Lorem ipsum - 2</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Button 2</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="container">
            <div class="carousel-caption">
              <h1>Lorem ipsum - 3</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
              <p><a class="btn btn-lg btn-warning" href="#" role="button">Button 3</a></p>
            </div>
          </div>
        </div>
      </div>
      <!-- left-right controls -->
      <a class="left carousel-control" href="#slider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#slider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->

    <!-- main container -->
    <div class="container">

    
      <!-- 2-column layout -->
      <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-9">

          <!-- jumbotron -->
          <div class="jumbotron">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
            <p><a role="button" href="#" class="btn btn-lg btn-success">Sign up today</a></p>
          </div>

          <div class="row">

            <!-- column 1 -->
            <div class="col-sm-6">

              <!-- box 1 -->
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">Panel 1 title</h3>
                </div>
                <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
                  <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
                </div>
              </div>

              <!-- box 2 -->
              <div class="panel panel-primary">
                <div class="panel-heading">
                  <h3 class="panel-title">Panel 2 title</h3>
                </div>
                <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
                  <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
                </div>
              </div>
            </div> <!-- /column 1 -->

            <!-- column 2 -->
            <div class="col-sm-6">

              <!-- box 3 -->
              <div class="panel panel-success">
                <div class="panel-heading">
                  <h3 class="panel-title">Panel 3 title</h3>
                </div>
                <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
                  <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
                </div>
              </div>

              <!-- box 4 -->
              <div class="panel panel-warning">
                <div class="panel-heading">
                  <h3 class="panel-title">Panel 4 title</h3>
                </div>
                <div class="panel-body">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
                  <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
                </div>
              </div>
            </div> <!-- /column 2 -->

          </div><!--/row-->
        </div><!--/span-->

        <!-- column 3 (sidebar) -->
        <div class="col-sm-3 sidebar-offcanvas" id="sidebar">
          <div class="list-group" role="navigation">
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item active">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
          </div>

          <!-- box 5 -->
          <div class="panel panel-danger">
            <div class="panel-heading">
              <h3 class="panel-title">Form elements</h3>
            </div>
            <div class="panel-body">
              <form role="form">
                <div class="form-group">
                  <label for="emailField">Email address</label>
                  <input type="email" class="form-control" id="emailField" placeholder="Enter email">
                </div>
                <div class="form-group">
                  <label for="selectField">Type</label>
                  <select class="form-control" id="selectField">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                </div>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
                    <span class="sr-only">30% Complete</span></div>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
            </div>
          </div>

          <!-- box 6 -->
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">Panel 6 title</h3>
            </div>
            <div class="panel-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
              <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>
            </div>
          </div>

        </div><!-- /column 3 (sidebar) -->

      </div><!--/row-->

      <footer>
        <nav class="navbar navbar-default navbar-static-bottom" role="navigation">
        <p class="navbar-text">&copy Copyright 2013</p>
        <p class="navbar-text navbar-right"><a href="https://plus.google.com/+aavikkumar/about">AAVIK KUMAR</a></p>
        </nav>
      </footer>

    </div><!--/.container-->

    <!-- add javascripts -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>  





DOWNLOAD AAVIK KUMAR STATIC BOOTSTRAP FULL CODE