这篇文章主要为大家展示了“Bootstrap框架怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Bootstrap框架怎么用”这篇文章吧。
什么是 Bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。由 Twitter 的 Mark Otto 和 Jacob Thornton 合作开发的一套 HTML、CSS 和 JS 框架。Bootstrap 是基于 HTML5 和 CSS3 开发的,它在 jQuery 的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分 jQuery 插件。用过 HTML5 和 CSS3 的人都知道,现在一些高大上的网站都少不了 html5 和 css3。而Bootstrap 正式基于这些设计出来的,它为我们封装好了现成的 CSS 样式合集。供咱们直接引用。
Bootstrap 有什么“过人之处”?
Bootstrap 内置样式非常漂亮,而且够用。与其把网站搞得花里胡哨,不如一切从简。Bootstrap 在 reset 浏览器样式之余,又添加了类 Twitter 的页面元素,咱们要做的只是使用,肆无忌惮地、放心地用,不用琢磨这个行高、计算那个宽度、让不小心忘记定义的页面元素尴尬地显示在页面上。因为这些Twitter 已经为咱们考虑设计好了,而且出自 Twitter 之手,毕竟经受了亿万用户的考验,外加 Twitter 强大的设计团队的支持,更让这套框架显得与众不同。
当然 Bootstrap 的好处不止如此,不然 Bootstrap 也不会一经发布,就迅速红遍大江南北。
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持:所有的主流浏览器都支持 Bootstrap。
容易上手:只要具备 HTML 和 CSS 的基础知识,就可以开始学习 Bootstrap。下面会给出具体了例子,演示如何快速使用Bootstrap。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
最主要的一点原因,它不仅好,而且是开源的。
(关于响应式设计这块是咱们web开发者将来所必所面对的,因为随着各种移动设备的不断发展,手机平板的盛行。这些移动设备大有成为主流之势。所以咱们必须要跟上潮流,搞好PC网站的同时也必须要考虑让网站适应其他终端。 )
Bootstrap的简单使用
这一部分主要说明一下 Bootstrap 的环境安装,文件结构,并且通过一个 demo 演示如何使用 Bootstrap。
首先下载 Bootstrap 的最新版本: http://v3.bootcss.com/getting-started/#downloadBootstrap 提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。下载压缩包之后,将其解压缩到任意目录即可看到以下(压缩版的)目录结构:bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf├── glyphicons-halflings-regular.woff└── glyphicons-halflings-regular.woff2
上面展示的就是 Bootstrap 的基本文件结构:这里提供了编译好的 CSS 和 JS (bootstrap.) 文件,还有经过压缩的 CSS 和 JS (bootstrap.min.) 文件。同时还提供了 CSS 源码映射表(bootstrap.*.map) ,可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体,在附带的 Bootstrap 主题中使用到了这些图标。
关于压缩版和未经压缩版,使用的时候引用其中一个即可。
Demo
下面是使用了 Bootstrap 的 html 代码,给按钮添加了一些 Bootstrap 样式。
<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 按钮选项</title><!-- 添加对Bootstrap的引用 --> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body><!-- 标准的按钮 --><button type="button" class="btn btn-default">默认按钮</button><!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --><button type="button" class="btn btn-primary">原始按钮</button><!-- 表示一个成功的或积极的动作 --><button type="button" class="btn btn-success">成功按钮</button><!-- 信息警告消息的上下文按钮 --><button type="button" class="btn btn-info">信息按钮</button><!-- 表示应谨慎采取的动作 --><button type="button" class="btn btn-warning">警告按钮</button><!-- 表示一个危险的或潜在的负面动作 --><button type="button" class="btn btn-danger">危险按钮</button><!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 --><button type="button" class="btn btn-link">链接按钮</button></body></html>
可以看到上面的 html 代码中没有写任何其他的 css 代码,完全是引用 Bootstrap 的按钮样式。其中关键代码部分: class=”btn btn-default” btn:继承圆角灰色按钮的默认外观。 btn-default 是默认/标准按钮的样式。 要想更换其他的样式就更好其他的类即可,比如 btn-danger 是危险按钮。这些样式都在 bootstrap.min.css 文件中写好的一些样式,大家可以打开文件浏览一下。
就这样在不知不觉中就完成了对 Bootstrap 的使用,其他控件也都是不同的一些 class。在使用的时候注意经常查看官方文档,收获会很多。
另外,在引用 Bootstrap 的时候还需要特别注意一点:那就是 jquery.min.js 和 bootstrap.min.js 文件的引用顺序,因为 Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入。
以上是“Bootstrap框架怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!