资讯频道 → Web前端
阅读更多

11顶
0踩

Web前端

原创新闻 Bootstrap 3.0 最佳新功能一览

2013-08-05 15:27 by 副主编 wangguo 评论(19) 有49908人浏览
Bootstrap Twitter CSS 前端 框架

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！




近日，Bootstrap开发者发布了Bootstrap 3.0 RC1，我们可以从中先领略到Bootstrap 3.x带来的全新特性。

从目前来看，Bootstrap 3.0已经远远优于2.x版本了。下面就来看看该版本中引入了哪些新特性。

扁平化和整洁的UI

又是扁平化！自从苹果iOS的UI从拟物化过渡到扁平化后，这种风格如今已经成为了现代化设计的代名词。而标榜“移动优先”的Bootstrap 3没有理由不扁平化。



Bootstrap 2.0通过一个简单的应用和一个统一的界面使之风靡互联网，而Bootstrap 3将这种风格上升到了另一个层次。除了带来了扁平化的UI外，Bootstrap 3还将标志性的紫色和导航栏用到了文档的主题中。



这样使得界面更加整洁，也使得Bootstrap可以更好地跨设备和浏览器。

图标字体

图标字体（glyphicons）现在已经从Bootstrap代码库中分离出来，你可以作为插件来使用它。

图标得到了重新设计，并且提供了一些新的有趣的图标。



新的网格系统

Bootstrap 3中的新的网格系统允许根据设备大小通过变量来声明。比如，你可以针对桌面环境设置4列布局，针对平板电脑设置2列布局，针对手机设置1列布局。这样，你就可以很容易地控制你的页面的跨设备显示效果。



根据列的表单布局

Bootstrap终于摆脱了它的表单控件类，在Bootstrap 3中你可以使用更整洁的网格类。比如： 

<div class="row">
  <div class="col-4">
    <label>
  </div>
  <div class="col-8">
   <input type="text">
  </div>
</div>


列表组（List group）

List group是一个新的组件，现在你也可以使用Bootstrap来创建一些应用原型，比如RSS Feed、状态列表、链接列表等。



如上图，通过自定义内容列表组，您可以轻松地创建reddit网站原型或者其他元素。现在，Bootstrap也多少开始朝着CSS原型框架的方向发展了。

上下文面板

Bootstrap现在开始更加认真地对待其着色系统，无论是警告、通知还是其他元素，现在都根据整体着色来进行风格化。



Row Mixins

现在你可以轻松地创建自定义的网格，或打散网格只定义那些你需要的部分（比如内容、侧边栏），而无需自定义一个完整的12列网格。

除此之外，你还可以为你的流体形式的行指定断点。下面是Bootstrap使用的代码：



你可以通过各种变量来修改Mixins的行为，比如@grid-float-breakpoint、@grid-columns和@grid-gutter-width等。如果想重建网站的布局，可以这样做： 

@grid-float-breakpoints: 768px
@grid-columns: 16
//I like 16 col layouts
@grid-gutter-width: 20px

#wrap {
  .make-row();
}

#header {
  .make-column(3);
}

#inner {
 .make-column(13);
}

.content-sidebar-wrap {
 .make-row();
}

#content {
 .make-column(12);
}

#sidebar {
 .make-column(4);
}


更多信息：Best New Features in Bootstrap 3.0

Bootstrap 3.0 RC1下载：http://getbootstrap.com/
  • 大小: 17.8 KB
  • 大小: 15 KB
  • 大小: 55.6 KB
  • 大小: 66.4 KB
  • 大小: 23.2 KB
  • 大小: 88.6 KB
  • 大小: 69.6 KB
  • 大小: 25.4 KB
11
顶
0
踩
评论 共 19 条 请登录后发表评论
19 楼 hahasimie 2013-11-19 09:35
这是不是扁平化http://danqingyu.com
18 楼 ken5695 2013-10-10 15:50
楼主好心，可否把上面那个最佳Demo的源码发到我邮箱liuzhenqun5695@163.com  拜谢。
17 楼 差沙 2013-08-11 16:10
zwxiaole 写道
差沙 写道
bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的页面连ie8都不兼容


你应该说bootstrap3连ie8都不兼容。
16 楼 zwxiaole 2013-08-09 08:32
差沙 写道
bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的页面连ie8都不兼容
15 楼 shusanzhan 2013-08-08 14:18
好好学习一下 最近想做一个网站
14 楼 闫老三 2013-08-08 12:17
不错不错~
13 楼 xlaohe1 2013-08-08 09:01
差沙 写道
bootsrtap3 最佳demo

http://xadmin.tianmiao.name/


你这个很好，赞一个，最好不要过一段时间就失效了
给出打包demo最好
  
12 楼 cyruscript 2013-08-07 18:39
新版本，下下来试下。
11 楼 damoqiongqiu 2013-08-07 10:33
wangguo 写道
准备邮件采访Bootstrap的作者之一Mark Otto，各位想问什么问题？

你问他啥时候能把控件体系做完善
10 楼 差沙 2013-08-07 10:18
zhaoyta 写道
差沙 写道
bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的服务器挂了




哈哈哈


一个更新引发的问题，多谢提醒，现在已经修复了。
9 楼 wangguo 2013-08-07 10:07
准备邮件采访Bootstrap的作者之一Mark Otto，各位想问什么问题？
8 楼 clxy 2013-08-06 12:24
扁平化？！那丰胸手术的意义在哪里?!
7 楼 damoqiongqiu 2013-08-06 09:51
拜托bootstrap不要做UI了好不好哇，搞搞CSS和布局就行了
6 楼 Pontifex 2013-08-06 09:07
差沙 写道
bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的服务器挂了




哈哈哈
5 楼 zhaoyta 2013-08-06 08:48
差沙 写道
bootsrtap3 最佳demo

http://xadmin.tianmiao.name/

你的服务器挂了
AttributeError at /
'WSGIRequest' object has no attribute 'session'
Request Method: GET
Request URL: http://xadmin.tianmiao.name/
Django Version: 1.5.1
Exception Type: AttributeError
Exception Value:
'WSGIRequest' object has no attribute 'session'
Exception Location: /usr/local/lib/python2.7/site-packages/xadmin/views/list.py in init_request, line 122
Python Executable: /usr/local/bin/python
Python Version: 2.7.2
Python Path:
['/opt/workspace/xadmin-demo',
'/usr/local/lib/python2.7/site-packages/setuptools-0.6c11-py2.7.egg',
'/usr/local/lib/python2.7/site-packages/PIL-1.1.7-py2.7-linux-i686.egg',
'/usr/local/lib/python2.7/site-packages/MySQL_python-1.2.3-py2.7-linux-i686.egg',
'/usr/local/lib/python2.7/site-packages/Sphinx-1.2b1-py2.7.egg',
'/usr/local/lib/python2.7/site-packages/docutils-0.10-py2.7.egg',
'/usr/local/lib/python2.7/site-packages/Jinja2-2.6-py2.7.egg',
'/usr/local/lib/python2.7/site-packages/Pygments-1.6-py2.7.egg',
'/usr/local/lib/python27.zip',
'/usr/local/lib/python2.7',
'/usr/local/lib/python2.7/plat-linux2',
'/usr/local/lib/python2.7/lib-tk',
'/usr/local/lib/python2.7/lib-old',
'/usr/local/lib/python2.7/lib-dynload',
'/usr/local/lib/python2.7/site-packages']
Server time: Mon, 5 Aug 2013 19:47:26 -0500
4 楼 dohkoos 2013-08-05 20:23
我讨厌导出都是扁平化！
3 楼 差沙 2013-08-05 16:58
差沙 写道
bootsrtap3 最佳demo

http://xadmin.tianmiao.name/


可以尝试在手机或平板上看一下，b3对mobile的优化还是有的。
2 楼 差沙 2013-08-05 16:54
bootsrtap3 最佳demo

http://xadmin.tianmiao.name/
1 楼 freezingsky 2013-08-05 16:48
UI还是那么简洁时尚。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • port端口一览表

    68　bootpc　bootstrap protocol client　引导程序协议客户端 69　tftp　trivial file transfer　小型文件传输协议 70　gopher　gopher　信息检索协议 71　netrjs-1　remote job service　远程作业服务 72　netrjs-2...

  • Java5-Java8新特性，这回全了

    现在 Servlet 3.0 提供了类似的特性，开发者可以通过插件的方式很方便的扩充已有 Web 应用的功能，而不需要修改原有的应用。 异步处理支持 Servlet 3.0 之前，一个普通 Servlet 的主要工作流程大致如下：首先，...

  • .NET Core 2.2发布一览

    本周终于发布了.NET Core 2.2，ASP.NET Core 2.2以及Entity Framework Core 2.2，虽然更大的新闻可能是.NET Core 3.0的特性公布，但不妨先将现有的.NET Core版本升级到2.2，及时体验一下新的功能。 .NET Core 2.2 ...

  • IOS开源库一览表

    一套Category类型的库,附带很多自定义控件 功能不错～  BlocksKit 将Block风格带入UIKit和Founcation  cocoa-helpers 一些Cocoa的扩展 2...

  • iOS开源库一览表

    一套Category类型的库,附带很多自定义控件 功能不错～  BlocksKit 将Block风格带入UIKit和Founcation  cocoa-helpers 一些Cocoa的扩展 2...

  • port常用和不常用端口一览表

    68　bootpc　bootstrap protocol client　引导程序协议客户端 69　tftp　trivial file transfer　小型文件传输协议 70　gopher　gopher　信息检索协议 71　netrjs-1　remote job service　远程作业服务 72　...

  • CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    ASP.NET开发团队推出的一个新的微软Ajax CDN（Content Delivery Network，内容分发网络）服务，该服务提供了对AJAX库（包括jQuery 和 ASP.NET AJAX）的缓存支持。该服务是免费的，不需任何注册，可用于商业性或非...

  • OFDM、OOK、PPM、QAM 的误码率模拟【绘制不同调制方案的误码率曲线】附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82.png

    8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82

  • Android SO逆向-对象的拷贝构造函数.pdf

    Android逆向过程学习

  • 基于S7-200 PLC的糖果包装控制系统设计与实现

    内容概要：本文详细介绍了基于西门子S7-200 PLC的糖果包装控制系统的设计与实现。首先阐述了PLC在工业自动化领域的优势及其在糖果包装生产线中的重要性。接着深入探讨了系统的硬件连接方式，包括传感器、执行机构与PLC的具体接口配置。随后展示了关键的编程实现部分，如糖果计数、包装执行、送膜控制、称重判断以及热封温度控制等具体梯形图代码片段。此外，还分享了一些实用的经验技巧，如防止信号抖动、PID参数优化、故障诊断方法等。最后总结了该系统的优势，强调其对提高生产效率和产品质量的重要作用。 适合人群：从事工业自动化控制、PLC编程的技术人员，尤其是对小型PLC系统感兴趣的工程师。 使用场景及目标：适用于糖果制造企业，旨在提升包装生产线的自动化程度，确保高效稳定的生产过程，同时降低维护成本并提高产品一致性。 其他说明：文中不仅提供了详细的理论讲解和技术指导，还结合实际案例进行了经验分享，有助于读者更好地理解和掌握相关知识。

  • PLC与WinCC实现三部十层电梯协同控制及优化技巧

    内容概要：本文详细介绍了参与西门子杯比赛中关于三部十层电梯系统的博图V15.1程序设计及其WinCC画面展示的内容。文中不仅展示了电梯系统的基本架构，如抢单逻辑、方向决策、状态机管理等核心算法（采用SCL语言编写），还分享了许多实际调试过程中遇到的问题及解决方案，例如未初始化变量导致的异常行为、状态机遗漏空闲状态、WinCC画面动态显示的挑战以及通信配置中的ASCII码解析错误等问题。此外，作者还特别提到一些创意性的设计，如电梯同时到达同一层时楼层显示器变为闪烁爱心的效果，以及节能模式下电梯自动停靠中间楼层的功能。 适合人群：对PLC编程、工业自动化控制、电梯调度算法感兴趣的工程技术人员，尤其是准备参加类似竞赛的学生和技术爱好者。 使用场景及目标：适用于希望深入了解PLC编程实践、掌握电梯群控系统的设计思路和技术要点的人士。通过学习本文可以更好地理解如何利用PLC进行复杂的机电一体化项目的开发，提高解决实际问题的能力。 其他说明：文章风格幽默诙谐，将严肃的技术话题融入轻松的生活化比喻之中，使得原本枯燥的专业知识变得生动有趣。同时，文中提供的经验教训对于从事相关领域的工作者来说非常宝贵，能够帮助他们少走弯路并激发更多创新思维。

  • 慧荣量产工具合集.zip

    慧荣量产工具合集.zip

  • 永磁同步电机FOC控制与SVPWM算法仿真模型解析

    内容概要：本文详细介绍了永磁同步电机（PMSM）的FOC（磁场定向控制）和SVPWM（空间矢量脉宽调制）算法的仿真模型。首先解释了FOC的基本原理及其核心的坐标变换（Clark变换和Park变换），并给出了相应的Python代码实现。接下来探讨了SVPWM算法的工作机制，包括扇区判断和占空比计算的方法。此外，文章还讨论了电机的PI双闭环控制结构，即速度环和电流环的设计与实现。文中不仅提供了详细的理论背景，还分享了一些实用的编程技巧和注意事项，帮助读者更好地理解和应用这些算法。 适合人群：电气工程专业学生、从事电机控制系统开发的技术人员以及对永磁同步电机控制感兴趣的科研人员。 使用场景及目标：① 学习和掌握永磁同步电机的FOC控制和SVPWM算法的具体实现；② 提供丰富的代码示例和实践经验，便于快速搭建和调试仿真模型；③ 探讨不同参数设置对电机性能的影响，提高系统的稳定性和效率。 其他说明：文章强调了在实际应用中需要注意的一些细节问题，如坐标变换中的系数选择、SVPWM算法中的扇区判断优化以及PI控制器的参数调整等。同时，鼓励读者通过动手实验来加深对各个模块的理解。

  • spring-ai-qianfan-1.0.0-M5.jar中文文档.zip

    # 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；

  • Android安全之旅系列博客导读.pdf

    Android逆向过程学习

  • 【图像处理】基于双目视觉的物体体积测量算法研究附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 3dmax插件按面积分离.ms

    3dmax插件

  • spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar中文文档.zip

    # 【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar中文文档.zip】 中包含： 中文文档：【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7-javadoc-API文档-中文(简体)版.zip】 jar包下载地址：【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar下载地址(官方地址+国内镜像地址).txt】 Maven依赖：【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar Maven依赖信息(可用于项目pom.xml).txt】 Gradle依赖：【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar Gradle依赖信息(可用于项目build.gradle).txt】 源代码下载地址：【spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7-sources.jar下载地址(官方地址+国内镜像地址).txt】 # 本文件关键字： spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar中文文档.zip,java,spring-ai-autoconfigure-vector-store-qdrant-1.0.0-M7.jar,org.springframework.ai,spring-ai-autoconfigure-vector-store-qdrant,1.0.0-M7,org.springframework.ai.vectorstore.qdr

  • 【ARIMA-WOA-LSTM】差分自回归移动平均方法-鲸鱼优化算法-LSTM预测研究附python代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

Global site tag (gtag.js) - Google Analytics