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

11顶
0踩

Web前端

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

2013-08-05 15:27 by 副主编 wangguo 评论(19) 有49694人浏览
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）的缓存支持。该服务是免费的，不需任何注册，可用于商业性或非...

  • 基于YOLOv5工地上安全帽佩戴的检测源码+训练好模型+数据集.zip

    YOLO高分设计资源源码，详情请查看资源内容中使用说明 YOLO高分设计资源源码，详情请查看资源内容中使用说明 YOLO高分设计资源源码，详情请查看资源内容中使用说明 YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明

  • 2011管理类联考199综合能力全国硕士研究生招生考试解析.pdf

    考研管理类联考综合能力答案解析，考研真题，考研历年真题，考研管理类联考历年真题，真题解析。

  • NIUCLOUD-ADMIN 是一款快速开发SaaS通用管理系统后台框架.zip

    springboot框架 一、Spring Boot基础应用 Spring Boot特征 概念： 约定优于配置，简单来说就是你所期待的配置与约定的配置一致，那么就可以不做任何配置，约定不符合期待时才需要对约定进行替换配置。 特征： 1. SpringBoot Starter：他将常用的依赖分组进行了整合，将其合并到一个依赖中，这样就可以一次性添加到项目的Maven或Gradle构建中。 2,使编码变得简单，SpringBoot采用 JavaConfig的方式对Spring进行配置，并且提供了大量的注解，极大的提高了工作效率，比如@Configuration和@bean注解结合，基于@Configuration完成类扫描，基于@bean注解把返回值注入IOC容器。 3.自动配置：SpringBoot的自动配置特性利用了Spring对条件化配置的支持，合理地推测应用所需的bean并自动化配置他们。 4.使部署变得简单，SpringBoot内置了三种Servlet容器，Tomcat，Jetty,undertow.我们只需要一个Java的运行环境就可以跑SpringBoot的项目了

  • 2024-2030全球及中国冷冻有机毛豆行业研究及十五五规划分析报告.docx

    2024-2030全球及中国冷冻有机毛豆行业研究及十五五规划分析报告

  • SpringBoo车险理赔源码.rar

    SpringBoo车险理赔源码.rarSpringBoo车险理赔源码.rarSpringBoo车险理赔源码.rar

  • Python实现基于机器学习的银行客户认购产品预测项目源码+数据集+模型文件.zip

    详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；

  • Web网页设计期末大作业壁纸之家网站源码.zip

    详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；详情请查看资源内容中使用说明；

  • yolov8房屋墙面路面裂缝-发霉-油漆脱落-渗水-墙皮脱落检测+数据集

    1、yolov8房屋墙面路面裂缝-发霉-油漆脱落-渗水-墙皮脱落检测，包含训练好的检测权重，以及PR曲线，loss曲线等等，和数据集 2、pyqt界面可以检测图片、视频、调用摄像头 3、数据集和检测结果参考：https://blog.csdn.net/zhiqingAI/article/details/124230743 4、采用pytrch框架，python代码 https://blog.csdn.net/zhiqingAI/article/details/137371158

  • 射频通信原理-第1章.ppt

    射频通信原理-第1章.ppt

  • 081springboot-vue垃圾分类网站.zip（可运行源码+数据库文件+文档）

    本L文主要论述了如何使用JAVA语言开发一个垃圾分类网站 ，本系统将严格按照软件开发流程进行各个阶段的工作，采用B/S架构，面向对象编程思想进行项目开发。在引言中，作者将论述垃圾分类网站的当前背景以及系统开发的目的，后续章节将严格按照软件开发流程，对系统进行各个阶段分析设计。 垃圾分类网站的主要使用者分为管理员和用户、垃圾分类管理员，实现功能包括管理员：首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理，垃圾分类管理员；首页、个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理，用户前台；首页、垃圾分类、垃圾图谱、个人中心、后台管理等功能。由于本网站的功能模块设计比较全面，所以使得整个垃圾分类网站信息管理的过程得以实现。 本系统的使用可以实现本垃圾分类网站管理的信息化，可以方便管理员进行更加方便快捷的管理，可以提高管理人员的工作效率。 关键词：垃圾分类网站 JAVA语言；MYSQL数据库；Spring Boot框架

  • 基于微信小程序开发的多肉植物图鉴毕业设计源码.zip

    高分设计源码，详情请查看资源内容中使用说明 高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明

  • 312749069629470selfieU重绘.apk

    312749069629470selfieU重绘.apk

  • 芒果实例分割数据集yolov8格式，可用于yolov8的训练，包含453条训练数据，91条验证数据

    芒果实例分割数据集在多个场景中都有重要的应用，以下是几个主要的使用场景： 精准农业与果园管理：在精准农业中，对果园中的芒果进行实例分割可以帮助农民更准确地了解每个芒果的生长情况，包括大小、形状、颜色等。这有助于农民进行针对性的管理，如施肥、灌溉和修剪，从而提高果园的产量和质量。 自动化采摘：芒果实例分割数据集可以用于训练自动化采摘机器人。通过识别图像中的芒果实例，机器人可以精确地定位并采摘芒果，从而提高采摘效率和减少人工成本。 质量评估与分类：在芒果的分级和质量控制中，实例分割技术可以帮助对芒果进行自动分类。通过分析芒果的形状、大小和颜色等特征，可以评估芒果的成熟度、新鲜度和品质等级，从而为消费者提供更高质量的芒果产品。 病虫害检测：芒果实例分割数据集也可用于病虫害的检测和诊断。通过对芒果图像的分割和分析，可以检测病虫害的发生，及时发现并采取相应的防治措施，减少损失并保障芒果的健康生长。 智能监控与安全追溯：在芒果的储存和运输过程中，使用实例分割技术可以实现对芒果的实时监控和追溯。通过识别图像中的芒果实例，可以监测芒果的状态和变化，及时发现异常情况并采取相应措施，确保芒果的安

Global site tag (gtag.js) - Google Analytics