`
ITsource源代码
  • 浏览: 43358 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Bootstrap开发漂亮的前端界面之实现原理

阅读更多

引:Bootstrap采用的是一个“响应式”设计。响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手机的屏幕 尺寸远小于计算机显示器,但是你却没有感觉到任何差别,两者的用户体验几乎一样,这说明这个网站在响应式设计方面做得很好(响应式:简单可以理解为不同的 设备屏幕的大小是不同的,但是页面中的内容是固定的,为了让用户在不同大小屏幕看到的内容更加友好,页面的内容或排版需要更随屏幕的变化而变化)。

一个简单的列子:问题分析,我们需要做一个网站,而且需要让网页中的内容居中显示(90%的网站都是如此)。

1440*900分辨率效果如下:

通过firebug工具查看到container的内容宽度为1150,内边距为15(左边、右边)*2,所占总宽度为1150+15*2=1180px。

接下来,请尝试拖动浏览器让浏览器的宽度变小,注意当浏览器的宽度小于1200px的时候你会发现container的宽度变为了970(内容宽度940+内边距为15(左边、右边)*2)

 

通过浏览器宽度修改而导致container的宽度变化的这个细节,我们可以看出bootstrap内部感知的了这个小细节,并且做出了一定的响应。那么Bootstrap到底使用了什么高端的技术来实现这个功能的。

CSS3 Media Queries(媒体(设备)查询)

Media Queries含义:为不同的媒体类型添加某些条件,检测设备并采用不同的样式表。

简单例子:

图为普通屏幕和打印分别定义样式

普通页面显示内容为

打印预览页面显示内容为 (firefox打印预览显示:文件--->打印预览)

通过以上的一个简单的例子你已经知道Media Queries(媒体查询)到底能干什么了,页面内容在不同的媒体环境运行时,会自动查询应用我们编写的特定样式。

Bootstrap中也是使用了Media Queries(媒体查询)来实现了响应式布局 ,bootstrap.css中定义如下代码:

以上代码实现了随浏览器宽度的变化container容器的宽度也进行变化。

@media部分代表任何媒体 

(min-width: 1200px)部分代表条件,min-width指媒体(浏览器)宽度不小于(大于)1200条件成立。 比如:浏览器的宽度为1250,条件成立使用该样式。浏览器的宽度为1119,条件不成立。

bootstrap.css中很多地方都使用了@media(media queries媒体查询),比如工具条、栅格(网格)系统。建议各位读者打开bootstrap.css文件,搜索“@media”,对这些样式进行分 析,这对学习bootstrap非常有帮助。

关注作者:

       

2
1
分享到:
评论

相关推荐

    bootstrap一套漂亮的网站后台管理系统模板Flatty ui

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和设计工具,使得构建响应式、移动优先的网站变得简单高效。"Flatty UI"是一个基于Bootstrap的网站后台管理系统模板,以其简洁、扁平化的...

    半透明的一套漂亮的Bootstrap模板.zip

    Bootstrap模板是一种基于HTML...总的来说,这套半透明的Bootstrap模版提供了一种快速构建专业、美观的个人网站或管理界面的方式,通过结合Bootstrap的强大功能和jQuery的易用性,开发者可以更高效地实现前端开发任务。

    漂亮的bootstrap后台管理模板

    总的来说,这个"漂亮的bootstrap后台管理模板"是一个高效且美观的开发资源,对于需要快速构建后台管理界面的开发者来说,是一个值得使用的工具。通过学习和运用Bootstrap的原理和技巧,你可以创建出更加个性化的管理...

    漂亮的 bootstrap模板

    Bootstrap是世界上最受欢迎的前端开发框架之一,由Twitter的开发者创建,用于快速构建响应式和移动优先的网站。这个“漂亮的Bootstrap模板”集合可能是你正在寻找的一系列精心设计的UI资源,可以帮助你提升项目外观...

    基于bootstrap的强大又漂亮的模板ace

    Bootstrap是由Twitter开发的一款开源前端框架,它包含了一系列预定义的CSS样式、JavaScript组件以及HTML5元素,使得网页设计和开发变得更加高效和便捷。 Ace模板以其轻量化和响应式设计脱颖而出,这表示它不仅在...

    响应式布局-BootStrap从基础到项目实战 (高级篇)

    响应式布局与Bootstrap是前端开发中极其重要的技术概念,它能够帮助开发者设计出能够适应不同屏幕尺寸和分辨率的网页,提升用户在不同设备上的浏览体验。Bootstrap作为一款广泛使用的前端框架,提供了丰富的组件、类...

    Bootstrap漂亮的垂直手风琴列表效果

    Bootstrap是一款广泛应用于网页开发的前端框架,以其响应式布局、易于使用和丰富的组件库而闻名。在本案例中,我们关注的是"Bootstrap漂亮的垂直手风琴列表效果",这是一个利用Bootstrap构建的交互式UI元素,它能...

    一个漂亮的Node.js+Socket.io聊天应用程序,使用Bootstrap和其他漂亮的库构建_CSS_Jav.zip

    这是一个基于Node.js、...通过研究这个项目,你可以了解到实时通信的基本原理,前端和后端如何协同工作,以及如何使用Bootstrap构建用户友好的界面。这对你提升Web开发技能,尤其是实时应用开发方面,会有很大帮助。

    功能强大界面漂亮的js日期控件

    "界面漂亮"则意味着控件的UI设计注重用户体验,可能采用了现代的设计趋势,如扁平化、响应式布局,以及与流行前端框架(如Bootstrap、Material Design)兼容的主题。美观的界面可以提升网站的整体质感,增加用户的...

    漂亮蓝色IT科技企业整站模板-漂亮 蓝色 渐变 科技 监控 企业 整站 bootstrap 响应式 手机 电脑 平板 维修

    Bootstrap是由Twitter开发并开源的一款前端开发框架,它提供了一套完整的HTML、CSS和JavaScript组件,旨在简化网页设计和开发过程。Bootstrap的核心特性包括响应式设计、移动优先和易于定制,使得开发者能够快速构建...

    漂亮bootstrap后台模板

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于快速构建响应式和移动优先的网站。这款“漂亮bootstrap后台模板”是专为网站后台管理界面设计的,它具有美观的界面和高效的功能,旨在提升管理员的工作效率。 ...

    大学 毕业设计 项目实训 个人备忘录系统(java SSH网站源代码)+JSP漂亮的界面控件.zip

    JSP(JavaServer Pages)是用于开发动态网页的技术,而美观的界面控件则可能指的是Bootstrap、jQuery UI或其他前端库,这些可以提升用户交互体验。 【标签】中的“毕业设计 项目实训 java ssh”再次明确了这个项目...

    (EF+MVC+Bootchart)通用后台管理系统框架源码带数据库十分强大界面漂亮可用作商城等项目.zip

    3. Bootstrap:Bootstrap是Twitter开发的一个开源的前端框架,它提供了丰富的预定义样式、组件和JavaScript插件,用于快速构建响应式和移动优先的网页。在本项目中,Bootstrap很可能被用来创建美观且适应各种设备...

    网址导航引导页面H5源码-自动检测域名延迟.zip

    8. **前端框架与库**:虽然没有具体提及,但现代H5项目可能使用了Bootstrap、Vue.js、React.js等前端框架或库,简化开发流程,提高开发效率。 9. **版本控制**:如果项目管理得当,源码可能还包含了版本控制信息,...

    C#开发的手机销售网站,课程设计不用愁。。

    4. **前端开发**:网站界面漂亮,这表明可能使用了HTML5、CSS3和JavaScript来构建用户界面,可能还结合了Bootstrap或其他前端框架来实现响应式设计,确保网站在不同设备上都能良好显示。 5. **AJAX技术**:为了提升...

    简洁漂亮的后台模板

    综上所述,"简洁漂亮的后台模板"不仅是一个美观的界面设计,更是一个高效开发的起点,它整合了前端的最佳实践,旨在为开发者提供一个快速构建后台管理系统的基础。通过深入了解和利用这个模板,开发者可以提升项目...

    漂亮多风格后台强大完整版校园网站

    这可能涵盖了前端界面设计、后端编程、数据库管理、用户体验优化等多个方面,帮助初学者或者相关人员提升技能。 【标签】:“漂亮多风格后台强大完整版校园网站”标签进一步强调了这个资源的主要特性,即网站的美观...

    漂亮公寓全站绝对漂亮企业网站系统源代码

    1. **前端框架与设计**:可能采用了流行的前端框架如Bootstrap或Vue.js,提供了响应式布局,确保在不同设备上都能良好显示。 2. **后端开发**:可能使用PHP或Node.js等服务器端语言,处理HTTP请求,与数据库交互,...

    js日历控件大全 动态网页开发必备 含漂亮的样式

    你可以根据项目需求选择合适的控件,或者学习其实现原理以自定义自己的日历组件。 为了充分利用这些资源,你需要了解JavaScript基础,以及HTML和CSS的使用。对于更复杂的控件,可能还需要了解一些前端框架,如...

    漂亮的虚拟键盘web显示控件

    通过媒体查询(Media Queries)和Bootstrap等前端框架,可以实现键盘布局在不同设备上的自适应调整。 总结来说,"漂亮的虚拟键盘web显示控件"是Web开发中的一个重要组件,它结合了C#、.NET框架、HTML、CSS、...

Global site tag (gtag.js) - Google Analytics