Bootstrap-css前端框架(一、入门使用)

Bootstrap框架入门

最新推荐文章于 2024-04-30 15:44:23 发布

原创最新推荐文章于 2024-04-30 15:44:23 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css #bootstrap #前端框架

前端框架专栏收录该内容

2 篇文章

订阅专栏

本文介绍了流行的前端框架Bootstrap，详细讲解了其使用步骤及原因，并通过一个简单的示例展示了如何快速搭建项目。

Bootstrap是一种前端框架,是时下最流行的一种前端框架，也是用的最多的。
前端框架:使用HTML、CSS、JavaScript编写的组件工具集,需要的时候直接拿来用就可以了。
Bootstrap是由Twitter在2011年8月开源的整体式前端框架,Bootstrap被广泛的用在后台管理页面。

Bootstrap之所以流行的原因下面这几个原因:
1、Bootstrap功能强大并且样式美观；
2、Bootstrap简单易用、文档丰富;
3、高度可定制性；
4、丰富的生态圈；
5、布局兼容性好

首先来说一下Bootstrap前端框架的使用
使用Bootstrap前端框架的步骤:
一、在Bootstrap官网上下载一个Bootstrap,版本可以自行选择，
官网:http://getbootstrap.com
Bootstrap有各种各样的版本,那么我们在选择版本的时候如何选择:
先说一下不同版本的区别: 最新版本已经发展到Bootstrap 3 但是不意味着 Bootstrap2已经淘汰了,Bootstrap3采用了扁平化的风格,Bootstrap2在按钮、工具栏等位置更多采用了立体的效果,它们之间没有谁好谁坏的区别,只是设计风格的不同. 应该根据自己项目的实际需求来决定使用哪一个版本。Bootstrap追求的是扁平化设计,即抽象、极简和符号化,而Bootstrap追求的是元素的各种特效。
二、在项目中导入Bootstrap
首先来明确一下在html中导入Bootstrap我们具体需要哪些文件,Bootstrap的css文件,Bootstrap的js文件,一个一个jquery文件,并且jquery的版本必须是高于1.9,并且低于3.0的。
下载下来Bootstap之后,找到dist文件夹,

需要用到Boostrap的css文件和js文件都在这个文件夹里.
这里写图片描述

jquery文件读者可以自行用自己的jquery文件。
我们需要注意因为bootstrap框架依赖于jquery,所以要先导入jquery.js再导入bootstrap.js。
把js放入到body中来导入,而不放在head中导入的原因是什么呢?
如果放到head中导入,服务器给客户端浏览器传输该页面的时候从上到下传输,这样会先传输js文件,如果用户的网速比较慢,这样在传输js文件的过程中,body中的内容还没有传输过来,这样用户看到的是一片白,影响用户的体验,所以我们通常把js文件放到后面加载,这样用户可以先看到body中的内容,再下载js来改变页面的行为,提高用户了用户的体验.(否则用户看见一片白直接关闭网页了)
最后总体来看一下最简单的Bootstrap需要的文件
这里写图片描述

用Bootstrap框架做一个最简单的helloworld
代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap</title>
    <link rel="stylesheet" href="bootstrap.css">

</head>
<body>
    <h1>Hello , Bootstrap!</h1>


    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</body>
</html>

可以尝试一下。
这个代码是最简单的,这样的代码只能兼容桌面级的客户端,用移动端访问的时候,字体会变很小,我们可以加入下面这个标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

该语句是为了解决移动端浏览器显示问题
页面宽度为设备宽度,初始缩放比例为1.0,调整比例对桌面浏览器并不起作用,只对移动端浏览器生效,比例值越大字越大

Bootstrap最基本的入门就到这儿了~~~