Start a project with Bootstrap and HTML5 Boilerplate, bootstraphtml5

Start a project with Bootstrap and HTML5 Boilerplate, bootstraphtml5

Previously, I used Bootstrap and HTML5 Boilerplate to build a basic project framework, but it was just blank and there was no actual content. Now I can add content to it. Return to index.html at the project start point, and set a title for the document at the beginning, so you can easily get one:

<Title> title document </title>

It is really random to get it. Don't take it too seriously. Next, add the following page subject content:

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>

Replace it with the following code:

The simplest basic page structure already exists. Here I use headers, main, footer and other elements. These semantic elements have been added to the HTML5 specifications and have been widely supported by modern browsers, so you can use it with confidence. If you are still in the age of full screen div, I am afraid other friends will not want to play with me. IE 8 (and below) cannot identify these elements, therefore, you cannot apply styles to these elements, but because Modernizr is introduced in my project. js scripts, so that IE8 can support these elements. Of course, this must be based on the premise that the user enables javaScript. If not, it would be worse, however, this situation is rare, but it cannot be completely ignored. Therefore, you can prepare some backup content for browsers that do not enable javaScript. For example, you can provide a link to jump to a version without HTML5 elements. The role attribute is part of the Landmark Roles/Landmark role section of the WAI-ARIA specification, designed to tell the user to proxy the role played by this element, for example, if a screen reader encounters an HTML element on a page containing role = "navigation", the screen reader will know that this HTML element is used for navigation. Now, I want to add a navigation bar, just because Bootstrap has this component, so I moved the sample code of Bootstrap directly. The following is part of the header code:
After careful analysis of 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 navbar-inverse is a reversed effect, if you do not like it, you can modify the CSS file to change the default style (this is not recommended for the time being ), you can also define a navbar-awesome class or other names by yourself (awesome in my dictionary is the meaning of tall), and add a beautiful style; the navbar-static-top is the position style, indicating that the static position is on the top and will scroll with the scroll bar. There are two other position styles, navbar-fixed-top and navbar-fixed-bottom, as the name suggests, it is fixed at the top and bottom, and perfectly achieves the separation of the appearance style and the position style. This is really good! Save it. Open it in the browser as follows:

Very beautiful! In order to add responsive features to the navigation bar, I have to refer to the documentation on the Bootstrap official website and navigation bar, so modify. 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 a custom attribute added to the HTML5 specification. data-can be followed by any legal name or value. We recommend that you add custom attributes to HTML elements in this way, in order to avoid conflicts with the names of new attributes in the future, this can also pass verification.
<div data-xxx="xxx">
The data-toggle = "collapse" attribute is the collapse of Bootstrap. the use method defined by the js plug-in. All Bootstrap plug-ins can be used through the data attribute API. The value of the data-target attribute indicates the CSS selector of the target element that responds to the plug-in function, therefore, to use this plug-in, you only need to add several attributes, and a line of javaScript code does not need to be written. Based on the value of the data-target attribute, I want to add another class = "navbar-collapse" element to respond to the function of this plug-in, wrap the existing link list into a div and add the required class:
<div class="navbar-collapse collapse">  <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 narrow down the window width, when the page width is smaller than 768px (768px is the critical point between Bootstrap-defined small screen devices and ultra-small screen devices), the navigation link disappears and a button is added in the upper right corner:

Click the button in the upper right corner to display the navigation link in another form:

In this way, a cool responsive navigation bar is basically complete! Next, add an image carousel effect under the navigation bar. First, prepare several images. OK. Refer to the sample 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">          </div>    <div class="item">          </div>    <div class="item">          </div>    <div class="item">          </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, it can run well without writing a line of javaScript code!

I use a gray image with no content, so it looks like this. You can also add descriptive text to each. item:
<div class="item">    <div class="carousel-caption">    
Next, add a three-column content display:
<div class="container">  <div class="row">    <div class="col-sm-4">      
The Bootstrap built-in 12-column responsive grid system is used here, And the. col-sm-4 indicates that a content block occupies 4 columns:

When the window width is smaller than 768px:

Responsive layout, very good! However, I do not want to use a similar method. col-sm-x class, because if I don't want to put three columns in a row one day and I want to put two columns in a row, I wouldn't want to put it. col-sm-4. col-sm-6? To be continued
Resource list

    

 
     
Bootstrap
 
     
HTML5 Boilerplate
 
     
Modernizr

    
References
Bootstrap Site Blueprints: Design mobile-first responsive websites with Bootstrap 3By David mongoran & Ian Whitley

How to deploy BootStrapBootStrap in a java web project is mainly used for front-end beautification. You only need to download the file package and decompress it to add it to the project. When using html or jsp to reference files, you must note that js is introduced. before that, you must first introduce jquery. Because jquery depends on jquery and the file order is good, you need to disrupt it. Because you have also called your own files internally, you can also get rid of it. This can lead to direct introduction of your own files. A good way is to introduce CSS files first. <link href = "> introduce jquery <script src =" "> introduce Javascript file <script src =" "> example:

<! Doctype html>

<Html>

<Head>

<Link href = "bootstrap-datetimepicker-master/sample in bootstrap v2/bootstrap/css/bootstrap.min.css" rel = "stylesheet">

<Link rel = "stylesheet" type = "text/css" media = "screen"

Href = "bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">

</Head>

<Body>

<Div class = "input-append date form_date" data-date-format = "yyyy-mm-dd">

<Input size = "16" type = "text" value = "" readonly>

<Span class = "add-on"> <I class = "icon-remove"> </I> </span>

<Span class = "add-on"> <I class = "icon-calendar"> </I> </span>

</Div>



<Div class = "input-append date" id = "datetimepicker" data-date-format = "yyyy-mm-dd">

<Input class = "span2" size = "16" type = "text">

<Span class = "add-on"> <I class = "icon-th"> </I> </span>

</Div>



<Script type = "text/javascript"

Src = "bootstrap-datetimepicker-master/sample in bootstrap v2/jquery/jquery-1.8.3.min.js">

</Script>

<Script type = "text/javascript"

Src = "bootstrap-datetimepicker-master/bootstrap/js/bootstrap. min. js">

</Script>

<Script type = "text/javascript"

Src = "bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js">

</Script>

<Script type = "text/javascript"

Src = "bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js" charset = "UTF-8">

</Script>

<Script type = "text/javascript">

$ ('. Form_date'). datetimepicker ({

Language: 'zh-cn ',

WeekStart: 1,

TodayBtn: 1,

Autoclose: 1,

TodayHighlight: 1,

StartView: 2,

MinView: 2,

ForceParse: 0

});

</Script>

</Body>

<Html>



I used the datepicker File

Html, css, and friends I am now using bootstrap to create a simple web page. How can I set aside a certain interval between the two sides of the browser navigation bar? Bootstrap styles use hierarchical styles from the external layer to find the navigation bar and directly write the css style row priority. No hierarchical styles are high. You need to find the corresponding styles in the css file in the bootstrap source file to modify the settings.