Starting a project using Bootstrap and HTML5 Boilerplate continued_html/css_WEB-ITnose

Earlier I used Bootstrap and HTML5 Boilerplate to build a basic project framework, but it was still blank with no actual content. Now I can start adding content to it. Go back to index.html, the starting point of the project. At the beginning, you set a title for the document. Just pick one casually:

<title>有标题文档</title>

It’s really easy to get it, don’t be too casual. Seriously, add the following main content of the page:

1. A banner containing the logo and navigation
2. A main element containing the main content
3. A containing copyright information and social link footer

Delete the following reserved text found in index.html:

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

and replace it with the following Code:

<header role="banner">  <nav role="navigation">  </nav></header><main role="main">  <h1 id="Main-Heading">Main Heading</h1>  <p>Content specific to this page goes here.</p></main><footer role="contentinfo">  <p>Copyright &copy; Company Name</p></footer>

A simplest basic page structure is already available. Here I use header, main, footer and other elements. These semantic elements are added by the HTML5 specification. It has been widely supported by modern browsers, so you can use it with confidence. If you still stay in the era of full-screen divs, I am afraid that other friends will not be willing to play with me. IE 8 (and below) cannot recognize these elements, so Styles cannot be applied to these elements, but due to the introduction of the Modernizr.js script in my project, IE8 can support these elements. Of course, this must be based on the premise that the user has enabled javaScript. If not, it would be worse. , but this situation is rare, but it cannot be completely ignored, so you can prepare some fallback content for browsers that do not enable JavaScript, for example, giving a link to jump to a version without HTML5 elements. The role attribute belongs to the Landmark Roles/Landmark Roles part of the WAI-ARIA specification and is designed to tell the user agent the role played by this element. For example, if a screen reader encounters 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, and Bootstrap happens to have this component, so I moved the Bootstrap sample code directly. The following is the header part of the code:

<header 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></header>

Carefully analyzing the above code, it is not difficult to find that navbar is the main class of the navigation bar component, navbar-default is the appearance class, and there is another appearance navbar-inverse which is an inverse color effect. If you don’t like it, you can modify the CSS file to change the default To change the style (not recommended for the time being), you can also define a navbar-awesome class or other name (awesome means tall in my dictionary), and then add a beautiful style; and navbar-static -top is the position style, which means it is statically located at the top and scrolls with the scroll bar. There are also two position styles, navbar-fixed-top and navbar-fixed-bottom. As the name suggests, it means fixed at the top and bottom, which is perfect. The separation of appearance style and position style is really great! Save it and open it in your browser like this:

Very beautiful! In order to add responsive features to the navigation bar, I have to refer to the official Bootstrap website documentation, navigation bar, so I modify the .navbar-header 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 attribute is HTML5 A custom attribute method added in the specification, data- can be followed by any legal name and any legal value. It is recommended to use this method to add custom attributes to HTML elements to avoid naming conflicts with new attributes in the future. At the same time, This will also pass the verification.

<div data-xxx="xxx">

data-toggle="collapse" attribute is the usage defined by Bootstrap's collapse.js plug-in. All Bootstrap plug-ins can be used through the data attribute API, and data- The value of the target attribute represents the CSS selector of the target element that responds to the plug-in function. Therefore, you only need to add a few attributes to use this plug-in, and you do not need to write a single line of javaScript code. According to the value of the data-target attribute, I need to add another element with class="navbar-collapse" to respond to the function of this plug-in. Just wrap the existing link list in a div and add the required class:

<div class=<strong>"navbar-collapse collapse"</strong>>  <ul class="nav navbar-nav">    ...  </ul></div><!-- end .navbar-collapse -->

Use the responsive design view of Firefox 15 (Ctrl Shift M) to open the page and gradually reduce the window width. You can see that when the page width is less than 768px (768px is defined by Bootstrap The critical point between small screen devices and ultra-small screen devices), the navigation link disappears and there is an additional button in the upper right corner:

Click the button in the upper right corner, and the navigation link appears in another way. The form is displayed:

In this way, a cool responsive navigation bar is basically completed! Then add a picture carousel effect under the navigation. First, you must prepare several pictures. OK, refer to the example on the bootstrap official website, and replace the content in the main element 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">      <img src="/static/imghwm/default1.png"  data-src="img/picture1.jpg"  class="lazy"  alt="picture">    </div>    <div class="item">      <img src="/static/imghwm/default1.png"  data-src="img/picture2.jpg"  class="lazy"  alt="picture">    </div>    <div class="item">      <img src="/static/imghwm/default1.png"  data-src="img/picture3.jpg"  class="lazy"  alt="picture">    </div>    <div class="item">      <img src="/static/imghwm/default1.png"  data-src="img/picture4.jpg"  class="lazy"  alt="picture">    </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 don’t need to write a single line of javaScript code to run it perfectly!

我用的是一张什么内容都没有的灰色图片，所以看起来是这样，也可以给每个 .item 添加一些描述性的文字：

<div class="item">  <img src="/static/imghwm/default1.png"  data-src="..."  class="lazy"  alt="...">  <div class="carousel-caption">    <h3 id="">...</h3>    <p>...</p>  </div></div>

接下来再添加一个三列的内容展示：

<div class="container">  <div class="row">    <div class="col-sm-4">      <h2 id="Welcome">Welcome!</h2>      <p>Suspendisse et arcu felis ...</p>      <p><a href="#">See our portfolio</a></p>    </div>    <div class="col-sm-4">      <h2 id="Recent-Updates">Recent Updates</h2>      <p>Suspendisse et arcu felis ...</p>      <p><a href="#">See what's new!</a></p>    </div>    <div class="col-sm-4">      <h2 id="Our-Team">Our Team</h2>      <p>Suspendisse et arcu felis ...</p>      <p><a href="#">Meet the team!</a></p>    </div>  </div><!-- end .row --></div><!-- end .container -->

这里使用了 Bootstrap 自带的12列响应式网格系统，.col-sm-4 表示一个内容块占据4列：

当窗口宽度小于 768px 的时候：

响应式的布局，非常好！可是我并不想使用类似 .col-sm-x 之类的 class，因为如果哪天我不想一行放3列了，我想一行放2列，那我岂不是要把 .col-sm-4 改成 .col-sm-6？未完待续

资源列表

Bootstrap

HTML5 Boilerplate

Modernizr

参考资料

Bootstrap Site Blueprints: Design mobile-first responsive websites with Bootstrap 3 by David Cochran & Ian Whitley