最近接触了Bootstrap的学习,那我们来浅谈一下学习,不对之处,希望指出,共同学习。
什么是 Bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。具有响应式布局,能很好地兼容移动端和pc短的布局,是一个很不错的前端框架;框架里提供了许多丰富的元素,比如最常用的图标,Bootstrap里全部免费使用。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件,易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
Bootstrap 包的内容
- 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
- CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
- 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。
- JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
- 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
主要讲一下怎么使用Bootstrap 框架,引入及调用
1、运用Bootstrap 首先要去官网上下载一个Bootstrap ,进行环境安装
您可以从 上下载 Bootstrap 的最新版本。
下载的一种是压缩版(也成精简版,去掉了多余的空格及字符)、源文件(也成开发版,便于开发这的修改)
点击Download下载
2、引入Bootstrap 框架
有两种引入方式:一种是从下载好的Bootstrap 里引入脚本文件
另一种是以CDN的方式,从外部链接进来
引入Bootstrap 需引入里面的CSS和javascript编译您的项目,因为javascript和Jquery有依赖关系所以还需要引入Jquery库。
3、实例引入教程
开发最好用VS code,因为里面有个插件,能很方便的调用里面的元素;用别的开发如果没有插件的情况下,可以在VS code里写了之后在复制过去。
(1)插件安装
值得注意的是你在安装插件的时候,要看你下载的bootstrap是多少版本的,因为不同版本里面更新的内容不同,如果你下的是3.-.-的版本,你用bs3-可已调出你用的元素效果,如果是4.-.-版本的话要bootstrap4插件,有可能bs3-能调出版本4.-.-里的东西,但是可能不会出现预期的效果。
(2)引入脚本
把解压好的Bootstrap 文件放置在建的html文件的同级目录下
代码实例
我的bootstrap 你好,bootstrap
在运用之前和之后的对比
在这里,您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件,用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。
(3)部分基本的元素调用
因为里面有跟多布局样式,我们这里就不一一举例,只是据其中的部分例子仅供参考
因为我们之前装过那个bootstrap插件,所以我们直接可以输入bs3-就会显示许多标签样式供你选择
我们演示一下table标签和按钮样式
这就是运行之后的状态,并且页面大小如何改变,呈现的基本上是一致的,这就是响应式布局的好处
以上就是Bootstrap 的入门,以后还会有更多的更新,希望大家关注我的动态,谢谢。