Bootstrap教程:[2]在网页中加载bootstrap

2025-05-11 09:29:19

我们开始适用boot衡痕贤伎strap来制作网页,我用的编辑器是dreamweaver,这是一个学网页前段开发的人不能少的软件,就不多说了。下面看看网页中需要怎么加载bootstrap中的资源呢。

首先在Dw中创建一个html5文件,在开始页面点击【更多】

Bootstrap教程:[2]在网页中加载bootstrap

选择文档类型,然后点击确定

Bootstrap教程:[2]在网页中加载bootstrap

在代码视图我们先看看基本的代码

Bootstrap教程:[2]在网页中加载bootstrap

按下Ctrl+s保存该文件到bootstrap文件夹下面,在dist文件夹中保存有bootstrap中的css、js等文件

Bootstrap教程:[2]在网页中加载bootstrap

在css样式面板,点击链接,我们来引入bootstrap中css样式

Bootstrap教程:[2]在网页中加载bootstrap

点击浏览,找到bootstrap.min.css文件,点击确定按钮

Bootstrap教程:[2]在网页中加载bootstrap

引入以后,我们看看在<head>标签之间多了一个link标签

Bootstrap教程:[2]在网页中加载bootstrap

假如我们还想要使用bootstrap提供的js文件,我们得去下载jquery文件,浏览器打开jquery.com,点击download

Bootstrap教程:[2]在网页中加载bootstrap

选择一个你自己需要的版本,我下载的如图所示

Bootstrap教程:[2]在网页中加载bootstrap

将下载下来的文件放到js文件夹中

Bootstrap教程:[2]在网页中加载bootstrap

回到Dw,在插入面板中,点击【脚本】

Bootstrap教程:[2]在网页中加载bootstrap

引入刚才下载得到的jquery,点击确定;之后同样的方法才能引用bootstrap.min.js文件

Bootstrap教程:[2]在网页中加载bootstrap

这是最后得到的源码。

Bootstrap教程:[2]在网页中加载bootstrap

现在bootstrap官方提供了CDN加速服务,即使你不下载bootstrap文件到本地,也能调用,调用的方式是:用这一段代码替换掉上面那一句

Bootstrap教程:[2]在网页中加载bootstrap

调用js的方法是用下面这两句替换带哦上面这两句。

Bootstrap教程:[2]在网页中加载bootstrap

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢