bootstrap这种框架应该怎么使用

Posted 2023-03-16

下面我在这里简单的介绍下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不是特别熟悉的人使用起来都不太习惯，因此我将这些例子进行了整合，作为单独的例子工程，这个工程非常全面，我在网上找过，目前还没有比我整理的更详尽的例子，大伙下载下来按照我的工程目录结构就可以进行开发了。 参考技术A

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

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

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

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

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

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

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

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

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

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