bootstrap框架,bootstrap用来干嘛
大家好,今天来为大家分享bootstrap框架的一些知识点,和bootstrap用来干嘛的问题解析,大家要是都明白,那么可以忽略,如果不太清楚的话可以看看本篇文章,相信很大概率可以解决您的问题,接下来我们就一起来看看吧!
如何使用bootstrap框架
到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩(bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons
所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小,到官网下载jQuery支持,如图:
将下载后的就jQuery放到bootstrap中的js目录下,如图:
在bootstrap的根目录下新建一个demo.html文件,(注意,必须在根目录下面新建,因为后面的步骤中要将bootstrap框架中的css和js文件链接到创建的demo中)
编辑demo.html文件,添加对bootstrap框架中css和js的引用,内容如下,图片有注释说明,这样,我们就基本上建立了对bootstrap框架的基本使用架构
源码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport的<meta>标签,这个标签可以修改在大部分的移动设备上面的显示,为了确保适当的绘制和触屏缩放。-->
<title>无标题文档</title>
<!--样式文件引用-->
<link rel="external nofollow" href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries-->
<!-- WARNING: Respond.js doesn't work if you view the page via ;
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>
<![endif]
IE9以下的浏览器并不支持这些标签,也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件
意思就是说如果用户IE浏览器的版本小于IE9,那么就会加载这两个js文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了
-->
</head>
<body>
<!--JavaScript插件都是依赖与jQuery库-->
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
另外,bootstrap官方提供了链接服务,永久免费,即使你不下载bootstrap框架文件到本地,也可以直接在html中使用,使用下面这段代码:
<link rel="external nofollow" href="" rel="stylesheet">
<script src=""></script>
<script src=""></script>
bootstrap框架是什么意思
bootstrap框架是什么意思
Bootstrap是一组用于网站和网络应用程序开发的开源前端(所谓“前端”,指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码)框架,包括HTML、CSS及JavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展,旨在使动态网页和Web应用的开发更加容易。
Bootstrap与最新版的Google Chrome、Firefox、Internet Explorer、Opera和Safari浏览器兼容,尽管有些浏览器并不是支持所有操作系统。
从2.0版本开始,Bootstrap支持响应式网页设计(RWD)。页面布局可以根据显示网页的设备(桌面、平板电脑、手机)来进行动态调整。
从3.0版本开始,Bootstrap将移动设备优先作为设计方针,更加强调了响应式设计。
4.0 alpha版本添加Sass和Flexbox的支持。
Bootstrap是开源软件,可以从GitHub上面找到。开发者被鼓励参与项目,并且对项目做出自己的贡献。
Bootstrap采用模块化设计,并且用LESS样式表语言来实现各种组件和工具。一个名为bootstrap.less的文件包括了这些组件和工具,开发者可以修改这个文件,自行决定项目需要哪些组件。
通过一个基本配置文件可以进行有限的定制,此外也可以进行更加深入的定制。
LESS语言支持变量、函数、运算符、组合选择器和一个叫做Mixin(混入)的功能。
从Bootstrap 2.0开始,Bootstrap文档包括一个叫做“自定义”的特别选项,开发者可以根据自己的实际需要来选择包含的组件和效果,然后生成和下载已经编译好的包。
网格系统和响应式设计以1170像素宽为基准。此外开发者也可以自定义基准。这两种情况下,Bootstrap都能提供四种变体:手机竖屏、手机横屏和平板电脑、PC低分辨率、高分辨率,每个变体都会自动调整网格宽度。
bootstrap框架有哪些,还有什么选择器
bootstrap框架有还有基于移动端考虑的轻量级仿jquery框架zepto,还有jquery mobile,还有适合写后端或服务端的node,等等。
但实际它还是解决了很多移动前端开发的普遍问题,是主要面向混合开发的 CSS框架。看起来作者比较猖狂,各种高级 CSS3遍地使用。
不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。
包含内容:
基本结构:Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap基本结构部分详细讲解。
CSS:Bootstrap自带以下特性:全局的 CSS设置、定义基本的 HTML元素样式、可扩展的 class,以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
组件:Bootstrap包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript插件:Bootstrap包含了十几个自定义的jQuery插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
如果你还想了解更多这方面的信息,记得收藏关注本站。