有人有bootstra4里的栅格系统嘛？只要栅格部分，或者推荐几个轻量的栅格框架

来源：蜘蛛抓取(WebSpider) 时间：2022-06-07 18:57 标签： 为什么要设两组格栅

绝对是目前最流行用得最广泛的一款框架。是一套优美，直观并且给力的web设计工具包，可以用来开发跨浏览器兼容 并且美观大气的页面。提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的插件。

2010年6月，为了提高内部的协调性和工作效率，Twitter公司的几个前端开发人员自发成立了一个兴趣小组，Bootstrap的构想 产生了。他们希望通过这个工具包提供一种精致的、经典的、得到充分认可的，且使用HTML、和t构建的组件，为用户建立和创建灵活的设计和丰富的插件库。2011年8月，Twitter将其开源，至今Bootstrap已发展到包括几十个组件，并已成为最受欢迎的Web前端框架之一。Bootstrap是 最稳定，响应最好的框架之一。它被各种水平的开发者所喜爱，即使是一个只具备 HTML和一些CSS基础知识的初学者也能够轻易 地上手Bootstrap4的的更新主要提升了以下几个方面：

改进工具提示和 的自动定位

Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的和，包括排版、表单、按钮、表格、栅格、导航等等，风格与Facebook类似。

BootMetro框架的灵感来自于Metro UI CSS，基于Bootstrap 框架构建，用于创建Windows 8 的Metro风格的网站。包括所有Bootstrap的功能，并添加了几个额外的功能，比如页面平铺，应用程序栏等等。

最后，如果你的新项目需要一款实在的，不需要复杂的额外功能组件的，足够简单的框架，那么 Kube 将会是你正确的选择。

Kube是一款最小化的，支持响应式的前端框架，它没有强加的样式设计，因此给了你充分的自由来开发自己的样式表。它提供了 一些web元素的基本样式，比如网格，表单，排版，表格，按钮，导航，链接以及图片等等。

Kube框架包括一个简洁的CSS文件用于方便地创建响应式布局，还包括了两个JS文件来完成tab以及页面的按钮操作。如果你希 望得到Kube最大化的灵活性以及个性化定制，那么你可以下载开发者版本（developer version），这个版本包括了LESS文件（包括各种变量，mixins以及模块）。

HTML Kickstart 是一款可以用来方便创建任何布局的集合，和的工具包。它提供了干净，符合标准以及跨浏 览器兼容的代码。这款框架提供了多种样式表，包括网格，排版，表单，按钮，表格，列表以及一些跨浏览器兼容的web组件比 如JavaScript的幻灯片功能，tabs，面包屑导航，包含子菜单的菜单以及工具提示等等。你可以使用99Lime UIKIT提供的UI组件 来搭建你的产品线框图。

Foundation 是一款强大的，功能丰富的并且支持响应式布局的前端开发框架，你可以通过Foundation快速创建原型，利用它 所包含的大量布局框架，元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承 移动优先的策略，它拥有大量实用的语义化功能，并且使用Zepto类库来取代jQuery，这样可以带来更好的用户体验，并且提高

Foundation拥有一套12列的灵活可嵌套的网格系统，你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义 了很多的样式，比如字体排版，按钮，表单，以及多种多样的导航控件。它也提供了很多的CSS组件，例如操作面板（panels） 价格表（price tables），进度条（progress bars），表格（tables）以及可以适应不同设备的可伸缩视频（flex video） 。与此同时，Foundation还包括了很多的JavaScript插件，如下拉菜单（dropdowns），joyride（网站功能引导插件）， magellan（网站固定导航插件），orbit（支持触摸的响应式图片轮播插件），reveal（弹出框插件），sections（强大的tab插

件）以及tooltips（工具提示）等。Foundation框架还提供了很多有用的扩展。

们来方便快捷的绘制线框图和原型图。

B、模板 —— 模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码，然后丢到页面的标签之

C、图标字体（） —— 包含自定义图标的一种网页字体。

D、SVG 社交网络图标（Social Icons）—— 一组不依赖分辨率的社交网络图标（可缩放矢量图标）。

E、响应式表格——Foundation框架中响应式表格的实现机制是固定表格的左边第一列，然后表格的其他列可以通过滚动条拖拉

F、关闭帆布布局（Off-Canvas Layouts）—— 这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏，当浏览

屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候，网页内容或者导航控件将会滑动出现。

GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的，以及 J工具包，可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和。

GroundworkCSS拥有一个灵活，可嵌套的流式网格系统，方便你创建任何布局。这个框架有很多让人印象深刻的功能，比如在 平板以及移动端上的网格系统，当屏幕的宽度小于768或者480像素时，页面中原本并列排版的表格列（grid column）会自动变为独立的行，而不是折叠在一起。另一个很酷的功能是jQuery的响应式文本（ResponsiveText）插件，这个插件可以动态调整页 面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。包含了大量的UI组件，如tabs、响应式数据表格导航、按钮、表单、响应式导航控件、tiles（一套替代radio 按钮以及其他默认表单元素的优雅组件）、工具提示、对话框、Cycle2（一款强大的，响应式的内容滑块）以及其他很多的有用 组件。它还提供了很多矢量社交网络图标以及图标字体。

注意：显示该效果的前提是浏览器宽度>1200px,
这和我们使用的类 col-lg-x 有关，下面进行解释。

// 调用混合，固定容器和流体容器的公共样式，定义在mixin的grid.less中 
// 固定容器和流体容器的公共样式

clearfix()的作用：清除浮动样式。

流体容器&固定容器公共样式

// 调用混合，固定容器和流体容器的公共样式，定义在mixin的grid.less中 //固定容器的媒体样式，顺序不可变

即对应固定容器的媒体值

通过固定容器的媒体样式来设置不同屏幕下的栅格情况。
先查看是不是小屏(如果是设置为sm)
再查看是不是中屏(如果是设置为md)
最后查看是不是大屏(如果是设置为lg)

//设置行的外边距为负数 // less作用域是块级作用域，所以传入的@{index}仍为1
    点击组件,选择自己想要的效果复制相应的代码即可
构建、设计精美的、有创意的网站。 构建、设计精美的、有创意的网站。 构建、设计精美的、有创意的网站。 构建、设计精美的、有创意的网站。

需求：响应式布局换行的时候想要从前面掉下去

即想要实现的效果是这样的：

分析：第一个掉下去的应该位于队尾（即html结构的最后一个），
所以想要Bootstrap第一个掉下去可以，要把Bootstrap放在html结构的尾部，那门又如何实现Bootstrap显示在第一个呢，就要通过pull和push实现了:
注意: 列排序不能跳着写，即如果定义了lg和sm的push或pull那么一定要定义md的pull或push，否则会出问题

构建、设计精美的、有创意的网站。 构建、设计精美的、有创意的网站。 构建、设计精美的、有创意的网站。 构建、设计精美的、有创意的网站。 // less作用域是块级作用域，所以传入的@{index}仍为1

因为继承的时候不继承混合函数，但是可以继承类。
加上括号之后就是混合函数了。
而原代码中加括号也能继承是因为在原代码中有一个同名类调用了该混合函数，继承的时候继承的是该类：

  • 为了维护槽宽的规则,列两边必须得要15px的padding
    没有槽宽，列中的字就会紧挨着边框会很丑：

  • 为了能使列嵌套行，行两边必须要有-15px的margin

  • 为了让容器可以包裹住行，容器两边必须要有15px的padding
    由于行设置的margin为负数，所以如果不设置容器的padding，里面的行就会跑出来：

通过响应式设计，我们将无需额外设计一个手机版的网页， 因为它在任何尺寸的屏幕上看起来都很棒。

任何 Web 应用，都可以通过添加如下代码到 HTML 顶部来引入 Bootstrap 。

**i 元素原本是用来表示斜体文字内容的；不过现在，用它来表示图标也很常见。 只需要为 i 元素添加相应的 class 就可以让它展示图标，**比如：

同时，我们也可以使用 span 元素来展示图标。

well 使界面更具层次感

我要回帖

更多关于 为什么要设两组格栅 的文章

 

随机推荐