初识Bootstrap

来源：互联网发布：淘宝客单价怎么算编辑：程序博客网时间：2024/06/06 04:01

前言

我们期终于可以进入ITOO的项目开发与维护当中，心中甚是激动，我属于评教模块，我们组就三个同学，首要任务是开发微信版的评教系统，听起来很高大上，其实很简单，因为后台用旧的就可以了，只需要修改前台的代码，让界面可以适应手机的屏幕，这就用到了Bootstrap，下边我们就来一探究竟！

概念

Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

说白了他就是一个前台的框架，跟EasyUI是差不多的东西，添加引用，然后查看文档，直接使用就可以了。

和EasyUI的区别

他们都是前段UI组件库，bootstrap更着重使用cssshixian ，而easyui多是使用JS实现，如果是后台管理的界面，多使用easyui，他做出来的界面比较的简约，而如果做前台那么就选择Bootstrap，更加的酷炫，样式也更加好看一些。下边是两个不同表单的样式图片，从中就能看出两者的区别

EasyUI的表单：

bootstrap的表单：

如何使用

1.下载

2.添加引用

<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

3.查看文档和教程

推荐几个网站给大家：

中文文档：http://v3.bootcss.com/

菜鸟教程系列之bootstrap:http://www.runoob.com/bootstrap/bootstrap-tutorial.html

可视化布局：http://shoelace.io/

可视化编程：http://www.bootply.com/

总结

刚开始没有了解Bootstrap的时候，觉得很难上手，但是真的到了做项目的时候，就知道了，其实是非常简单的，只要添加引用，多看看文档，分分钟界面就能画出来，在这个过程中，看文档，逛社区是必不可少的，多看看别人是如何使用的，学会站在巨人的肩膀上，我们才能走的更快走的更远

0 0