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
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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to get the bootstrap search bar
Apr 07, 2025 pm 03:33 PM
How to use Bootstrap to get the value of the search bar: Determines the ID or name of the search bar. Use JavaScript to get DOM elements. Gets the value of the element. Perform the required actions.
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to do vertical centering of bootstrap
Apr 07, 2025 pm 03:21 PM
Use Bootstrap to implement vertical centering: flexbox method: Use the d-flex, justify-content-center, and align-items-center classes to place elements in the flexbox container. align-items-center class method: For browsers that do not support flexbox, use the align-items-center class, provided that the parent element has a defined height.
What Does H5 Refer To? Exploring the Context
Apr 12, 2025 am 12:03 AM
H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
