使用bootstrap的原因是啥
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用bootstrap的原因是啥相关的知识，希望对你有一定的参考价值。
参考技术A 1.节省时间利用Bootstrap，你将有更多的时间用来挣钱。Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。
2.定制化
Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。
3.设计方面的因素
网格系统
对页面进行布局时，往往需要有一个合适的网格。你不一定使用该平台的网格，但它确实能大大降低你工作的难度。默认模式下，该平台提供一个16列的网格（宽为960px）。每列宽40px，每列左右两侧具有10px的间隙，各网格最外侧均留出20px的空白。你可以根据需要改变行数与间隔大小。样式已开发完成，开发者只需要把合适的代码放入html合适的位置即可。
LESS
LESS在开发周期内应用很广。它是一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。你可以利用LESS的Mixins及CSS操作定制内嵌网格。Bootstrap采用了大量流行的CSS3功能，可以对所有的网站提供统一的浏览体验。
javascript
Bootstrap提供JavaScript库，该库超越了基本的架构与样式。通过Bootstrap，开发者可轻易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是，它可以让你不必再费神费力地写脚本。
4.一致性
Twitter当初开发该工具的最主要原因是，开发者所开发项目在不同浏览器间的不一致性。这就导致了很多前端开发与最终用户界面之间的问题。Bootstrap保证了界面在不同平台上的统一性。在IE、Chrome及Firefox中，你可以看到统一的界面。
5.保持持续更新
以jQuery 的UI为例：每一年更新一次。而Bootstrap则在不停地改进，更具规律性与持续性。Web开发者一发现新问题， Bootstrap团队便立刻着手修复它。
6.易于集成
如果你想进一步完善一个已完成的网站，Bootstrap可以帮助你。例如，如果你要统一使用自己编写的表格样式，你要做的是把你的样式复制到CSS样式文件中。Bootstrap将立即剔除它本身的样式，在这里，你需要将该文件与Twitter进行关联。集成的过程十分简单、方便、快捷。完成之后，你便可以把你的设计应用到你的核心内容上。
7.响应式
Bootstrap为响应式框架。无论你的开发工作从笔记本转移到iPad，还是从iPad转移到Mac上，你都不用为你的工作而苦恼。因为Bootstrap能以超快的速递与效率适应不同平台间的差异。
8.对未来技术具有兼容性
Bootstrap包含很多特殊元素，如HTML5和CSS3，这些元素被称为设计的未来。因为该框架考虑到设计和开发的未来，它很有潜力成为未来几年里Web开发者的参考标准。
9.竞争力
Bootstrap并不是唯一的前端开发框架，比如还有JQuery UI、HTML5 Boilerplate等等。但对于Bootstrap来说，真正的竞争对手是Zurb Foundation。Bootstrap 2新增加了一个工具集，Foundation经过好长时间才填补上。Bootstrap包含大量的第三方插件、主题、功能特性、代码等等，而Foundation并不具备这些。
10.详尽的说明文档
Bootstrap的文档相当精彩。大部分新平台往往没有合适的说明文档，而Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。
11.让老板们受益
学习Bootstrap，并不会花费你太多时间，因为它将所有的模块化方法与体系结构封装在了一起。从老板的角度来看，如果你为Web开发者提供了Bootstrap框架，那么他们会节省更多的学习时间，并快速投入到工作中。这会为老板们带来更好的收益。
是否可以使用 Bootstrap 的模态对话框、jQuery、AJAX 和 PHP 将图像上传到服务器？如果是怎么办？如果不是，那是啥原因？
【中文标题】是否可以使用 Bootstrap 的模态对话框、jQuery、AJAX 和 PHP 将图像上传到服务器？如果是怎么办？如果不是，那是啥原因？【英文标题】：Is it possible to upload image to the server using Bootstrap's Modal dialog box, jQuery, AJAX and PHP? If yes how? If no what's the reason for it?是否可以使用 Bootstrap 的模态对话框、jQuery、AJAX 和 PHP 将图像上传到服务器？如果是怎么办？如果不是，那是什么原因？ 【发布时间】：2014-12-03 21:20:07 【问题描述】：我正在使用 PHP、jQuery（jquery-1.9.1.min.js 和 jquery-ui-1.10.0.custom.min.js）、AJAX、Bootstrap 设计框架（Bootstrap v3.0.0）等
我是 Web 编程领域的新手。
现在我想在一个地方显示 Bootstrap 框架的内置模式对话框，点击按钮。在此模式对话框中，将有一个用于上传图像文件的 HTML 文件控件。用户将通过浏览文件从他/她的本地计算机中选择任何图像文件。然后在执行以下所有必要的验证后，如
适当的标准图片扩展 最大大小限制为 5 MB 最小尺寸为 940 像素 * 370 像素文件应该使用 PHP 代码上传到服务器。如果任何验证失败，则相关的错误消息应在 File Upload HTML 控件上方以红色显示。
有没有可能实现这个功能？我听说不能使用 AJAX 上传文件。我真的不知道这是神话还是事实。如果有人知道这件事，请详细解释给我。
【问题讨论】：
可以结合Ajax、jQuery和php进行上传。看看这个developer.tizen.org/dev-guide/2.2.1/… @SonyMathew 链接已损坏 :( @pathros 参考这个链接：web-development-blog.com/archives/… 【参考方案1】：是的，这是可能的。这里有一些东西可以帮助您入门。
注意：这使用 PHP 类 class.upload.php 来上传图像。 (http://www.verot.net/php_class_upload.htm)
所有这些代码都已经过测试并且可以工作。我只是把它搅了起来，所以它很基本，但应该为你指明正确的方向。您需要清理输入、进行正确的消息传递等。
只需创建一个文件 (index.html) 并将 HTML 和 JavaScript 复制/粘贴到其中。然后创建一个文件post.php 并将PHP 放入其中。下载class.upload.php 脚本，然后创建一个名为uploads 的目录。给它适当的权限（0755 或 0777）。对于此示例，将所有内容保存在同一个文件夹中。你应该很高兴。
甚至可以将成功和错误消息直接放在模式中。为了简洁起见，我在这里使用alert()。如果您想将消息放在模态中，只需在模态中创建一个<div>，给它一个ID，然后在我使用alert() 的jQuery 中定位该ID。这很容易。
编辑：向示例添加消息。 :)
这是 HTML 和 jQuery (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Upload a Photo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<form id="form" enctype="multipart/form-data" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Upload Photo</h4>
</div>
<div class="modal-body">
<div id="messages"></div>
<input type="file" name="file" id="file">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$('#form').submit(function(e)
var form = $(this);
var formdata = false;
if(window.FormData)
formdata = new FormData(form[0]);
var formAction = form.attr('action');
$.ajax(
type : 'POST',
url : 'post.php',
cache : false,
data : formdata ? formdata : form.serialize(),
contentType : false,
processData : false,
success: function(response)
if(response != 'error')
//$('#messages').addClass('alert alert-success').text(response);
// OP requested to close the modal
$('#myModal').modal('hide');
else
$('#messages').addClass('alert alert-danger').text(response);
);
e.preventDefault();
);
</script>
</body>
</html>
还有你的 PHP 脚本 (post.php)
<?php
require_once 'class.upload.php';
$handle = new Upload($_FILES['file']);
$handle->allowed = 'image/*';
if($handle->uploaded)
$handle->Process('uploads');
if($handle->processed)
echo 'Image uploaded';
else
echo 'error';
【讨论】：
首先感谢您提供的帮助。你能帮我解决另一个问题吗？我想在成功上传图像文件后关闭模式对话框。你能把这个添加到你的代码中吗？ 当然可以。我将消息注释掉并添加了自动关闭模式的代码。以上是关于使用bootstrap的原因是啥的主要内容，如果未能解决你的问题，请参考以下文章
用bootstrap框架画的html页面 在android上用webview横屏显示出来 上方有明显的空白是啥原因
用bootstrap写轮播图的js出现Failed to load resource: net::ERR_TIMED_OUT错误是啥原因呢，该怎么解决
使用 Bootstrap 混合应用程序开发 ReactJS 的程序是啥