Rumah > hujung hadapan web > tutorial js > bootstrap框架怎么在html页面加载使用教程

bootstrap框架怎么在html页面加载使用教程

巴扎黑
Lepaskan: 2017-06-26 14:23:52
asal
1934 orang telah melayarinya

今天敲代码的时候,正好碰到这个问题.

与大家分享这个解决方法:

 
 

1/7

到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons

 
 
 

2/7

所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小,到官网下载jQuery支持,如图:

 
 
 

3/7

将下载后的就jQuery放到bootstrap中的js目录下,如图:

 
 
 

4/7

在bootstrap的根目录下新建一个demo.html文件,(注意,必须在根目录下面新建,因为后面的步骤中要将bootstrap框架中的css和js文件链接到创建的demo中)

 
 
 

5/7

编辑demo.html文件,添加对bootstrap框架中css和js的引用,内容如下,图片有注释说明,这样,我们就基本上建立了对bootstrap框架的基本使用架构

 
 

6/7

另外,bootstrap官方提供了链接服务,永久免费,即使你不下载bootstrap框架文件到本地,也可以直接在html中使用,使用下面这段代码:

 
 

Atas ialah kandungan terperinci bootstrap框架怎么在html页面加载使用教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tiada tutorial video tersuai bootstrap
daripada 1970-01-01 08:00:00
0
0
0
Laravel: Masalah menggunakan bootstrap secara setempat
daripada 1970-01-01 08:00:00
0
0
0
html5 - Masalah dengan gaya pengubahsuaian bootstrap
daripada 1970-01-01 08:00:00
0
0
0
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan