Bootstrap简介,什么是Bootstra?

原创 国哥笔记  2018-09-06 19:52  阅读 651 views 次

Bootstrap简介

Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的Mark Otto和Jacob Thornton一起开发的,Bootstra框架是基于HTMLCSSJavaScript 开发的,它因简洁、直观、功能强大被开发者广发使用。

Bootstrap前端框架使得 Web 开发更加快捷,提供了优雅的HTML、CSS和JavaScript规范,它是由动态CSS语言Less写成。Bootstrap前端框架刚推出就颇受欢迎,一直是GitHub上的热门开源项目,是一些前端开发者较为熟悉的框架。

Bootstra框架用途和优点

我们可以使用bootstra框架提供的样式和组件快速的完成一个网站的前端页面,只需要引用一些定义好样式和组件(通过定义好的class来引用相应的样式和组件),就可以完成一个非常漂亮网页。而且bootstra框架还支持自适应,在不同大小的屏幕上会自动调节网页显示的内容,避免了在在pc上很漂亮的网页,而在移动端(小屏幕)左右出现滚动条,网页内容太小看不清等不利于用户体验的表现。

bootstrap框架文件包结构

针对具有不同技能等级的开发者和不同的使用场景,Bootstrap(当前版本 v3.3.7)提供了3种方式的文件包(如下图所示):

bootstrap框架文件包结构

 

用于生产环境的bootstrap框架文件包结构

用于生产环境的bootstrap框架文件包结构

 

  • Bootstrap:主目录
  • Css/:CSS样式文件目录
  • bootstrap.css:核心CSS文件
  • *.css.map:source map文件
  • bootstrap.min.css:压缩版核心CSS文件
  • bootstrap.min.css.map:压缩版source map文件
  • bootstrap-theme.css :可选的Bootstrap主题文件
  • bootstrap-theme.min.css :压缩版可选的Bootstrap主题文件
  • js/:JavaScript文件目录
  • bootstrap.js:核心JavaScript文件
  • bootstrap.min.js :核心JavaScript文件压缩版
  • fonts/:字体图标文件目录
  • glyphicons-halflings-regular.eot:字体图标文件
  • glyphicons-halflings-regular.svg:字体图标文件
  • glyphicons-halflings-regular.tt:字体图标文件
  • glyphicons-halflings-regular.woff:字体图标文件
  • glyphicons-halflings-regular.woff2:字体图标文件

Bootstra源码和Sass文件包结构详情略

Bootstra框架环境搭建

要使用bootstrap框架至少需要引入3个文件:bootstrap.min.css、jQuery.min.js、bootstrap.min.js。

<!-- Bootstrap核心CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- jQuery文件,必须在bootstrap.min.js 之前引入 -->
<script src="jquery/1.11.3/jquery.min.js"></script>

<!-- Bootstrap核心JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>

注意:

  1. bootstrap.min.css、jquery.min.js、bootstrap.min.js这三个文件的引入顺序不是随意的,jQuery文件必须在bootstrap.min.js 之前引入;
  2. jquery.min.js、bootstrap.min.js一般在HTML网页的最底部引入,这样可以避免这两个文件先加载出现问题,网页内容显示慢或不显示的问题。

实例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>静夜思</title>
<link href="css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap核心CSS 文件 -->
</head>
<body>
<div class="container-fluid  text-center">
<div class = "row">
<div class = "col-md-12">静夜思</div>
</div>
<div class = "row">
<div class = "col-md-12 small">李白</div>
</div>
<div class = "row">
<div class = "col-md-5"></div>
<div class = "col-md-1">床前明月光,</div>
<div class = "col-md-1">疑是地上霜。</div>
<div class = "col-md-5"></div>
</div>
<div class = "row">
<div class = "col-md-5"></div>
<div class = "col-md-1">举头望明月,</div>
<div class = "col-md-1">低头思故乡。</div>
<div class = "col-md-5"></div>
</div>
</div>
<script src="js/jquery.min.js"></script> <!--  jQuery文件,必须在bootstrap.min.js 之前引入  -->
<script src="js/bootstrap.min.js"></script><!-- Bootstrap核心JavaScript 文件 -->
</body>
</html>

运行代码[/url]

运行结果:

Bootstrap简介,什么是Bootstra?

说明:以上实例用到了bootstrap框架的删格系统的基本布局,后续会详讲。

本文地址:https://www.ggbiji.com/bootstrap-intro.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!
PREVIOUS:已经是最后一篇了
NEXT:已经是最新一篇了

发表评论


表情