bootstrap这种框架应该怎么使用

如题所述

下面我在这里简单的介绍下Bootstrap框架。
  Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀。
  一个完整的Bootstrap框架包含如下四个部分:
脚手架(不知道官网为啥这么翻译):用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术,比如重置背景这样的操作,这些比较简单我就不展开叙述了,脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列,栅格系统分为两种类型,一种是默认栅格系统,这时候栅格系统是按940px像素进行等分,我们可以使用span1,span4这样的class属性操作默认栅格布局,另一种是流式栅格系统,这个时候分列的宽度就不是固定,而是根据你可视页面进行12等分,同样可以使用span1,span4操作流式栅格。这个系统非常之好,做css最难的就是div布局,使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了,布局也分为固定和流式,让不太精通css布局也能轻松操作布局。
基本的css样式。Bootstrap给出了一样常用的HTML元素的样式,例如:按钮、表单和文字等等。大部分做网站的人都不是美工出身,做出赏心悦目的网页是件很困难的事情,css提供的样式很专业很精美,能让我们轻松开发出一套精美的网站
Css组件:Bootstrap还提供一些常用的css组件,同样很优秀很棒。
Javascript插件:Bootstrap是个开放的系统,我们可以随意扩展Bootstrap,特别是javascript的框架,这样Bootstrap就会更加专业。
  Bootstrap是个操作性质的框架,没必要做深入分析,最关键是有没有好的使用实例,我下载Bootstrap发现,下载包里的example不是太强大,例子都在它的官网上,很多对css和javascript不是特别熟悉的人使用起来都不太习惯,因此我将这些例子进行了整合,作为单独的例子工程,这个工程非常全面,我在网上找过,目前还没有比我整理的更详尽的例子,大伙下载下来按照我的工程目录结构就可以进行开发了。
温馨提示:答案为网友推荐,仅供参考
第1个回答  2018-03-22

    首先要进入官网,我们直接百度bootstrap,看得有个中文网,进入就可以了,或者看下图地址栏输入。

    单击页面上的下载按钮,进入如下模块中,我们能够看到能够下载的安装包。

    这里往下拉,它有非常多的安装方式,这里我们就选择第一个就好了,单击“下载Bootstrap”按钮进入下载。

    进入下载文件夹进行解压,这里我们可以看得解压后文件夹中所包含的文件。我们所需要知道的是,css是样式文件夹,里面包含了所有构造样式类,js是基于jQuery的行为文件夹,在引入js文件前需要先引入jQuery的js文件,font用于存储图标。

    现在我们创建一个新项目。将框架目录放到文件夹下面。然后创建一个html的文件作为页面容器。

    现在我们需要将需要的文件引入,具体如图所示。

    为了兼容手机端,还需要添加一条

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

    我们可以打开浏览器查看添加了框架和没有添加框架的具体效果。在这里全部都是优秀的使用Bootstrap框架的页面,我们可以进行参考。

第2个回答  2016-07-27
Bootstrap 是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 首先,人们发现 Bootstrap 框架超棒,于是开始使用,然后非常的恼火...

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网