有些开发者是Bootstrap的狂热粉丝, 他们会尽可能地使用Bootstrap. 其他开发商则持相反观点, 他们有自己的理由避免一起使用Bootstrap. 以下是我们的Toptal开发人员分享的双方背后的一些原因.

Bootstrap的主要优点是它的设计是响应式的, 它保持了广泛的浏览器兼容性, 它通过使用可重用的组件提供一致的设计, 而且它很容易使用，而且学起来很快. Bootstrap捆绑了基本的HTML和CSS设计模板，其中包括许多常见的UI组件, 它将生成一个可以处理多个浏览器的UI, devices, and resolutions. 它还通过使用JavaScript提供了丰富的可扩展性. 它内置了对jQuery插件和编程JavaScript API的支持. 更不用说Bootstrap可以与任何IDE或编辑器一起使用, 以及任何服务器端技术和语言.

Toptal的一名开发人员最近不得不快速创建一个嵌入式系统. 他决定使用Bootstrap，因为他不想通过嵌入它来破坏网站现有的主题. 他最后做的是复制了所有的Bootstrap SASS文件, 删除所有不需要的模块, 并在调用导入之前放置一个类, 所以它只影响嵌入系统. 编译之后，一切都很顺利. For him, 开发者而不是设计师, Bootstrap是一件好事，因为它很灵活，提供了很多选择, 他可以根据自己的需要构建或调整框架. 它有他需要的所有功能, 清理不必要的部件只需要几分钟的工作.

另一方面，有些开发者根本不喜欢Bootstrap. 其中一个原因是它是由Twitter创建的. 大公司的问题是，在某些时候，他们只是强制执行他们认为最好的东西，而不听取用户的意见. Bootstrap是一个开源项目，但得到大公司的支持可能会有起起伏伏. 好处显然是资金，以及一个致力于项目的核心团队. 缺点是它总是受到投资者需求的影响，而不是社区驱动. 对他们来说，付费客户是第一位的，社区是第二位的.

对于正在寻找Bootstrap替代方案的开发人员，Toptal开发人员推荐 Skeleton. 骨架是一个CSS框架，或者他们如何称呼它，一个样板. 它简单且轻量级，只有大约400行CSS代码. 不需要编译代码，因为它是用纯CSS编写的. It doesn’t include the large number of components like Bootstrap does; it contains only fundamental CSS rules for raw HTML elements and provides a responsive grid. 所有这些都意味着它比Bootstrap更轻、更快、更简单. 它也是建立在移动第一的思想和是 open sourced on Github.

HTML5为网页开发者和设计师引入了新的语义元素和伟大的新特性，他们希望编写可读性强、语义有意义的布局. 然而，对HTML5的支持仍在不断发展. 所有现代浏览器都支持HTML5, 但不幸的是，有些浏览器在添加对现代标准的支持方面进展缓慢. 另一个问题是，一些用户无法升级他们选择的浏览器, 他们还在使用旧的ie9或更旧的浏览器, Safari 4.x (and iPhone 3.x), or Firefox 3.x. 它们都不支持HTML5和CSS3. 正因为如此，我们需要以某种方式指导他们如何处理(对他们来说)“未知”的HTML元素.

第一个也是通常的选择就是使用 HTML5 shiv. 虽然这是一个有效的解决方案, Toptal开发人员有几个理由推荐另一个框架——Bootstrap.

Bootstrap的设计和构建是为了在最新的桌面和移动浏览器中发挥最佳作用, 但它也支持旧的浏览器. 某些组件和元素可能显示不同的样式, 但是所有的东西都应该是功能齐全的. 支持包括Internet Explorer 8和9, 通常需要注意的是，这些浏览器并不完全支持一些CSS3属性和HTML5元素.

一个非常基本的Bootstrap“Hello world”HTML模板示例如下:

  
    
    
    
    
    
  
  
    
Hello, world!
    
    
  

全球最大的赌博平台
嘉禾舞蹈工作室
Sun-City-Entertainment-media@11tiao.com
沙巴体育
招商银行-出行易
皇冠直营
昆明美利达专卖
新葡京
图解电影
Crown-camp-hr@lhunterphotography.com
掌贝官网
北京第一时间房源网
The-Venetian-Macao-app-service@tuwabuki.com
财经网 宏观频道
同城游
365bet-Chinese-admin@artanarc.com
Grand-Lisboa-contactus@shanebilliard.net
平安力合
武汉161医院
金沙博彩

先锋电器集团官方网站
中国防水企业网
洛克王国官方网站
建湖教育网
搜狐焦点北京二手房
乐清教科研网
保险岛
廊坊热线 
411au劲舞团 
中缆在线

山西医科大学
广州医科大学附属第三医院
遂平在线—
欣欣广西旅游网
丹秋名师堂学校官网

这里重要的是用HTML5 Doctype声明开始HTML, 这样浏览器就知道它期望得到什么样的文档. 头部包含三个重要部分 必须首先声明的标记，并且必须在它们之后添加任何附加的头标记. 以获得对Internet Explorer 8和其他旧浏览器的全面支持, 我们可以在CSS3媒体查询中使用polyfill Respond.js, and previously mentioned HTML5 shiv 如何使用HTML5元素. 确保ie浏览器不是以兼容模式运行, 我们还需要添加适当的IE tag in the HTML head.

最终的HTML文件看起来应该像这样:

  
    
    
    
    
    
    
  
  
    
Hello, world!
    
    
  

全球最大的赌博平台
嘉禾舞蹈工作室
Sun-City-Entertainment-media@11tiao.com
沙巴体育
招商银行-出行易
皇冠直营
昆明美利达专卖
新葡京
图解电影
Crown-camp-hr@lhunterphotography.com
掌贝官网
北京第一时间房源网
The-Venetian-Macao-app-service@tuwabuki.com
财经网 宏观频道
同城游
365bet-Chinese-admin@artanarc.com
Grand-Lisboa-contactus@shanebilliard.net
平安力合
武汉161医院
金沙博彩

先锋电器集团官方网站
中国防水企业网
洛克王国官方网站
建湖教育网
搜狐焦点北京二手房
乐清教科研网
保险岛
廊坊热线 
411au劲舞团 
中缆在线

山西医科大学
广州医科大学附属第三医院
遂平在线—
欣欣广西旅游网
丹秋名师堂学校官网

Now, 我们的web应用程序不仅支持旧的浏览器, but in the same time we have a very good set of reasonable CSS defaults to choose from; so we are able to concentrate more on the development work than worrying about design and legacy browsers, 我们可以安全地使用所有现代HTML5和CSS3.

复杂的web应用程序通常需要来自用户的大量数据, 表单是允许这些应用程序检索和处理数据的主要工具之一, 无论是用于存储还是用于生成信息.

激励和促进用户提供这些数据是一件重要的事情. 如果开发者和设计师不这么做, 用户可能会逃避表单，避免使用应用程序.

有许多工具和技术可以帮助构建易于使用和有吸引力的表单，以确保用户不会放弃填写它们, such as gamification, 将表单分成更小的、独立的部分，让用户有一种进步的感觉. 后者非常重要和有用. 如果用户看到他们前进了多少，还有多少需要他们填充, 他们更有可能继续填写表单(或者保存当前进度以便以后继续).

因为Bootstrap在开发社区中是一个统一的框架(正如他们所说), “Bootstrap使前端web开发更快更容易”), 让我们看看如何构建一个进度条，它可以在用户填充或删除输入时自动增加/减少.

第一步是为Bootstrap进度条组件编写HTML代码:

Progress:

    

        0% Complete
    

上面的代码将产生如下结果:

让我们也写一个小表单的标记，以便我们可以测试我们未来的脚本:

    

        Name
        
    
    

        Age
        
    
    

        Street
        
    
    

        City
        
    
    

        State
        
            - Select -
            First State
            Second State
            Third State
        
    
    

        SEND
    

我们的小形式是这样的:

现在让我们来做有趣的部分——编写一小段JavaScript代码，使进度条对输入填充和选择做出反应. 当发生以下事件之一时，我们将更新进度条:

1. 任何表单元素(输入和选择)都被集中出来. 这是因为我们不想在每次按键后重新计算进度. 我们只需要在用户完成编辑一个元素并导航到另一个元素时更新进度条.
2. The SEND button is clicked. 我们希望在点击此按钮时重新计算进度，因为我们可以执行其他操作(如显示反馈消息), for example) in some cases. 示例:如果所有内容都已填满，则显示祝贺信息.

为了使进度条工作，我们只需要下面的JavaScript代码:

Note that the updateInputProgress() 函数在任何输入或选择元素被模糊以及按钮被单击时调用, like explained above. 如果你的表单有其他元素(比如文本区域)，我们可以增加接收blur事件的元素列表, 并且还增加了用于计算进度的元素列表 $('#input-progress').find('input, select').each(function() {.

The examples can be downloaded, or you can see them visualized. 有两个示例:为每个输入更新进度条，以及在填充整个字段集时更新进度条.

每个设计过程的一部分都是关注用户体验(UX)。. 小细节和吸引人的细节是优秀UX和优秀UX的重要区别.

让我们考虑这样一种情况:你正在浏览一个网页，需要在后台获取一些额外的数据. 现代web应用程序正在使用Ajax调用，而不是提交和重新加载整个页面. Ajax调用是一种异步调用，其中网页的UI不会改变, 而且用户通常不会意识到某些过程正在后台发生. Ajax调用可以非常快地完成, 但是，如果网络连接不良或从服务器获取数据的服务器负载过重, it can last a few seconds, or even a lot more. Toptal的开发者总是为细节殚精竭虑，以便为客户提供最佳体验, 在这里，他们分享了如何使用jQuery的帮助, little spinner graphics, 和几行代码来改善你的用户体验.

When doing an Ajax call, 你可以显示一个小的旋转图形来通知用户后台正在发生一些事情. 这个微调器可以通过jQuery全局调用来显示和隐藏.

我们将使用原生jQuery函数 ajaxStart and ajaxStop. 这里的主要问题是只定义它们一次, 并且只在Ajax调用开始和结束时调用它们, 因此，我们不必在代码的其他地方复制我们的逻辑.

例如，我们可以定义一个 div in the body element, with id="spinner". Inside the div 元素我们定位的很好看 FontAwesome spinner. 当然，您可以使用任何GIF动画，或您喜欢的类似对象. 在JavaScript代码中，我们只是将其修改为在引发start和finish事件时显示或隐藏.

只是不要忘记在页面上隐藏旋转器. 定义好之后，您就可以专注于应用程序逻辑和执行实际的Ajax调用了.

下面的几行代码可以让你的用户体验更直观，用户也更开心:

/*设置导航栏在左边*/
$('.list-group a').click(function(){ 
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});
/* show spinner */
$( document ).ajaxStart(function() {
    $('#spinner').removeClass('hidden');
});
/* hide spinner */
$( document ).ajaxStop(function() {
    $('#spinner').addClass('hidden');
});

以下是示例代码，在Twitter Bootstrap的一点帮助下得到增强: