Bootstrap Profile
aims
Bootstrap is the most popular front-end framework, has released its third version (v3.0.0). This tutorial will take you to start learning Bootstrap 3.
You'll also see how to use different frame custom frame features, such as using a grid to create the layout, navigation is created by nav, using carousal create drop-down box, add social plug-ins and Google Map and other third-party plug-ins.
What is Bootstrap
Bootstrap is a front-end framework for rapid development of Web applications and Web sites.
In modern Web development, there are several components to almost all Web projects are needed.
Bootstrap provides you with all of these basic modules - Grid, Typography, Tables, Forms, Buttons and Responsiveness.
In addition, there are a lot of other useful front-end components, such as Dropdowns, Navigation, Modals, Typehead, Pagination, Carousal, Breadcrumb, Tab, Thumbnails, Headers and so on.
With these, you can build a Web project, and let it run to more quickly and easily.
In addition, since the entire framework is based on modules, you can place your own CSS, or even a big correction after the start of the project to customize.
It is based on several best practices, we think this is a good place to start learning modern Web development opportunity, once you've mastered the basics of HTML and JavaScript / jQuery, you can apply this knowledge in Web development.
Although some critics, all projects built by Bootstrap look the same, you do not need to know too much about HTML + CSS knowledge can build a website. However, we need to understand, Bootstrap is a common framework, just like any other common things that you need to customize to make it unique. When you want to customize, you need in-depth study, there is no good HTML + CSS base is not feasible.
Bootstrap except, of course, there are many other good front frame, using the framework of which is the development of personnel selection, but Bootstrap is definitely worth trying.
Why should the project use Bootstrap?
Download the file structure and understand
You can choose from https://github.com/twbs/bootstrap/archive/v3.0.0.zip or https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip download Bootstrap Version 3.0.0 on. We are using the first one, you can use the second.
In addition, we provide downloadable code contains a link to download the first through the bootstrap code folder. This side also contains the original used to customize Bootstrap css of custom.css.
After unpacking, you will find, in the root folder bootstrap-3.0.0 Some files and folders.
The main CSS file - bootstrap.css and its simplified version of bootstrap-min.css, located in the root folder 'dist' folder 'css' bootstrap-3.0.0 file under the folder.
In the 'dist' inside, there is a 'js' folder contains the main JavaScript file bootstrap.js and its simplified version.
File in the root, there is a separate 'js' folder contains the different files different JavaScript plug-ins.
In the root file within 'assets', you will find another 'js' folder. This is a place with HTML5 shim of html5shiv.js, for obtaining IE8 support. There is also a respond.min.js file to support IE8 multimedia queries. This folder also contains the js plugin Bootstrap dependent jquery.js.
In the same folder, there is a 'ico' folder contains a variety of mobile devices icons and favicon icon.
In the same path 'css' folder contains the css file the document.
'_includes' And '_layouts' folder contains some default layout structure of the document, which may be useful design for rapid prototyping.
Root folder 'less' folder contains some .less file. If you want to be developed based on LESS, these files can be useful.
In the root folder, there are some files. Some are used for basic prototyping HTML files, some of which are based on Bower for compiled bower.json, browserstack.json. In addition, there composer.json and a YAML file _config.yml.
In addition to download from the given link, you can also use the following command to compile all the CSS, JS files -
$ bower install bootstrap
You can copy the Git Bootstrap Report
git clone git://github.com/twbs/bootstrap.git
For this tutorial, we have only downloaded the Zip file, it does not use.
Once you learn this tutorial, we encourage you to bower mounting frame to see how it works.
NetDNA support compilation and simplified version of Bootstrap CSS, Js and other topics css. You can quote them the following statement
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Developed using Bootstrap v3.0.0
Basic HTML
The following are the basic HTML structure for our project
<! DOCTYPE html>
<Html>
<Head>
<Title> Bootstrap V3 template </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<-! Bootstrap ->
<Link href = "bootstrap-3.0.0 / dist / 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 = "bootstrap-3.0.0 / assets / js / html5shiv.js"> </ script>
<Script src = "bootstrap-3.0.0 / 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 = "bootstrap-3.0.0 / dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
Please note that the template and added html5shiv.js respond.min.js for obtaining IE8 support. In Bootstrap version 3 has been added to these files.
We twitter-bootstrap file in the root folder of the Web server folder, it has been placed bootstrap-3.0.0 folder. All HTML files we create will be placed in the twitter-bootstrap. The reason illustrate this point, in order to streamline our development process.
custom made
We will customize different CSS box style. Therefore, on the basis of the original CSS does not destroy files on (located bootstrap-3.0.0 of the dist folder) in the same folder, we will create a separate CSS file named custom.css. Then we in the HTML file, immediately after the original CSS file, reference the CSS file. In this way, we can override the default style we want to change, however, if the Bootstrap upgrade, the original CSS file will not destroy our custom on the basis of updated. We also recommend that you follow this approach in the development process.
Create navigation
To create a navigation, in the HTML file, followed by the body after the start tag, add the following code.
<Nav class = "navbar navbar-inverse navbar-fixed-top" role = "navigation">
<Ul class = "nav navbar-nav">
<Li> <a href="new.html" class="navbar-brand">
<Img src = "logo.png"> </a> </ li>
<Li class = "active"> <a href="#"> Home </a> </ li>
<Li> <a href="price.html"> Price </a> </ li>
<Li> <a href="contact.html"> Contact </a> </ li>
<Li class = "dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Social <b class = "caret"> </ b> </a>
<Ul class = "dropdown-menu">
<Li class = "socials"> <g: plusone annotation = "inline" width = "150"> </ g: plusone> </ li>
<Li class = "socials"> <div class = "fb-like" data-href = "https://developers.facebook.com/docs/plugins/" data-width = "The pixel width of the plugin" data -height = "The pixel height of the plugin" data-colorscheme = "light" data-layout = "standard" data-action = "like" data-show-faces = "true" data-send = "false"> < / div> </ li>
<Li class = "socials"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
! <Script> function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if {js = d.createElement (s) (d.getElementById (id)!); Js. id = id; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document," script "," twitter-wjs "); < / script> </ li>
</ Ul>
</ Li>
</ Ul>
</ Nav>
For navigation, Bootstrap use 'navbar' class in the container hierarchy. Therefore, it will be assigned to hold the entire navigation nav element.
We have used 'navbar-inverse' class to change the default color of the navigation bar, the use of light before dark instead of the default. 'Navbar-fixed-top' class ensures that when we scroll down HTML page, the navigation bar at the top of the fixed position.
In Bootstrap V3.0.0, when the navigation is created when using the role = "navigation" is new. Bootstrap recommend such use, for easy access to the navigation bar.
At this point, we have to increase the body of the document in custom.css 'padding-top: 80px;'. You add to the body as the top of the filled pixels may be different, but unless you do so, the top part of the navigation bar after, will be hidden.
In the container nav, we we have a class of 'nav' and 'navbar-nav' unordered list. In this unordered list, each list item contains a navigation link.
'Navbar-brand' class for presenting a brand name. We have used an image. Since the height of the image height is greater than the baseline navigation bar, where we do some customization. The '.navbar-nav> li> a' the 'line-height' property from the original default 20px to 50px, change the font size to 16px.
The link to the right, we have increased the drop-down box. For related li added to the 'dropdown' class, followed by adding a 'dropdown-toggle' and 'caret' anchor with two class. The anchor of our project actually contains anchor text social. This li contains an unordered list, each list item in a nested list are shown in the following box contains the link.
In the drop-down box that we have added a social plugin. The first contains a li Google Plus mark, and the second contains the Facebook li tag, and the third contains the display li tag Twitter buttons and some js script.
Additionally, you must start after the body tag, add the following markup and scripting to make Facebook button works
<Div id = "fb-root"> </ div>
(Function (d, s, id) {
var js, fjs = d.getElementsByTagName (s) [0];
if (d.getElementById (id)) return;
js = d.createElement (s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore (js, fjs);
} (Document, 'script', 'facebook-jssdk'));
To make Twitter button work, we end before the body tag, add the following script
(Function () {
var po = document.createElement ( 'script'); po.type = 'text / javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName ( 'script') [0]; s.parentNode.insertBefore (po, s);
}) ();
We use the following style to add some extra style to 'socials' class of social buttons.
.socials {
padding: 10px;
}
This completes our navigation.
Create a slide show by carousal
In order to project home page navigation bar, create a slide show, we will use the following tags
<Div id = "carousel-example-generic" class = "carousel slide">
<-! Indicators ->
<Ol class = "carousel-indicators">
<Li data-target = "# carousel-example-generic" data-slide-to = "0" class = "active"> </ li>
<Li data-target = "# carousel-example-generic" data-slide-to = "1"> </ li>
<Li data-target = "# carousel-example-generic" data-slide-to = "2"> </ li>
</ Ol>
<-! Wrapper for slides ->
<Div class = "carousel-inner">
<Div class = "item active">
<Img src = "computer.jpg" alt = "...">
<Div class = "carousel-caption">
<H1> Large Desktops are everywhere </ h1>
<P> <button class = "btn btn-success btn-lg"> Try 30 day trial now </ p>
</ Div>
</ Div>
<Div class = "item">
<Img src = "mobile.jpg" alt = "...">
<Div class = "carousel-caption">
<H1> Mobiles are outnumbering desktops </ h1>
<P> <button class = "btn btn-success btn-lg"> Try 30 day trial now </ p>
</ Div>
</ Div>
<Div class = "item">
<Img src = "cloud1.jpg" alt = "...">
<Div class = "carousel-caption">
<H1> Enterprises are adopting Cloud computing fast </ h1>
<P> <button class = "btn btn-success btn-lg"> Try 30 day trial now </ p>
</ Div>
</ Div>
</ Div>
<-! Controls ->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<Span class = "icon-prev"> </ span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<Span class = "icon-next"> </ span>
</a>
</ Div>
</ Div>
There are four sections in the Carousal. Main container using a 'carousel slide' div tag with class definitions.
Then a 'carousel-indicators' class with an ordered list. ol each list item represents a slide. When the page is loaded, loaded by default slideshow with 'active' class. When rendering, you'll see them in the heading of small circles.
Then, each slide (image) is placed with a 'item' class of the div tag. Each item is nested with a 'carousel-caption' class of the div. carousel-caption contains the image displayed together with the title tag. Paragraph contains a h1 and a button, you can also include other own mark.
The last part is used to control a slide next / previous slide. This is the use of 'left' and 'carousel-control' on the definition of a class, using the following 'right' and 'carousel-control' definition of a class.
'Icon-prev' and 'icon-next' class for the next and previous icon.
We have done some customization in default carousal. We hope captions, indicators and next / previous icons are rendered on top of the default location of a few pixels.
To do this, we add the following styles custom.css file
.carousel-inner .item .carousel-caption {
position: absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav> li> a {
line-height: 50px;
font-size: 16px
}
We also customize the h1, add to it a bottom margin of 30 pixels.
h1 {
margin-bottom: 30px
}
Response image
You may have noticed that each image in the slide, we have used the 'img-responsive' class. This is a Bootstrap v3.0.0 new features. By using the img tag 'img-responsive' class, Bootstrap so that the image response.
Create a grid
In the following slides, we used a grid to place content. By having a 'container' class of div begin a grid. Please note that we are going to develop a responsive website, instead of the previous version of Bootstrap, where the container has a single class, the default is responsive.
Container div with nested several 'row' class of div (the first row of three, the second line has six), to create a Bootstrap grid lines.
Each row has a with a 'col-xy' class of div, to create columns. The value of x can be: xs for mobile devices for the Tablet PC sm, md for notebook computers and smaller desktop screen for lg large desktop screen. This is the first method. The value of y can be any positive integer, although the total number of columns in the grid must be no more than 12. In our project, for simplicity we have used lg, but since we have already done so, you may get a phone or tablet to view the project site for comparison.
In the following tutorial, we will have a complete tutorial on Bootstrap grid system, to explore its fascinating response.
In this example, we want the column width of the first three rows are equal, so we use for all of the columns 'col-lg-4'. In the second row, we want six columns of equal width, so we use for all of the columns 'col-lg-2'.
Here is the tag that contains a grid of two rows, the first row there are three, the second row has six.
<Div class = "row barone"> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / php.png"> </ p> </ Div> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / mysql-logo.jpg"> </ p> </ Div> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / javascript-logo.png"> </ p> </ Div> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / java.jpg"> </ p> </ Div> <Div class = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / postgresql.png"> </ p> </ Div> </ Div>
We have an hr and a footer with the following marks the end of the grid
<Hr> <P> Copyright @ 2013-14 by ToDo App. </ P>
Use Table
In price.html page of our project, we use a form to render a price list, labeled as follows
<Table class = "table table-bordered">
<Thead>
<Tr>
<Th> Features </ th>
<Th> Individual </ th>
<Th> Small Team </ th>
<Th> Medium Team </ th>
<Th> Enterprise </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> <h3> No. Of users </ h3> </ td>
<Td> <span class = "badge"> One </ span> </ td>
<Td> <span class = "badge"> Five </ span> </ td>
<Td> <span class = "badge"> Fifteen </ span> </ td>
<Td> <span class = "badge"> Unlimited </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Pro training </ h3> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Forum Support </ h3> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> In person support </ h3> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Weekly webinars </ h3> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
<Td> <span class = "badge"> Yes </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Price </ h3> </ td>
<Td> <button type = "button" class = "btn btn-warning btn-lg"> $ 9 / Month </ button> </ td>
<Td> <button type = "button" class = "btn btn-warning btn-lg"> $ 19 / Month </ button> </ td>
<Td> <button type = "button" class = "btn btn-warning btn-lg"> $ 49 / Month </ button> </ td>
<Td> <button type = "button" class = "btn btn-warning btn-lg"> $ 99 / Month </ button> </ td>
</ Tr>
<Tr>
<Td> </ td>
<Td> <button type = "button" class = "btn btn-success btn-lg"> Buy now </ button> </ td>
<Td> <button type = "button" class = "btn btn-success btn-lg" "> Buy now </ button> </ td>
<Td> <button type = "button" class = "btn btn-success btn-lg" "> Buy now </ button> </ td>
<Td> <button type = "button" class = "btn btn-success btn-lg" "> Buy now </ button> </ td>
</ Tr>
</ Tbody>
</ Table>
Bootstrap using the original CSS file 'table' and 'table-bordered' two class. But we have to make the following table by adding some custom CSS file in customize.css look different
th {
background-color: # 428bca;
color: # ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Use the badge
We use the 'badge' class to display some text in the table. We have the following custom CSS with the badge class
.badge {
background-color: # 428bca;
color: #fff;
font-size: 22px;
}
For this page and contact.html page, we added another CSS rule in the customize.css
.container> h1 {
text-align: center;
}
This allows h1 centered.
Using forms
In contact.html file, we create three columns, the first column, we embed a form. Use the default style sheet.
<Form class = "form-horizontal" role = "form">
<Div class = "form-group">
<Label for = "email" class = "col-lg-2 control-label"> Email </ label>
<Div class = "col-lg-10">
<Input type = "email" class = "form-control" id = "email" placeholder = "Email">
</ Div>
</ Div>
<Div class = "form-group">
<Label for = "name" class = "col-lg-2 control-label"> Name </ label>
<Div class = "col-lg-10">
<Input type = "text" class = "form-control" id = "name" placeholder = "Name">
</ Div>
</ Div>
<Div class = "form-group">
<Label for = "country" class = "col-lg-2 control-label"> Country </ label>
<Div class = "col-lg-10">
<Select>
<Option> USA </ option>
<Option> India </ option>
<Option> UK </ option>
<Option> Autralia </ option>
</ Select>
</ Div>
</ Div>
<Div class = "form-group">
<Label for = "desc" class = "col-lg-2 control-label"> Message </ label>
<Div class = "col-lg-10">
<Textarea rows = "5" cols = "50"> </ textarea>
</ Div>
</ Div>
<Div class = "form-group">
<Div class = "col-lg-offset-2 col-lg-10">
<Button type = "submit" class = "btn btn-default"> Submit </ button>
</ Div>
</ Div>
</ Form>
'Form-horizontal' class allows form to maintain horizontal alignment. Please note that for ease of access, add role = "form". This is version 3.0.0 of the new features.
To locate each form controls, Bootstrap 3.0.0 uses a new 'form-group' class.
In this page, the second column of the grid, we simply placed some text.
Add Google Maps
In contact.html page, the third column of the grid, we have added a Google Map (Google Maps). To do this, we use the following tags
<Div id = "map_canvas"> </ div> </ Div>
The following js added to the HTML file header inside the header
function initialize () {
var map_canvas = document.getElementById ( 'map_canvas');
var map_options = {
center: new google.maps.LatLng (23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map (map_canvas, map_options)
}
google.maps.event.addDomListener (window, 'load', initialize);
Prior said before js, you must add the following script tag
<Script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>
In order to correctly render the map, you must add the following styles custom.css
#map_canvas {
width: 400px;
height: 400px;
}
This is how to create a simple project based on Bootstrap V3.0.0. But we have only touched the surface, later chapters will explain in more detail.