Front-end Technology bootstrap Hello World

Front-end Technology bootstrap Hello World
2014-10-07 13:37 by Zerg, 4258 read, 6 reviews, Favorites, compilation

-For the user, the interface is the program itself. Then a beautiful web must be the first question you continue to use in this app.

In this section we will write a bootstrap Hello Wrold.

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive layouts, mobile device-first WEB projects.

How do I use bootstrap?

There are generally two ways to use bootstrap. One is to refer to the online bootstrap style, one is to download the bootstrap to a local reference.

To quote an online style:

The advantage of referencing an online style is that you don't have to install bootstrap locally, and you don't have to consider the path issue when referencing. The disadvantage is worry about performance issues, once the online style hangs, then their own site page style will be confused.

http://v3.bootcss.com/getting-started/#download

Bootstrap Chinese Network for Bootstrap dedicated to build their own free CDN accelerator services.

The way to use it is simple:
Copy Code

<meta charset="utf-8"><title>Hello Bootstrap</title><!-- Bootstrap core CSS --><link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

Copy Code

This line has introduced the online style. Note This article is using the latest Bootstrap3.2.0.

Using the local bootstrap

Download bootstrap to the local decompression, decompression done, you will get a bootstrap directory, the structure is as follows:
Copy Code

bootstrap/
├──css/
│├──bootstrap.css
│├──bootstrap.min.css
│├──bootstrap-theme.css
│└──bootstrap-theme.min.css
├──js/
│├──bootstrap.js
│└──bootstrap.min.js
└──fonts/

├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf└── glyphicons-halflings-regular.woff

Copy Code

Local calls are as follows:
Copy Code

<meta charset="utf-8"><title>Hello Bootstrap</title><!-- Bootstrap core CSS --><link href="./bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"><style type=‘text/css‘>  body {    background-color: #CCC;  }</style>

Copy Code

– Represents the introduction of the bootstrap style under the current directory.

– Absolute paths can be used, of course.

We have added a background color effect as follows:

The following uses the bootstrap style to write a website out.

Add navigation row bar and login box

Copy Code

  <div class= "Container" > <div class= "Navbar-header" > <button type= "button" class= "Navbar-toggle Co Llapsed "data-toggle=" collapse "data-target=" #navbar "aria-expanded=" false "aria-controls=" NavBar "> <span CLA ss= "Sr-only" >toggle navigation</span> <span class= "Icon-bar" ></span> <span class= "IC On-bar "></span> <span class=" Icon-bar "></span> </button> <a class=" Navbar-b Rand "href=" # > Home </a> <a class= "Navbar-brand" href= "#" > Test </a> <a class= "Navbar-brand" hr ef= "#" > Development </a> </div> <div id= "NavBar" class= "Navbar-collapse collapse" > <form class= "NA Vbar-form navbar-right "role=" form "> <div class=" Form-group "> <input type=" text "placeholder=" Email "class=" Form-control "> </div> <div class=" Form-group "> <input type=" passwor D "Placeholder=" Password"class=" Form-control "> </div> <button type=" Submit "class=" btn btn-success ">sign In</butt on> </form> </div><!--/.navbar-collapse--</div></nav>

Copy Code

The browser effect is as follows:

Add an article

Copy Code

<div class="jumbotron">  <div id=‘content‘ class=‘row-fluid‘>    

Copy Code

The browser effect is as follows:

Add Bottom Introduction and links

Copy Code

About

Etiam Porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Elsewhere

1. Blog Park
2. Open source China
3. Infoq

Copy Code

The final effect is as follows:

Full code:
Copy Code

<meta charset= "Utf-8" ><title>hello bootstrap</title><!--Bootstrap core CSS--><link href=    "./bootstrap-3.2.0-dist/css/bootstrap.min.css" rel= "stylesheet" ><style type= ' text/css ' > body {  Background-color: #CCC; }</style>

Copy Code

Inheritance of styles

You must be curious, how do these styles play? How carefully you will notice the class attribute of the div tag.

By inheriting the style definition of bootstrap through the attribute values of class, a style effect is achieved.
Copy Code

<meta charset="utf-8" /> <title>自定义样式</title><!--自定义侧边栏样式--><style>     

<!--class属性引用自定义样式--> <div class="divcss5-right">    

Copy Code

Playing the front end is to constantly modify the inside of the properties or information, and then look at the browser display effect.

Front-end technology bootstrap Hello World