Home>Article>Web Front-end> Tutorial on how to load bootstrap framework on html page

Tutorial on how to load bootstrap framework on html page

巴扎黑 Original: 2017-06-26 14:23:52 1765browse

When I was typing code today, I happened to encounter this problem.

Share this solution with everyone:

1/7

Go to the bootstrap official website to download. For us developers, download the compiled and compressed CSS directly. , JavaScript files, and also includes font files, but does not include documentation and source code files. After opening the unzipped package, you can find three folders: css, fonts, and js. This is the most basic form of Bootstrap organization: the uncompressed version of the file can be used directly in any web project. We provide compressed (bootstrap.min.*) and uncompressed (bootstrap.*) CSS and JS files. The font icon file comes from Glyphicons

#2/7

All Bootstrap plug-ins rely on jQuery. And in formal projects, we recommend using the compressed version because it is small in size. Go to the official website to download jQuery support, as shown in the picture:

##3/7

Put the downloaded jQuery into the js directory in bootstrap, as shown in the picture:

##4/7

Create a new one in the root directory of bootstrap demo.html file, (note that it must be created under the root directory, because in the following steps, the css and js files in the bootstrap framework will be linked to the created demo)

##5/7

Edit the demo.html file and add references to the css and js in the bootstrap framework. The content is as follows. The pictures are annotated. In this way, we have basically established the basic usage structure of the bootstrap framework

6/7

In addition, bootstrap officially provides a link service, which is permanently free. Even if you do not download the bootstrap framework file locally, you can also use it directly in html, using the following code ：

< ;script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js?1.1.11">

The above is the detailed content of Tutorial on how to load bootstrap framework on html page. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery basic syntax summary Next article：jQuery basic syntax summary

See more

Tutorial on how to load bootstrap framework on html page

1/7

#2/7

Create a new one in the root directory of bootstrap demo.html file, (note that it must be created under the root directory, because in the following steps, the css and js files in the bootstrap framework will be linked to the created demo)

Edit the demo.html file and add references to the css and js in the bootstrap framework. The content is as follows. The pictures are annotated. In this way, we have basically established the basic usage structure of the bootstrap framework

In addition, bootstrap officially provides a link service, which is permanently free. Even if you do not download the bootstrap framework file locally, you can also use it directly in html, using the following code ：

Related articles