Bootstrap Sample Page
Our First Bootstrap Page:Add a file to your Web site named “BootstrapSample.html”Just to experience the power of Bootstrap right away, please use the following content for your html page for starters. Once everyone has it running in your environment we can explain some of the opportunities for you to customize it and make it your own. This one is put together from combining elements of sample templates on the Bootstrap siteThe one change you will need to make is highlighted: that is the anchor <a> tag for one of the menu links; in my example it links to a page named “FilmDetails.html”. Change it to link to your own page.<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="#">Page 1-1</a> </li> <li> <a href="#">Page 1-2</a> </li> <li> <a href="#">Page 1-3</a> </li> </ul> </li> <li> <a href="FilmDetails.html">Film Details</a> </li> <li> <a href="#">Page 3</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"> <span class="glyphicon glyphicon-user"></span> Sign Up</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-log-in"></span> Login</a> </li> </ul> </div> </div> </nav> <div class="container"> <div class="jumbotron"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="scripts/jquery-1.12.3.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="scripts/bootstrap.min.js"></script> </body></html> ................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.