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

本文共 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

你可能感兴趣的文章
如何用代码爬抓电商数据(附淘宝API调用实例)
查看>>
远程连接windows系统提示:其他用户要远程登录,需要通过远程桌面服务进行登录的权限......
查看>>
html5的移动开发二重身份需求
查看>>
我的友情链接
查看>>
10个SQL注入工具
查看>>
[李景山php]每天laravel-20160826|EncryptionServiceProvider
查看>>
[李景山php]每天laravel-20161005|Validator.php-5
查看>>
php读取大文件详解【OK】
查看>>
Gnome 快捷键汇总
查看>>
通过注册表修改我的文档等系统文件夹默认位置
查看>>
expdp 详解及实例
查看>>
C++中 栈的简单封装
查看>>
我的友情链接
查看>>
Linux常用命令--iconv
查看>>
varnish的了解与常用配置使用
查看>>
Product user profile information 没有导入
查看>>
DELL T410服务器U盘安装Centos7
查看>>
解读最具O2O属性—哈根达斯微信企业号的成功之道
查看>>
Sqlserver2008日志压缩
查看>>
虚拟机usb无线上网同时主机本地上网或无线无线上网
查看>>