Use Bootstrap and HTML5 boilerplate to start a project continuation

In front of me with Bootstrap and HTML5 boilerplate built a project foundation framework, but still just blank piece, no actual content, now can start to add content to the inside. Back to the beginning of the project Index.html, the first is to set a title to the document, just casually take a good:

<title> Title document </title>

Really get very casual, don't take it too seriously, next add the following page body content:

1. A banner that contains logos and navigation
2. A main element that contains the primary content
3. A footer that contains copyright information and social links

Delete the following reserved text found in the index.html:

 - <!--Add your site or application content here--  - <p> Hello world! This is HTML5 boilerplate. </p>

Replace with the following code:

  role=   "banner"  > <nav  role=   "navigation"  > </nav> role=   "main"  >  Main heading Content specific to this page goes Here.</p></main><footer  role=   "ContentInfo"  > <p>  Copyright©company name</P></FOOTER>  

One of the simplest basic page structure has already, here I use the header, main, footer and other elements, these semantic elements are HTML5 specification increase, has been widely supported by modern browsers, so can be assured that, if still stay in the fullscreen div era, I'm afraid other small partners do not want to play with me, IE 8 (and the following) do not recognize these elements, and therefore cannot apply styles to these elements, but in my project because of the introduction of the Modernizr.js script, so that IE8 can support these elements, of course, this is built on the user enabled JavaScript, if not, it's worse, but it's a little bit less, but it can't be completely ignored, so you can prepare some fallback content for browsers that don't have JavaScript enabled, such as giving a link to a version that doesn't have a HTML5 element. The role attribute is part of the Landmark roles/landmark Character section of the Wai-aria specification, which is designed to tell the user the role that this element plays, such as a screen reader encountering an HTML element on a page that contains role= "navigation". The screen reader will know that this HTML element is used for navigation. Now, I want to add a navigation bar, just Bootstrap have this component, so I just moved the Bootstrap sample code directly, here is the header part of the code:

 role="banner"> <nav class="NavBar navbar-default navbar-static-top" role="Navigation"> <div class="Navbar-header"> <a class="Navbar-brand" href="Index.html">Project Name</a> </div> <ul class="Nav Navbar-nav"> <li class="Active"><a href="Index.html">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav>

Careful analysis of the above code is not difficult to find NavBar is the main class,navbar-default of the navigation bar component is the appearance of class, there is also a look navbar-inverse is a counter-color effect, if you do not like, you can modify the CSS The file changes the default style (it is not recommended for the time being), or you can define a Navbar-awesome class or other name (awesome in my dictionary is tall), add a beautiful style, and Navbar-static-top is the location style , indicating that the static is at the top, scrolling with the scroll bar, plus two position styles, navbar-fixed-top and Navbar-fixed-bottom as the name implies, is fixed to the top and bottom of the meaning, perfect to achieve the appearance of style and position style separation, this is very good! Save, open in the browser as follows:

Very beautiful! In order to add a responsive feature to the navigation bar, I also have to refer to the Bootstrap official website document, the navigation bar, so the. Navbar-header is modified as follows:

<div class="Navbar-header"> <button class="Navbar-toggle" data-toggle="Collapse" data-target=". Navbar-collapse" type="button"> <span class="Icon-bar"></span> <span class="Icon-bar"></span> <span class="Icon-bar"></span> </button> <a class="Navbar-brand" href="Index.html">Project Name</a></div>

The Data property is a way to add a custom attribute to the HTML5 specification, and data-can be followed by any legal name, any legal value, which is recommended for adding custom attributes to HTML elements in order to avoid future new attribute naming conflicts, and also to pass validation.

data-xxx= "XXX" >

The data-toggle= "Collapse" property is the use of Bootstrap's collapse.js plug-in definition, and all Bootstrap plugins can be used by the Data property API, while the value of the Data-target property represents the response The plugin features a CSS selector for the target element, so using this plugin only requires adding a few attributes, and a single line of JavaScript code does not need to be written. Based on the value of the Data-target property, I'll add a class= "navbar-collapse" element to respond to the plugin's functionality by wrapping a DIV with the existing list of links and adding the required class:

<div class= "Navbar-collapse collapse" >  <ulclass="Nav navbar-nav">    ...  </ul></div> <!--end Navbar-collapse--

Using the responsive Design view of Firefox 15+ (Ctrl + Shift + M) to open the page and gradually narrow the window width, you can see that when the page width is less than 768px (768px is the critical point between the Bootstrap-defined small-screen device and the ultra-small screen device), the navigation link Disappear at the same time there is a button in the upper-right corner:

Click the top right button and the navigation link is displayed in a different form:

This way, a cool responsive navigation bar is almost done! Next in the navigation to add a picture of the effect of the carousel, first have to prepare several pictures, OK, refer to the Bootstrap official website sample, the main element inside the contents of Replace with the following code:

<div class="Carousel Slide" data-ride="Carousel" id="Homepage-feature"> <ol class="Carousel-indicators"> <li class="Active" data-target="#homepage-feature" data-slide-to="0"> <li data-target="#homepage-feature" data-slide-to="1"> <li data-target="#homepage-feature" data-slide-to="2"> <li data-target="#homepage-feature" data-slide-to="3"> </ol> <div class="Carousel-inner"> <div class="Item Active">  alt="Picture" src="Img/picture1.jpg"> </div> <div class="Item">  alt="Picture" src="Img/picture2.jpg"> </div> <div class="Item">  alt="Picture" src="Img/picture3.jpg"> </div> <div class="Item">  alt="Picture" src="Img/picture4.jpg"> </div> </div><!--End Carousel inner--  <a class="left Carousel-control" data-slide="Prev" href="#homepage-feature"> <span class="Glyphicon glyphicon-chevron-left"></span> </a> <a class="Right Carousel-control" data-slide="Next" href="#homepage-feature"> <span class="Glyphicon glyphicon-chevron-right"></span> </a></div><!--End Carousel--

Similarly, you do not need to write a line of JavaScript code, it will be very good to run!

I'm using a gray image with nothing in it, so it looks like this, and you can add some descriptive text to each. Item:

<div class= "Item" >  alt="..."src="...">  <div  class="carousel-caption">    ... ... </p>  </div></div>

Next, add a three-column display of content:

<div class="Container"> <div class="Row"> <div class="Col-sm-4"> welcome!Suspendisse et arcu felis ...</p> <p><a href="#">See our Portfolio</a></p> </div> <div class="Col-sm-4"> Recent UpdatesSuspendisse et arcu felis ...</p> <p><a href="#">See what ' s new!</a></p> </div> <div class="Col-sm-4"> Our TeamSuspendisse et arcu felis ...</p> <p><a href="#">Meet the team!</a></p> </div> </div><!--end Row--</div><!--end Container--

The Bootstrap comes with a 12-column responsive grid system, and the. Col-sm-4 indicates that a content block occupies 4 columns:

When the window width is less than 768px:

Responsive layout, very good! But I do not want to use a similar. Col-sm-x class, because if one day I do not want to put 3 columns, I would like to put 2 columns, then I would not want to change the. col-sm-4 to. col-sm-6? Not to be continued

Resource List

• Bootstrap
• HTML5 boilerplate
• Modernizr

Resources

Bootstrap Site blueprints:design mobile-first responsive websites with Bootstrap 3 by David Cochran & Ian Wh Itley