bootstrap教程之bootstrap简介与环境安装

原创 国哥笔记  2019-04-01 15:17  阅读 243 views 次

今天闲来无事就来写一下bootstrap环境安装的教程,希望网友们支持关注,谢谢!

什么是bootstrap

bootstrap是来自Twitter的一款前端框架,它是基于html、css、JavaScript开发的以移动设备优先的响应式框架,我们可以使用它简单灵活的进行web开发。随着移动互联网的快速发展,由于bootstrap是以移动设备优先的响应式框架,所以成了web开发的首选,成了目前最受欢迎的前端框架。

bootstrap

怎样学习bootstrap

由于bootstrap框架是基于html、css、JavaScript开发的,所以学习bootstrap就必须先学会html、css、JavaScript,如果都学的很好,再学习bootstrap就比较容易了。学习bootstrap其实不用看视频,官网上有详细的文档讲解,如果html、css、JavaScript都会的话,自己看也能看懂。bootstrap框架嘛,其实就是将一些经常使用的布局或者功能提前做好,供大家调用。学习bootstrap其实就是学习怎样调用bootstrap事先给我们做好的布局或者功能。bootstrap是不是很简单呢?让我们一起来学习吧!

bootstrap的特点

  1. 它是响应式的框架,能自适应台式电脑、平板电脑、手机等屏幕;
  2. 它为开发人员提供了一个简单统一的解决方案,使开发更加简单快捷;
  3. 它有强大的内置组件,易于定制;
  4. 它是开源的,所谓开源就是开放源代码,免费的;
  5. ……

bootstrap包含的内容

  • 基本结构:bootstrap的基本结构由网格系统、链接样式、背景组成;
  • css:bootstrap自带了全局的css设置、基本的html元素样式、可扩展的class和先进的网格系统等特性;
  • JavaScript插件:bootstrap包含了12种jQuery插件,扩展了功能,可以增加更多的互动;
  • 组件:bootstrap包含了用于创建图像、下拉菜单、导航、警告框、弹出框等十几个可重用的组件;
  • 定制:可以定制bootstrap的组件、LESS变量和jQuery插件来得到自己的版本;

bootstrap环境文件包

1、下载bootstrap

百度bootstrap下载bootstrap最新版本。bootstrap针对不同等级的开发者和不同的使用场景为我们提供了3种文件包(如下图所示),对于我们初学者来说,只需要下载第一种就可以了。

下载bootstrap

2、文件包结构

将下载好的bootstrap文件包解压,解压后打开有3个文件目录:css样式文件目录、js文件目录和fonts字体图标文件目录。

1、css样式文件目录中包含8个文件:bootstrap.css文件和bootstrap.min.css(css核心文件,后者为压缩版)、.css.map后缀的文件4个(source map文件,有min的为压缩版)、bootstrap-theme.css文件和bootstrap-theme.min.css文件(可选的bootstrap主题文件,后者为压缩版的);

css样式文件目录

2、js文件目录中包含3个文件:bootstrap.js和bootstrap.min.js(JavaScript核心文件,后者为压缩版)、npm.js;

js文件目录中

3、fonts字体图标文件目录中包含5个文件:glyphicons-halflings-regular.eot(字体图标文件)、glyphicons-halflings-regular.svg(字体图标文件)、glyphicons-halflings-regular.tt(字体图标文件)、glyphicons-halflings-regular.woff(字体图标文件)、glyphicons-halflings-regular.woff2(字体图标文件);

fonts字体图标文件目录

bootstrap环境安装

1、添加HTML5 声明(<!DOCTYPE html>)

使用bootstrap框架需要是HTML5文件类型,所以需要添加HTML5 声明。HTML5声明是在文档的头部添加<!DOCTYPE html>,还需添<meta>标签来设置编码,如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<head>
</html>

2、添加viewport meta标签

为了让开发的网站对移动设备友好,需要添加viewport meta标签,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  • width=device-width:表示宽度是设备屏幕的宽度;
  • initial-scale=1:表示初始的缩放比例;
  • shrink-to-fit=no:表示自动适应屏幕的宽度;

3、引入bootstrap核心文件

将bootstrap.min.css、jQuery.min.js和bootstrap.min.js核心文件引入文档,特别注意的是jQuery.min.js必须在bootstrap.min.js引入之前引入,而其建议放在html网页的底部引入,这样可以避免网页加载慢以及不显示的问题。引入方法和css、js引入方法一样,通<link>标签和<script>标签引入,如下所示:

  • js引入:<script src="js文件或jQuery文件"></script>
  • css引入:<link href="css文件" rel="stylesheet"

到这bootstrap前端框架就安装完成了,如有不对的地方,望指出,谢谢

下集预告

bootstrap教程之bootstrap简介与环境安装到这就结束了,下一个教程预告:bootstrap教程之bootstrap网格系统。

非常想知道这个教程对大家是不是有用,如果你看了对你有所帮助,请在评论区打1,让我感觉一下成就感是什么样的感觉,谢谢!

 

本文地址:https://www.ggbiji.com/web-bootstrap.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情