博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap的使用
阅读量:7236 次
发布时间:2019-06-29

本文共 1773 字,大约阅读时间需要 5 分钟。

最近接触了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.jsbootstrap.min.js 和 bootstrap.min.css 文件,用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

(3)部分基本的元素调用

因为里面有跟多布局样式,我们这里就不一一举例,只是据其中的部分例子仅供参考

因为我们之前装过那个bootstrap插件,所以我们直接可以输入bs3-就会显示许多标签样式供你选择

我们演示一下table标签和按钮样式

这就是运行之后的状态,并且页面大小如何改变,呈现的基本上是一致的,这就是响应式布局的好处

以上就是Bootstrap 的入门,以后还会有更多的更新,希望大家关注我的动态,谢谢。

转载于:https://www.cnblogs.com/kalezhangtao/p/9153179.html

你可能感兴趣的文章
程序开发时编写sql语句的注意事项
查看>>
Oracle 12c新特性对于业务上的一些影响总结
查看>>
基于redis的缓存机制的思考和优化
查看>>
IBM DS 5300存储硬盘故障数据恢复详解
查看>>
企业生产环境不同业务,系统分区建议(自定义分区布局)
查看>>
使用Verilog实现FPGA双列电梯控制系统
查看>>
编写安装配置mail服务脚本
查看>>
<Power Shell>13 powershell三个实用特性和功能实例
查看>>
spring cloud使用Feign实现远程接口的调用
查看>>
Delphi 中使用 ADO 方法打开 MySQL5.0 数据库并避免汉字乱码
查看>>
定制bash命令行提示符
查看>>
DNS Bind详解
查看>>
你必须要知道的数据备份工具rsync
查看>>
oracle关于坏块的修复一
查看>>
lzg_ad:FBWF配置详解
查看>>
gitlab部署、配置更改、备份及恢复
查看>>
关于共享SQL——窥视解析
查看>>
linux和windows同步数据 cwrsync client to rsync server
查看>>
浅谈ListBox在Windows Phone 7 中的使用
查看>>
ECMAScript 6 -- 字符串的扩展
查看>>