文章目录
-
- Bootstrap是什么?
-
-
- 第一步,引入包(也就是别人写好的css,js文件)
-
-
- 1,离线引入,也就是直接下载到你本地去使用
- 2,在线引入文件(直接复制bootstrap的CDN后粘贴到你的代码中就可以使用)
-
- 第二步,引入并使用
-
-
- 方法一引入后的使用
- 方法一的效果:我们打开浏览器看结果
- 方法二引入后的使用
- 方法二的效果:效果依旧相同
-
- 其他扩展
-
-
- 关于栅格化的使用
- 尝试栅格化+缩略图的应用
-
-
Bootstrap是什么? 是一个简洁、直观、强悍的前端开发框架,它能让web开发更迅速、简单。Bootstrap是一个简洁、直观、强悍的前端开发框架,它能让web开发更迅速、简单。
我第一次接触这个东西的时候,咋一进去看文档有时候还有点蒙?毕竟文档都是官方术语,接触多了用多了就知道了,其实这里面有一个概念是这样的:
bootstrap是别人已经写好得前端样式(css)和逻辑文件(js),我们如果从白手起家,一无所有开始写这些东西,要一个div,一个div的写样式再定义,然后交互的动态效果也是要写js逻辑代码或者css过渡动画代码,对于像快速建站的人来说,这样写会花费很多时间,你还要去定义class等于啥,style里面写啥样式,所以直接从bootstrap官网下载他们已经写好的css和js代码,引入你的html页面,直接在标签元素上写上bootstrap规定的class类名,就可以在浏览器上看到别人给你写好的精美样式。
说了这么多,我们就来实践一下,我们以bootstrap3.3.7为例:
第一步,引入包(也就是别人写好的css,js文件) 引入包的方式有两种,第一种是在线引入>>>
1,离线引入,也就是直接下载到你本地去使用
文章图片
下载到的是一个压缩包
文章图片
2,在线引入文件(直接复制bootstrap的CDN后粘贴到你的代码中就可以使用) 【前端_CSS3|bootstrap快速入门上手】引入CSS的CDN(相当于应用了服务器上的css文件,只要有网你就能通过浏览器加载出来,无需自己拥有该CSS文件)
切换到下载页面的步骤和上面一样,
在线引入文件就无需下载,只要有网就能使用bootstrap的文件,但是前提是有网!!!
如下图所示,只需要引入这3个link或script标签中 (引入其中一个就可以行) 你需要的地址就行
文章图片
第二步,引入并使用 方法一引入后的使用
上面我介绍了两种方法如何引入,现在开始使用bootstrap框架
将离线的包解压后,可以得到这样的文件:
文章图片
新建html文档引入文件,然后在头部导入该bootstrap的css文件
文章图片
再写入类名后标签即可以使用,为了规范符合官方风格,就懒得写了,可以直接复制他们的代码粘贴并且修改内容就行了
文章图片
文章图片
方法一的效果:我们打开浏览器看结果
文章图片
是不是很容易实现了,把bootstrap的样式都拿过来了,只要写好相应标签,类名就能和bootstrap官网提供的样式一样,实在不想写,可以直接复制他们的代码粘贴并且修改内容就行了
方法二引入后的使用 在线引入只需要改link的链接就行,改成在线链接地址,记住,一定要有网
文章图片
方法二的效果:效果依旧相同
文章图片
本文的内容只是引入了css文件,要做一些有动态的效果时(比如轮播图),要引入bootstrap.js文件。
其他扩展 关于栅格化的使用 同理复制代码后粘贴即可以使用,该demo演示步骤:
1,复制栅格化的代码,然后粘贴到html文件里面
文章图片
2,再百度随便搜索一些图片,复制图片的src然后在html文件引入,放在 里面
文章图片
3,打开浏览器就可以查看
文章图片
尝试栅格化+缩略图的应用
1,找到略缩图,然后复制代码粘贴到栅格化的 里面
文章图片
2,尝试引入各种图片在栅格化里面
文章图片
3,最终结果展示:
文章图片
该篇只是简单的简略的演示,如需扩展其他功能可以依此类推到bootstarp中文网(https://www.bootcss.com/)进行查看
推荐阅读
- JavaWeb?|Bootstrap-30分钟就能上手的Bootstrap教程【史上最全】
- bootstrap|Bootstrap入门【人类的天堂】
- js面试题|前端总复习——html篇
- css|.113轮播图练习
- 前端|小练习1-文本练习
- Windows|分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(3月26日-3月31日)
- Java毕业设计项目实战篇|Java项目:养老院管理系统(java+SpringBoot+thymeleaf+HTML+Js+mysql)
- Java毕业设计项目实战篇|Java项目:物业管理系统(java+SpringBoot+LayUI+HTML+maven+mysql)
- Web|前端三剑客 HTML、CSS、JavaScript 入门到上手