Write a simple static web page with bootstrap

Source: Internet
Author: User

First of all, humorous, if you want to go straight to Bootstrap, please start from the second paragraph. Friday interview a small company, gave me a PSD diagram let me use the fastest time to help out this static page, the requirements are to ensure compatibility and the Web response to various screens normal display. Friday night began to do the early morning, and then Saturday sleep a day of sleep back, found that the current energy is really no more than college graduation. Sunday relaxed one day, the new version of the Lich King's knight just opened, must play a bit. Ti7newbee lost. China's new song this session really can't. China has hip-hop so far most like the talent of small Blue dragon (unfortunately sound general), hoping to bring more beautiful songs, Pgone should be the title of popular, the scene atmosphere was driven to explode! Seriously, the game is a real TM, but I don't know why I want to watch it.

Go to the Chase:

1, with Bootstrap first to the Chinese official website download package: http://v3.bootcss.com/, Version selection 3.3.7.

2, the new file to partition the file, the downloaded bootstrap package into the Lib file, lib file storage from the external introduction of the class library (such as jquery, Bootstrap)

3. Create index.html file and introduce bootstrap to HTML.

<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head>    <MetaCharSet= "UTF-8">    <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1, User-scalable=no">    <title>Shenma</title>    <Linkhref= "Lib/bootstrap/css/bootstrap.css"rel= "stylesheet"><!--Introducing Bootstrap style sheets -    <!--conditional comments When the version is less than IE9 introduced -    <!--[If Lt IE 9]> <script src= "lib/html5shiv/html5shiv.min.js" ></script> <script src= "Lib/res Pond/respond.min.js "></script> <! [EndIf] -    <Linkrel= "stylesheet"href= "Css/main.css"></Head><Body>    <!--Write it down here. -    <!--after the DOM is loaded, execute the following script -    <!--introduce jquery because Bootstrap relies on jquery2.0 or above, so you need to refer to it before Bootstrap -    <Scriptsrc= "Lib/jquery/jquery.js"></Script>    <!--introduction of Bootstrap -    <Scriptsrc= "Lib/bootstrap/js/bootstrap.js"></Script>    <!--Introduce yourself to JS -    <Scriptsrc= "Js/main.js"></Script></Body></HTML>

4, can now use bootstrap writing code, first introduce the next container (commonly known as alleys) class for fixed width and center of the Responsive layout container. We can complete the responsive grille layout by wrapping the Row,row inside the container and nesting the col-lg-*/col-md-*/col-sm-*/col-xs-*. The number of columns (COL) displayed in the row is adjusted by the Media query detection screen width.

The next article should be treated as a bar chart for banner in the Web page.

Write a simple static web page with bootstrap

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.