浅析bootstrap原理及优缺点

网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

bootstrap优缺点：

1.bootstap最近发布了bootstrap4，拥有了box-flex布局等更新，紧跟最新的web技术的发展

2.比较成熟，在大量的项目中充分的使用和测试

3.拥有完善的文档，使用起来更方便

4.有大量的组件样式，接受定制

缺点：

1.如果有自己特殊的需求，就需要重新定制样式，如果一个网站中有大量的非bootstrap“风格”的样式存在，那么你就需要做大量的css重写，因此也就失去了使用框架的意义。

2.会有兼容问题，虽然网上存在很多兼容IE的办法，但需要引入其他文件，有些还不小，势必导致加载速度变慢，影响用户体验。

以上所述是小编给大家介绍的浅析bootstrap原理及优缺点，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • 使用BootStrap实现标签切换原理解析

    使用BootStrap实现标签切换原理解析

    原理解析 1.定义一无序列表.取id值为myTab. 2.定义列表中a标签的目标地址为我们要展示的div对应的id 3.为a标签注册对应的事件(就是js的代码) 效果如图 代码如下 html代码部分 <ul id="myTab" class="nav nav-tabs"> <li role="presentation" class="active"><a href="#home"

  • Bootstrap3 Grid system原理及应用详解

    Bootstrap3 Grid system原理及应用详解

    刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的话,右边的盒子永远都不会掉下来. 文字就变得这么丑. 如果我用col-sm-6的话,右边的盒子又会太早掉下来. 此时的屏幕宽度是766px,他就已经堆叠排放了,两边留下了大片空白,还是很丑. 而Bootstarp没有提供中间的选项了. 想要解决这个问题,必须要弄清楚这种响应式布局的是如何工作的. B

  • BootStrap入门教程(三)之响应式原理

    BootStrap入门教程(三)之响应式原理

    相关阅读: BootStrap入门教程(一)之可视化布局 BootStrap入门教程(二)之固定的内置样式 Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 · 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). · 使用行来创建列的水平组. · 内容应该放置在列内,且唯有列可以是行的直接子元素. · 预定义的网格类,比如 .

  • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test

  • 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

    实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色部分是关键的部分 复制代码 代码如下: .cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;z-index: 1002; left: 0px

  • 浅析bootstrap原理及优缺点

    网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootstrap框架中的网格系统就是将容器平分成12份. bootstrap优缺点: 1.bootstap最近发布了bootstrap4,拥有了box-flex布局等更新,紧跟最新的web技术的发展 2.比较成熟,在大量的项目中充分的使用和测试 3.拥有完善的文档,使用起来更方便 4.有大量的组件样式,接受定制 缺点: 1.如果有

  • 浅析Ajax的 原理及优缺点

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了aja

  • AJAX工作原理及优缺点详解

    AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 一.ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 使用CSS和XHTML来表示. 使用DOM模型来交互和动态显示. 使用XMLHttpRequest来和服务器进行异步通信. 使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpReq

  • 浅析BootStrap中Modal（模态框）使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

  • Java Lombok简介、使用、工作原理、优缺点

    简介 官方介绍 Project Lombok is a java library that automatically plugs into your editor and build tools, spicing up your java. Never write another getter or equals method again, with one annotation your class has a fully featured builder, automate your lo

  • Python接口自动化浅析数据驱动原理

    Python接口自动化浅析数据驱动原理

    在上一篇Python接口自动化测试系列文章:Python接口自动化浅析登录接口测试实战,主要介绍接口概念.接口用例设计及登录接口测试实战. 以下主要介绍使用openpyxl模块操作excel及结合ddt实现数据驱动. 在此之前,我们已经实现了用unittest框架编写测试用例,实现了请求接口的封装,这样虽然已经可以完成接口的自动化测试,但是其复用性并不高. 我们看到每个方法(测试用例)的代码几乎是一模一样的,试想一下,在我们的测试场景中, 一个登录接口有可能会有十几条到几十条测试用例,如果每组数

  • 4种VPS主机技术原理及优缺点(VPS独享主机技术原理)

    4种VPS主机技术原理及优缺点(VPS独享主机技术原理)

    VPS独享主机一直是中小企业和中高端站长用户的最佳建站选择,而且,随着云计算技术的应用和发展,VPS主机价格也愈来平民化,使得更多的人们接触到VPS主机,和经常使用VPS主机.同时,VPS独享主机.虚拟专用服务器的原理和相关技术也就被人们不断的了解,也不再那么神秘. VPS独享主机作为一种虚拟化方案,有全虚拟化.半虚拟化.操作系统虚拟化三种分类.VPS主机是通过虚拟化技术实现的虚拟主机,虚拟化是一个抽象层,它将物理硬件与操作系统分开,从而提供更高的IT资源利用率和灵活性. 4种VPS主机虚拟技术

  • 深入浅析Bootstrap列表组组件

    深入浅析Bootstrap列表组组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容.列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.less SASS:_list-grou

  • 浅析Bootstrap缩略图组件与警示框组件

    浅析Bootstrap缩略图组件与警示框组件

    Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息. bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现.下面是bootstrap缩略图组件不同版本的源码文件: L

  • 浅析vue-router原理

    近期被问到一个问题,在你们项目中使用的是Vue的SPA(单页面)还是Vue的多页面设计? 这篇文章主要围绕Vue的SPA单页面设计展开. 关于如何展开Vue多页面设计请点击查看. vue-router是什么? 首先我们需要知道vue-router是什么,它是干什么的? 这里指的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器. 换句话说,vue-router就是WebApp的链接路径管理系统. vue-router是Vue.js官方的路由插件,它和vue.js是

随机推荐