Bootstrap-css前端框架(一、入门使用)-JieYingAI捷鹰AI

Bootstrap是一种前端框架,是时下最流行的一种前端框架，也是用的最多的。

前端框架:使用HTML、CSS、JavaScript编写的组件工具集,需要的时候直接拿来用就可以了。

Bootstrap是由Twitter在2011年8月开源的整体式前端框架,Bootstrap被广泛的用在后台管理页面。

Bootstrap之所以流行的原因下面这几个原因:

1、Bootstrap功能强大并且样式美观；

2、Bootstrap简单易用、文档丰富;

3、高度可定制性；

4、丰富的生态圈；

5、布局兼容性好

首先来说一下Bootstrap前端框架的使用

使用Bootstrap前端框架的步骤:

一、在Bootstrap官网上下载一个Bootstrap,版本可以自行选择，

官网:

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

代码如下:


<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最基本的入门就到这儿了~~~

版权声明 1 本网站名称：捷鹰AI导航
2 本站永久网址：www.jieyingai.com
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长QQ:1392478547进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新

THE END