Home >Web Front-end >HTML Tutorial >Start a project using Bootstrap and HTML5 Boilerplate_html/css_WEB-ITnose
Start a project using Bootstrap and HTML5 Boilerplate_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:02:541318browse
Download Bootstrap
Visit the website below to download the latest bootstrap source file
http://getbootstrap.com/
Find as shown below On the download page, click the Download source button to download. If you develop with Sass, then download the Sass file as well.
After unzipping, open the bootstrap folder and you will see a bunch of files inside. The files and folders are roughly like this,
Among them, the less folder contains all less files, and the js folder contains 12 js plug-ins. Next, we Go download HTML5 Boilerplate.
Download HTML5 Boilerplate
Visit http://html5boilerplate.com/ to get the latest HTML5 Boilerplate (H5BP) file. After unzipping, we name the folder project1 to represent project 1, open the folder , you can see the content contained in it, as shown below,
Delete unnecessary files
- css folder (because we will use bootstrap Style)
- CHANGELOG.md
- CONTRIBUTING.md
- doc folder and its contents
Update required files
- humans.txt, in which you can write the entire website working team, express your gratitude to the people who helped build the website, and the development tools used, etc.
- LICENSE.md, add license information for Bootstrap and other frameworks.
- README.md, provides a basic project description.
Update favicon and touch icons
Replace the H5BP default icon with your own icon,
I don’t know how to generate ico icon, click here to help you convert online
Integrate Bootstrap
First open the bootstrap folder and find the fonts folder , copy it to the project1 folder. The fonts folder contains the Glyphicon icon font file that comes with Bootstrap, so the font file is ready.
Then there is the javaScript file. Take a look at the js file that comes with H5BP. Open the js folder in the project1 folder, as shown below.
The Bootstrap plug-in is Relying on jQuery, you can see that Boilerplate has been prepared for us (in the vendor folder), and another Modernizr script, which contains HTML5 shiv, can make IE8 compatible, but its greater role is to improve the browser Feature detection. The plugin.js file is used to place plugins. Create a new folder here named bootstrap to place Bootstrap plugins. Copy the plugins in the js folder in Bootstrap to this folder, as shown below,
If nothing unexpected happens, there should be 12 plug-ins (the possibility of increasing or decreasing in the future is not ruled out). You can choose to use certain plug-ins according to your needs, or you can grab them all and quote them all. References one by one are really adding HTTP requests in vain, so you have to put all the plug-ins into one file, put all the Bootstrap plug-ins into the plugins.js file, find the packaged code, and open bootstrap/dist/js/bootstrap. Just select all the code in min.js and copy and paste it into plugins.js.
The last is the style file, copy the entire bootstrap/less folder to project1.
At this point, all the content needed in Bootstrap has been integrated into project1. The content in project1 is as follows,
The fonts folder contains Glyphicon For font files, the img folder is empty, the less folder is copied from Bootstrap (if you use Sass for development, then this is the Sass folder), and the js folder is as follows,
I want to know more about Modernizr.
Set homepage
Go back to the main directory of project1 and open index.html with a cute text editor. Be careful not to open it with a browser. You can see the following content,
1 <!DOCTYPE html> 2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 3 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 4 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 6 <head> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <title></title>10 <meta name="description" content="">11 <meta name="viewport" content="width=device-width, initial-scale=1">12 13 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->14 15 <link rel="stylesheet" href="css/normalize.css">16 <link rel="stylesheet" href="css/main.css">17 <script src="js/vendor/modernizr-2.6.2.min.js"></script>18 </head>19 <body>20 <!--[if lt IE 7]>21 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>22 <![endif]-->23 24 <!-- Add your site or application content here -->25 <p>Hello world! This is HTML5 Boilerplate.</p>26 27 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>28 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>29 <script src="js/plugins.js"></script>30 <script src="js/main.js"></script>31 32 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->33 <script>34 (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=35 function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;36 e=o.createElement(i);r=o.getElementsByTagName(i)[0];37 e.src='//www.google-analytics.com/analytics.js';38 r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));39 ga('create','UA-XXXXX-X');ga('send','pageview');40 </script>41 </body>42 </html> Some code needs to be modified.
14 <link rel="stylesheet" href="css/normalize.css">15 <link rel="stylesheet" href="css/main.css">
First delete the above two lines of code that introduce the style sheet, because Bootstrap already has built-in normalize.css. There is no need to introduce it here, and we have already deleted these two CSS files, and added a new line of code to introduce the Bootstrap style sheet,
<link rel="stylesheet" href="css/bootstrap.css">
and so on , now there is no such style file in project1. There are currently two methods,
1. Copy a compiled bootstrap.css from bootstrap/dist/css to project1/css (this folder needs to be created a) in.
2. Compile into CSS using Less file (or Sass).
Let’s talk about the second method. First you need to install Less and use the Node package management tool npm in node.js to install it:
$ npm install -g less
After the installation is complete It’s ready to use:
$ lessc less/bootstrap/bootstrap.less css/bootstrap.css
好了，假设以上两种方法已经完成其中一个了，继续向下，样式搞定了，应该轮到脚本了，由于 IE 8 并不支持媒体查询，需要去下载一个脚本(响应式布局，没有媒体查询怎么玩得转呢)，点我去往下载的路上，下载好后，把 respond.min.js 文件放在 project1/js/vendor 中，然后在页面上添加以下代码，
<!-- 只让 IE 8 以及更低版本的浏览器下载该脚本 --><!--[if (lt IE 9) & (!IEMobile)]><script src="js/vendor/respond.min.js"></script><![endif]-->
就写在引入 Modernizr 脚本的代码后面就行，这样，IE 8及以下的浏览器也能支持媒体查询了，接下来有个条件注释需要稍微修改一下，由于 Bootstrap 已经不再支持 IE7，所以，我们要让 IE 7 和 IE 6 一同坠入地狱(其实就多了一句升级浏览器的提示而已)，
20 <!--[if lt IE 7]> 改成 <!--[if lte IE 7]>
全部搞定，剩下的事情就是添加页面的主体内容了。
资源列表
参考资料
Bootstrap Site Blueprints: Design mobile-first responsive websites with Bootstrap 3 by David Cochran & Ian Whitley