当前位置:首页>开发>正文

bootstrap这种框架应该怎么使用 预编译的 bootstrap 怎么用

2023-05-24 00:44:43 互联网 未知 开发

 bootstrap这种框架应该怎么使用 预编译的 bootstrap 怎么用

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

预编译的 bootstrap 怎么用

下载 Bootstrap
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。

Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

bootstrap按钮怎么使用

bootstrap的CSS是用LESS编译的,面对一个编译过后的框架型项目,不建议: 增加权重更高的CSS规则,覆盖原有的(包括使用!important来强制复写) 增加class/id,改变你的DOM属性,然后自己写CSS规则 这样会大大增加你自己的CSS(如果有的话)和CSS框架的耦合度,也会让代码变得越来越多,失去可维护性。 CSS源自哪里,就从根源处解决:下载LESS源文件,然后搜索border-radius属性,把它全部去掉。然后重新编译CSS。 P.S.jQuery Mobile的CSS样式同理。我曾经维护原来同事的一堆复写JQM框架的样式维护得吐血。

怎么给bootstrap框架添加背景颜色

首先我们当然是需要得到Bootstrap相关文件,因为在网页中应用Bootstrap是需要引入其相关文件的。我们可以到Bootstrap官网下载。

如果你的英文水平不是太好的话,没关系,我们可以到国内做的汉化比较好的Bootstrap网站去下载,最新版本都是3,属于扁平化的那种。

以上两步点击下载按钮后都会跳转到一个详细下载列表,有三种Bootstrap,这里我们下载第一个就可以了。

下载完成后解压,会看到文件有三个子文件夹,分别是css、font、js,里面带min的文件都是压缩后的文件,在网站上线的时候用,其他未压缩的文件我们可以在平时开发的时候用。

再之后就是要用这套Bootstrap框架了,首先要做的就是建立一个html文件,你可以用任何文本编辑器,这里推荐Dreamweaver CS6,个人感觉比较好用。

接下来就是要引入css文件了,要把文件的路径写正确,如果网页内用到了Bootstrap的js效果,那么必须先引入jQuery文件,因为Bootstrap的js插件都是基于jQuery的。

最后就可以在body标签内应用Bootstrap相关的class了,这些都是封装好的,只要嵌套正确就是做出漂亮的网页了。
步骤阅读

最新文章