为什么要用 Bootstrap

浅析bootstrap原理及优缺点 网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统 立即下载
[Bootstrap]( http://twitter.github.com/bootstrap/) 是由两个 twitter 员工开发并开源的前端框架,目前已经到了 2.0.4 的版本,在 [Github]( https://github.com/twitter/bootstrap/) 上面有 32517个 watch,和 6608个 fork。非常火爆,而如此火爆自然有它的道理,在我们团队的所有项目中正全面推行使用 Bootstrap,我想根据自己的实际使用体验来说明一下为什么要用 Bootsrap。
  
  ## twitter 出品
  首先,Bootstrap 出自 twitter,大厂出品,并且开源,自然久经考验,减少了测试的工作量。站在巨人的肩膀上,不重复造轮子。
  
  同时,Bootstrap 的代码有着非常良好的代码规范,从中也可以学习到很多,在 Bootstrap 的基础之上创建项目,日后代码的维护也变得异常简单清晰。
  
  ## 基于 Less、丰富的 Mixin
  如果你不知道 [Sass]( http://sass-lang.com/) 或者 [Less]( http://lesscss.org/) 这样的 CSS 预处理技术,我只能说你实在太落伍了,建议你先去了解之。
  
  Bootstrap 的一大优势就是它是基于 Less 打造的,并且也有 [Sass版本]( https://github.com/thomas-mcdonald/bootstrap-sass) 。正因为如此,它一推出就包含了一个非常实用的 Mixin 库任你调用。
  
  举个很简单的例子,当你平时要用到一些 css3 属性的时候,你要写不同的浏览器写不同的 -prefix-,比如圆角 border-radius :
  
   -webkit-border-radius: 10px;
   -moz-border-radius:10px;
   -border-radius:10px;
  
  但是通过 Bootstrap 给你预设好的 mixin,你直接写成这样就可以了:
  
   @include border-radius (10px);
  
  是不是轻松愉快?基本常用的 CSS3 mixin 都帮你整理好了,你都直接调用就可以了,在此不一一举例。 Bootstrap 是目前最好的基于 Less(Sass) 的前端框架,丰富而实用的 Mixin 应该是其最好的地方。
  
  ## 可以 Responsive 的栅格系统
  Bootstrap 的 [栅格 (Grid)]( http://twitter.github.com/bootstrap/scaffolding.html#gridSystem) 系统也很先进,整个 Grid 系统是可以 Responsive 的!如果你还不知道 [Responsive Design]( http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/),那么你太落伍了,建议你了解之。
  
  Bootstrap 已经帮你搭好了实现 Responsive Design 的基础框架,并且非常容易修改。如果你是一个新手,Bootstrap 可以帮助你在非常短的时间内上手 Responsive Design。
  
  ## 丰富的组件
  Bootstrap 的[HTML组件]( http://twitter.github.com/bootstrap/components.html) 和 [Js组件]( http://twitter.github.com/bootstrap/javascript.html) 非常丰富,并且代码简洁,非常易于修改,你完全可以在其基础之上修改成自己想要的任何样子。这是工作效率的极大提升。
  
  
  ## 插件
  另外、由于 Bootstrap 的火爆,又出现了不少围绕 Bootstrap 而开发的插件。其中最实用的莫过于 [Font Awesome]( http://fortawesome.github.com/Font-Awesome/) 了。它是一套 icon font,提供了丰富的 icon 给你选择,新的 2.0 版又根据网友的意见增加了70个新的 icon。
  
  在现在一股有 Apple 带领的 Retina 潮流下,对图片的视网膜屏下的解决方案已经变得越来越有必要了,而在 icon 这个东西上,icon font 是完美的解决方案,不用担心分辨率的问题,因为它实际上是字体。
  
  ## 以上
  这些就是为什么要用 Bootstrap 的原因,目前市面上没有任何其他框架可以和它相媲美,但是它就虽然是一匹好马,你还是需要花费一些时间去学习它、适应它,它在日后给你带来的便利性是无可比拟的,你会后悔自己为什么没有早点接触它。
  
  
  ### 一些题外话
  #### 我不喜欢用框架,我喜欢原生的写法
  这是我在给别人推荐 Bootstrap 的时候最常听到的话,我只能说,Bootstrap 并不能帮你完成所有事情,它只是一个的框架,在这个框架上面你依旧可以任意的发挥,并且发挥得更好,但是前提是你要驾驭得了它。
  
  如果你不够熟悉它,你确实是有时候会被它有所牵绊,但是你熟悉了之后发现了其实它没有对你进行任何限制,这需要一个过程。
  
  #### 是给无设计师的团队或者程序员用的
  对此我真的是无力吐槽,Bootstrap 的开发者就在他的博客上抱怨过,为什么出来那么一堆完全照搬 Bootstrap 样式的网站。
  
  记住、完全用 Bootstrap 的样式只会让人心生厌烦。
两个独立的正态分布的和仍然为正态分布的证明 正态分布的和 阅读详情

相关推荐

ThinkBook 16 2024 Ubuntu驱动全攻略:从无线网卡到触控板

本文详细介绍了ThinkBook 16 2024在Ubuntu系统下的驱动问题解决方案,涵盖无线网卡、蓝牙、显卡和触控板等关键硬件的驱动修复步骤。通过具体命令和配置指南,帮助用户快速解决兼容性问题,提升Ubuntu在ThinkBook上的使用体验。

weixin_29200741的博客 826

Twitter Bootstrap深受开发者喜爱的11大理由(转)

Bootstrap,作为创新技术框架,使开发者、设计者更容易、更快捷、更出色地完成网站及应用的搭建工作。如果你还没有使用Twitter Bootstrap,建议你去了解一下。Bootstrap为开发者提供了众多工具。   Bootstrap之所以广泛流行,其深受欢迎的原因是什么呢?   1.节省时间   利用Bootstrap,你将有更多的时间用来挣钱。Bootstrap库中包含很多现...

Thunderfox 293

支付漏洞防护绕过的一种方式

放完包后就到了提交订单的地方,可以发现,金额确实小了很多,合理的搭配的话还可以更低,再次前进可以发现,金额确实是这么多,后面就不支付了,到此就结束了。也就是说数量可以为负数,但是金额不能为0或者0以下,有什么方法可以绕过这个限制吗,其实并不难,既然可以为负数,只是对金额不能为0或者负数做了限制。我们可以尝试拼接法,利用负数加上正数让他的值变得很低,但是又大于0就可以了,这里利用购物车的结算方法,随机加一些在购物车里。这里为了方便查看数据包,我这边商品的数量选择3,点击立即购买并抓包。

2301_80115097的博客 1527

为什么选择Bootstrap

  Bootstrap无疑是当下最流行的前端开发框架,它将常见的CSS布局小组件和JavaScript插件进行封装,让开发人员轻松使用,大大简化了网站的开发过程,从而深受广大开发者的喜欢。 笔者认为,这么多人热衷于Bootstrap,可能基于以下理由: 1、出自名门 Bootstrap 出自 Twitter。Twitter是互联网领域的技术领跑着,引领技术潮流。Bootstrap由经验丰富...

歪脖先生的博客 1338

UE5.3像素流送Docker化部署:从Linux服务器搭建到云端实时渲染

本文详细介绍了在Linux服务器上使用Docker容器化部署UE5.3像素流送服务的完整流程。通过将虚幻引擎运行时、信令服务器和TURN服务打包为标准化镜像,利用Docker Compose进行编排,实现了云端实时渲染应用的快速部署、环境一致与弹性扩展,有效解决了传统部署中的环境依赖与运维难题。

k0l1m2n3o的博客 199

科研指南:IEEE期刊LaTeX/Word模板下载与使用全解析

本文详细解析了IEEE期刊LaTeX/Word模板的下载与使用技巧,帮助科研人员高效完成论文排版。从官方模板获取入口到LaTeX文档结构配置,再到Word样式管理与常见问题解决方案,全面覆盖投稿准备的关键步骤。特别针对数学公式、参考文献和图片处理等难点提供实用建议,助力学术写作规范化。

weixin_28396629的博客 565

Bootstrap简介

在现代Web开发中,构建美观、响应式的网页是一个重要的任务。Bootstrap作为一个流行的前端框架,提供了丰富的CSS组件和JavaScript插件,可以帮助开发者快速搭建具有良好用户体验的网页。本文将探讨Bootstrap的基础知识、使用方式以及实际案例,以帮助读者更好地理解和运用Bootstrap。Bootstrap提供了一些默认的主题样式,但开发者也可以根据自己的需求进行定制。通过修改Bootstrap提供的变量和样式,开发者可以改变网页的颜色、字体、边框等样式。

m0_72410588的博客 1610

【Seurat绘图进阶】从参数调优到美学定制:解锁DimPlot与FeaturePlot的隐藏技巧

本文深入探讨了Seurat包中DimPlot与FeaturePlot的进阶使用技巧,旨在解决单细胞数据可视化中的常见痛点。通过参数调优(如order、shuffle、raster)、颜色美学定制(使用RColorBrewer、viridis配色)以及性能优化(栅格化处理),并结合scCustomize包与patchwork排版,帮助用户将基础图表提升为信息清晰、可直接用于论文发表的出版级可视化结果。

lake5的博客 628

bootstrap (JS前端框架)

bootstrap框架,JavaScript

xuemen11的博客 1606

GD32F4xx MCU ADC+DMA 多通道采样

1、GD32F4xx ADC GD32F4xx 的12位ADC是一种采用逐次逼近方式的模拟数字转换器。 1.1 主要特征 可配置12位、10位、8位、6位分辨率; ADC采样率:12位分辨率为2.6MSPs,10位分辨率为3.0 MSPs。分辨率越低,转换越快; PS: MSPs (模拟混合信号转换速率),是指完成1次从模拟转换到数字的AD转换所需的时间的倒数。常用单位是ksps和Msps,表示每秒采样(千)/(百万)次(kilo / Million Samples per Second)。 1msps

madao1234的博客 8117

【重识云原生】第四章云网络4.9.5.1节下一代智能网卡——DPU综述

随着数据中心的高速发展,通信能力和计算能力成为数据中心基础设施的相辅相成的两个重要发展方向。若数据中心仅关注计算能力的提升,通信基础设施的提升跟不上,那么数据中心的整体系统性能依然受限,无法发挥出真正的潜力。DPU的提出背景就是应对这些数据量和复杂性的指数级增长。未来,需要将计算移至接近数据的位置,这是目前业界所公认的以数据为中心的体系结构下的创新。综上,DPU对数据中心来说,是通过更明细的分工来实现效率的提升、实现总体系统的成本最优化。...

junbaozi的专栏 1724

选择Bootstrap的理由

选择Bootstrap的理由Bootstrap无疑是当下最流行的前端开发框架,可大大简化网站开发过程,从而深受广大开发者的喜欢,理由如下:1、系出名门Bootstrap 出自 twitter,并且开源,自然久经考验,减少了测试的工作量。站在巨人的肩膀上,不重复造轮子。同时,Bootstrap 的代码有着非常良好的规范,从中也可以学习到很多,在 Bootstrap 的基础之上创建项目,日后代码的维护...

歪脖先生的博客 2957

基于YOLOv8的铁路轨道异物检测系统设计与实现

目标检测是计算机视觉领域的核心任务之一,旨在识别图像中特定目标的位置和类别。传统方法主要依赖手工特征(如HOG、SIFT等)和分类器(如SVM),而深度学习方法通过卷积神经网络自动学习特征表示,显著提升了检测性能。YOLO(You Only Look Once)系列算法作为单阶段目标检测的代表,以其高效的检测速度著称。YOLOv8是Ultralytics公司于2023年发布的最新版本,在精度和速度上都有进一步提升。

YOLO 574

为什么要用Bootstrap

Bootstrap 是由两个 twitter 员工开发并开源的前端框架,目前已经到了 2.0.4 的版本,在 Github 上面有 32517个 watch,和 6608个 fork。非常火爆,而如此火爆自然有它的道理,在我们团队的所有项目中正全面推行使用 Bootstrap,我想根据自己的实际使用体验来说明一下为什么要用 Bootsrap。 twitter 出品 首先,Boo

u010784570的专栏 1520

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

为什么bootstrap要用html5,为什么选择 Bootstrap

Bootstrap所涉及的应用范围到底有多广?Bootstrap是否真的很实用?关于这两方面的问题,网络上曾展开过激烈的争论。Bootstrap对于设计能力不强,也没有太多的时间去设计前端界面的用户来说,价值是巨大的。Bootstrap的目的是帮助开发人员快速开发原型,避免用户经常从零开始绘制白底黑边的裸图。Bootstrap包括几十个组件.每个组件都自然地结合了设计与开发,具有完整的实例文档.定...

weixin_26774169的博客 687

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

为什么 Bootstrap 一定要用 .container

Bootstrap的.container是响应式布局的基础组件,它通过固定宽度和居中对齐在不同屏幕尺寸下自动调整最大宽度,确保内容呈现最佳阅读体验。.container随断点变化宽度(如xs屏100%,xxl屏1320px),为栅格系统提供布局上下文。与.container-fluid(始终100%宽度)相比,.container更适合主要内容区。此外,Bootstrap还提供.container-{breakpoint}变体(如.container-md),仅在特定断点后才限制宽度。大多数情况下,默认的.

全栈猿 388

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

用bootstrap还是php,为什么要使用bootstrap

Bootstrap是由两 twitter员工开发并开源的前端框架,非常火爆,而如此火爆自然有它的道理,在我们团队的所有项目中正全面推行使用 Bootstrap,我想根据自己的实际使用体验来说明一下为什么要用Bootsrap。首先,Bootstrap出自twitter,大厂出品,并且开源,自然久经考验,减少了测试的工作量。站在巨人的肩膀上,不重复造轮子。(推荐学习:Bootstrap视频教程)Boo...

weixin_42404710的博客 447

Flask-Bootstrap项目中使用Bootstrap 2的完整指南

Flask-Bootstrap是一个将Bootstrap框架集成到Flask应用中的扩展工具。虽然目前Bootstrap已经发展到版本5,但仍有部分项目需要维护基于Bootstrap 2的旧系统。本文将详细介绍如何在Flask-Bootstrap项目中使用Bootstrap 2版本。 ## 版本选择与安装 ### 版本背景 Bootstrap 3与Bootstrap 2存在不兼容的API变更...

gitblog_00576的博客 535

Start Bootstrap模板迁移指南:从Bootstrap 4到Bootstrap 5

你还在为Bootstrap 4模板的兼容性问题烦恼吗?还在担心旧项目无法享受Bootstrap 5的新特性吗?本文将带你一步步完成从Bootstrap 4到Bootstrap 5的迁移,让你的项目焕发新活力。读完本文,你将掌握迁移的核心步骤、常见问题解决方案以及实战案例演示,轻松应对迁移过程中的各种挑战。 ## 一、迁移前准备 在开始迁移之前,我们需要做好充分的准备工作,以确保迁移过程顺利进行

gitblog_01006的博客 850

【Bootstrap】Bootstrap介绍致初学者

Bootstrap 是 Twitter 公司开发的一个基于 HTML、CSS、JavaScript 的技术框架,符合 HTML、CSS 规范,且代码简介、视觉优美。Bootstrap 集合 HTML、CSS 和 JavaScript,使用了最新的浏览器技术,为实现快速开发提供了一套前端工具包。使用 Bootstrap 不仅可以构建出非常优雅的 HTML 页面,而且占用资源非常少,使用 gzip 压缩后大小仅用 10KB。并且 Bootstrap 在跨浏览器兼容方面表示也很好。

实力派,无需多言! 1370

从Bootstrap 3到Bootstrap 5:bootstrap-datepicker迁移实战指南

在Web开发中,Bootstrap框架的升级常常伴随着插件兼容性挑战。作为最受欢迎的日期选择插件之一,bootstrap-datepicker在从Bootstrap 3到Bootstrap 5的迁移过程中,需要开发者注意样式适配、API变更和性能优化等关键问题。本文将系统梳理迁移步骤,帮助开发者平稳过渡到最新技术栈,避免常见的兼容性陷阱。 ## 迁移准备与环境检查 开始迁移前,需确认项目当前使...

gitblog_00196的博客 471

bootstrap-growl vs 其他通知插件:为什么它是Bootstrap项目的最佳选择

在现代Web开发中,用户体验的提升离不开高效的通知系统。bootstrap-growl作为一款轻量级jQuery插件,能够将标准Bootstrap警告组件转换为优雅的悬浮式"Growl-like"通知,为Bootstrap项目提供了无缝集成的用户反馈解决方案。本文将深入对比bootstrap-growl与其他通知插件的核心优势,帮助开发者理解为何它是Bootstrap生态中通知功能的理想选择。

gitblog_00875的博客 295

BootStrap

浅学BootStrap

qq_55653761的博客 2086
上一篇: Linux启动报错UNEXPECTED INCONSISTENCY解决方法
下一篇: Android获取当前桌面壁纸
kerwin612
博客等级 码龄14年 28粉丝 0原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值