服务电话

025-58828922

13376094345

13376094345 / 025-58828922

461544981@qq.com

contact
江苏省南京市秦淮区建邺路98号鸿信大厦16楼
联系我们

从前端Bootstrap框架的角度看待按钮

设计师的想法实现依赖于代码,这也是为什么先有前端,而后有UI。很多时候,为了提高效率,开发在写前端页面时会采用现成的框架。作为设计师在了解一定的代码基础后
网页编辑器也美化,FiraCode 代码专用等宽字体 关于2020UI设计趋势-细节分析
case 作品案例
TAG: 从前端Bootstrap框架的角度看待按钮

设计师的想法实现依赖于代码,这也是为什么先有前端,而后有UI。很多时候,为了提高效率,开发在写前端页面时会采用现成的框架。作为设计师在了解一定的代码基础后,设计稿会更加有依据,和开发交流也变得容易。下面我们就从Bootstrap框架的角度去理解按钮在代码中的相关知识,这里每一个点都已被验证可实现,可以作为细节纳入设计思考中。


1.基本案例 Base Example



2.边框按钮 Outline Buttons

3.浅色背景按钮  Light Buttons



4.带图标按钮 Buttons with Icons

在按钮中加入图标会让单调的按钮更加生动,整个页面页会变得活泼



5.链接按钮 Link Buttons


6.社交按钮 Social Buttons

  

这些按钮简化了将网站内容连接到用户的社交媒体的过程。为了易于识别,通常会用各自的品牌标识。


7.状态 States

常见的按钮状态有6种:Normal, Hover, Active, Focus, Visited ,Disabled


8.按钮字体样式 Button Font Styles

undefined

合理利用大小写的组合可以让文本更加易读,减轻用户的视觉负担。


9.按钮文本颜色 Button Text 


10.按钮样式 Button Styles


11.尺寸 Size



12.按钮阴影 Buttons with Shadow


13.悬浮按钮可选颜色 Hover Button Option


14.透明按钮 Transparent Buttons


除了按钮,还有很多其他组件的代码相关知识可以去了解,例如弹窗,面包屑,导航,下拉,输入框等。在对这些组件有了一定了解后,在特定的业务场景下,设计师便知道哪些需要出图,哪些可以用框架自带的组件,以及如何用现有组件与对提高效率有很大帮助。

附:更多原生Bootstrap的相关信息请访问官方文档https://getbootstrap.com/docs/4.3/components/


原文链接: https://mp.weixin.qq.com/s/ZVRSr10g5f17BFS10CCYDQ


手机可扫描二维码咨询更多