基于bootstrap的项目开发？

bootstrap开发用什么工具

1. Jetstrap

Jetstrap 是一个完全基于 Web 的，用于 Twitter Bootstrap 的界面构建工具，专为开发人员，设计师和打造。Jetstrap 帮助您快速创拍陪悉建出漂亮网站，只需要花费很少的精力。

2. Bootply

Bootply 让你可以方便的调试 Bootstrap。编辑 CSS ，HTML 和 JavaScript。可以袭乎使用 Bootply 设计，原型，扩展或测试 Bootstrap 框架。Bootply 集成了其他流行的 Bootstrap 插件，微型库和框架。

3. DivShot

Divshot 是一个基于拖放的前端编辑器，允许你使用 Twitter Bootstrap（当然 Foundation 也可以）建立响应式的网站，不需要自己动手编码，只需要进行简单的拖放操作即可。

4. Bootstrap Magic

Bootstrap Magic 主题生成器基于 Twitter Bootstrap 3 和 AngularJS 构建。您可以轻松快速地创建您自己的 Twitter Bootstarp 主题。你可以立即看到你正在改变的内容是什么，您还可以添加来自 Google Webfont 的精美网页字体。

5. Layoutit

LayoutIt 是一个 Twitter Bootstrap 界面生成器，能够帮助你快速制作出网站和界面模型，同时能够下载生成的网站代码。简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站。所有的设计都可以是响应式 CSS 和流体，能够份容易与任何的编程语言集成，您只需下载 HTML 即可开始编码设计。

6. X-editable

X-editable 支持就地编辑 Twitter Bootstrap， jQuery UI 或纯乱启 jQuery。这个库允许你在自己的网页上创建可编辑元素。它包括弹出式和内嵌模式。它支持的输入元素包括文字，文本区域，下拉列表，日期， dateui 和 checklist。它支持客户端和服务器端验证。另外容器的位置是完全可定制的，用户可以通过单击，双击自动或手动切换。

7. Grid Displayer

Grid Displayer 是一个书签工具，可以用于显示 Twitter Bootstrap（固定和流体网格）和 Foundation（ 2.0 和 3.0 ）的网格。它支持 Firefox 和 WebKit 核心的浏览器。

8. GetkickStrap

Kickstrap 完美结合 Bootstrap，采用顶级的 Web 技术。它可以运行经过验证的，数据库驱动的 Web 应用程序，不需要原生后台。Kickstrap 结合 JSPM.io 提供了建立在 Require.js 的强大的前端软件包的依赖关系。 Kickstrap 应用程序是可以在任何时间在 Web 应用程序的生命周期中运行的静态资源集合。

9. Font Awesome

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标，除了包括 Twitter Boostrap 的默认图标外，还有社交网络图标、Web 应用程序图标和编辑器图标等等，可以免费用于商业项目。

10. Bootstrap Button Generator

这是一款很好用的 Twitter Bootstrap 按钮生成工具，你只需要输入你要分配的新的按钮样式，并与不同的按钮颜色搭配，更新就可以即时预览。

11. Easel

Easel 是一个令人印象深刻的 Twitter Bootstrap 设计工具，可让你在文档中的特定元素链接到其他文件的原型应用程序中。你甚至可以有你的用户通过测试让你得到尽早的在反馈。

12. Fancyboot

Fancyboot 是一个简单但功能强大的 Twitter Bootstrap 定制工具，控制的恰到好处，移除了所有不必要的复杂性。

13. Bootstrap Designer

Bootstrap Designer 是一个在线设计工具，可以制作出很漂亮的基于 Twitter Bootstrap 的 HTML5 模板。可以创建不同的设计风格：简约风格，黑白，排版驱动的，单色的外观，干净及创意等。

14. Bootsnipp

Bootsnipp 是一个元素画廊，为网页设计师和 Web 开发人员设计，任何人使用 Twitter Bootstrap 都会发现在他们的工作是必不可少的。

15. PaintStrap

Paintstrap 让你可以生成使用漂亮的 Twitter Bootstrap 主题，使用 Adobe Kuler 或者 COLOURlovers 配色。

怎么用bootstrap做一套网站

方法/步骤

何为Bootstrap? 简洁的、直观的、超牛的、以移动设备优先的前端开发框架唤桐滑，让web开发更迅速、简单。他是Twitter推出的html/css的前端框架, 现在的网页设计越来越多的平面化, 所以, 也就出现了一些平台来做平面化的样式来供我们来使用. 因为这款框架轮竖是一个开源的框架, 所以现在很多人都在使用该框架. 下载下来的框架目录结构如图:

怎

么去使用一个开源的框架或者一段现成的源码? 首先你确定要保证你所需要的引用你都有, 还有你要保证运行的最小点. 就是需要3个外部文件, A,

B, C, 你就要找到这3个文件, 如果是你找到的一段代码, 你要确保他能够运行, 如果都没有办法运行, 放弃吧. 另找下一个. 一般情况下,

一个框架都会给你一个最基本的例和腊子, 这个例子中使用了框架需要的外部文件和一些简单的说明, bootstrap也给出了一个简单的例子.

如图就是最基本的一个例子. 该例子说了一个很重要的, 也是很好的一个文件引用的方式, 就是css. 全部放在上面, 然后把js.

都放在页面的最下面, 这样能够更好的加载页面渲染. 建议你使用最基本的页面去修改你需要的页面, 而且要做到按照自己的需求来写代码. 不要复制,

粘贴.

Bootstrap中内置了一套响应式的, 移动优先的流式栅格系统, 随着不同的设备, 不同的平台. 或者窗口大小(viewport), 根据他们的不同系统会自动的分成12份. 也就是说, 栅格系统是通过一系列的行和列来组成我们需要的页面, 然后把你需要的内容放在这些的布局中.在使用栅格系统的时候, 需要注意的是: 需要在使用.row(行的意思)的外层使用 .container 为的是, 在赋值时给出合适的排列(aligment)和内补(padding).

举

个例子: 一行其中包含3个内容分别占屏幕的25%, 50%, 25%. 我们要在超小屏幕设备-手机上使用. 那么就要写成12的3, 6,

3. 具体代码看图片, 这里的效果图, 为了效果加上了一个well的class. 只是为了演示效果, 能够看清除.

为了有一个很好

的学习东西, 让你看一下表格的创建. 就是这么的简单, 只需要在table上,

填写一个class为.table的样式即可生成一个很好很实用的表格. 其实, 这些都是别人提前建立好的页面显示效果,

就是不用自己再去写一些简单的css效果. 多练. 多使用它就属于你.

在给出一个只有简单的带有导航栏的页面. 该页面, 理解透了, 这个东西你就算学会了, 剩下的就是用什么查一下文档就拿来用了,

什么是Bootstrap？

Bootstrap来自Twitter，是目前非常受欢迎的前端开源工具包，用于快速开发Web项目和应用程序。Bootstrap基于HTML、CSS、JAVASCRIPT，自2011年8月在Git Hub上发布，推出以后告老咐颇受广袜纯大用户青睐。Bootstrap中预定义了一套CSS样式以及与样式相对应的j Query(j Query是一个快速、小巧、功能丰富的JAVASCRIPT库）代码。在网页开发时，首先要在HTML结构的head与/head之间引入“bootstrap.min.css”，接着在script与/script之间引入“bootstrap.min.js”，然后在class类名称中引入Bootstrap中的样式类，即可实现预期的网页效果含搭

为什么前端都不愿意用bootstrap框架

谁说大家不愿意用bootstrap的？其实如果一个前端工程念弯亏师能够对bootstrap或者foundation这类框架有深入的了解的话，对技术、效率的提升还是挺明显的。在产品研发上，使用bootstrap也能仔神获得一个顺畅的开始。

就说css部分吧，得归功于less，bootstrap的css代码是模块化、有层次感的

整个代码库分成了几个层级和模块：variables mixins、reset styles、core、components、utilities等。对于一个短期项目来说，bootstrap作为框架能够很好的支撑开发。对于长期的项目或产品来说，即便不使用bootstrap，前端架构也会逐渐演化出 core、components、utilites之类的模块和层级，所以为什么不是用前人宝贵的革命成果呢？

不过悲伤的是，所有上面说的事情都有一个前提，主要两点：一是熟悉前端架闹宏构和bootstrap代码，二是比较懒，不愿意搞个人创作和探索。前者需要开发者对前端有一定的研究和经验，这就挡住了一些人，后者又被很多勤奋、自信的大牛所瞧不起。。。

如何使用Bootstrap实现分页及翻页

最近做的asp.netMVC项目中需要对数据列表进行分类，这个本来就是基于bootstrap开发的后台，因此也就想着bootstrap是否有分页插件呢，或者说是基于jquery支持的分页功能，这样整体的网站后台风陵好格便能够统一，又不用自己去写一套分页的功能。

首先便雀雹是要下载Bootstrap Paginator了，github上便有这个的开源项目提供下载：

首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及Paginator的js文件。其中网上搜到，貌似jquery必须要1.8版本以上，这个我没有亲自去测试看过。于是视图的文件引用便：

link href="css/bootstrap.css" rel="stylesheet"

script type="text/javascript" src="js/jquery-1.8.1.js"/script

script type="text/javascript" src="js/bootstrap-paginator.js"/script

然后，分页的功能当然是一个基于Ajax的局部刷新才能够吸引我们，当然这个便需要jquery的支持。之前自己搞的都是EasyUI的分页，这次也应该有点不同。

script

$(function () {

var carId = 1;

$.ajax({

url: "/OA/Setting/GetDate",

datatype: 'json',

type: "Post",

data: "id=" + carId,

success: function (data) {

if (data != null) {

$.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json

$("#list").append('table id="data_table" class="table table-striped"');

$("#list").append('thead');

$("#list"顷汪帆).append('tr');

$("#list").append('thId/th');

$("#list").append('th部门名称/th');

$("#list").append('th备注/th');

$("#list").append('th /th');

$("#list").append('/tr');

$("#list").append('/thead');

$("#list").append('tbody');

$("#list").append('tr');

$("#list").append('td' + item.Id + '/td');

$("#list").append('td' + item.Name + '/td');

$("#list").append('td备注/td');

$("#list").append('td');

$("#list").append('button class="btn btn-warning" onclick="Edit(' + item.Id + ' );"修改/button');

$("#list").append('button class="btn btn-warning" onclick="Edit(' + item.Id + ' );"删除/button');

$("#list").append('/td');

$("#list").append('/tr');

$("#list").append('/tbody');

$("#list").append('tr');

$("#list").append('td内容/td');

$("#list").append('td' + item.Message + '/td');

$("#list").append('/tr');

$("#list").append('/table');

});

var pageCount = eval("(" + data + ")").pageCount; //取到pageCount的值(把返回数据转成object类型)

var currentPage = eval("(" + data + ")").CurrentPage; //得到urrentPage

var options = {

bootstrapMajorVersion: 2, //版本

currentPage: currentPage, //当前页数

totalPages: pageCount, //总页数

itemTexts: function (type, page, current) {

switch (type) {

case "first":

return "首页";

case "prev":

return "上一页";

case "next":

return "下一页";

case "last":

return "末页";

case "page":

return page;

}

},//点击事件，用于通过Ajax来刷新整个list列表

onPageClicked: function (event, originalEvent, type, page) {

$.ajax({

url: "/OA/Setting/GetDate?id=" + page,

type: "Post",

data: "page=" + page,

success: function (data1) {

if (data1 != null) {

$.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json

$("#list").append('table id="data_table" class="table table-striped"');

$("#list").append('thead');

$("#list").append('tr');

$("#list").append('thId/th');

$("#list").append('th部门名称/th');

$("#list").append('th备注/th');

$("#list").append('th /th');

$("#list").append('/tr');

$("#list").append('/thead');

$("#list").append('tbody');

$("#list").append('tr');

$("#list").append('td' + item.Id + '/td');

$("#list").append('td' + item.Name + '/td');

$("#list").append('td备注/td');

$("#list").append('td');

$("#list").append('button class="btn btn-warning" onclick="Edit(' + item.Id + ' );"修改/button');

$("#list").append('button class="btn btn-warning" onclick="Edit(' + item.Id + ' );"删除/button');

$("#list").append('/td');

$("#list").append('/tr');

$("#list").append('/tbody');

$("#list").append('tr');

$("#list").append('td内容/td');

$("#list").append('td' + item.Message + '/td');

$("#list").append('/tr');

$("#list").append('/table');

});

}

});

}

};

$('#example').bootstrapPaginator(options);

}

});

})

/script

而在视图的主体部分便有两个div，一个用来呈现数据列表，一个用来放置选择页面的导航。

div class="span9"

label部门列表/label

hr /

div id="list"/div

div id="example"/div

/div

而后台这个GetDate的方法就像下面这样：

public ActionResult GetDate(int id, int? page)

{

int pageIndex = page ?? 1;//当前页

const int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制

//获取需要展示的部门数据

IEnumerableMODEL.qgoa_department list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x = x.Id!=null, x=x.Id);

//得到数据的条数

int rowCount = list.Count();

//通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算

if(rowCount%pageSize!=0)

{

rowCount = rowCount / pageSize + 1;

}

else

{

rowCount = rowCount / pageSize;

}

//转成Json格式