登录
当前位置： 首页 > 软件库 > Web应用开发 > CSS框架 >

getbase

响应式 CSS 框架
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 Web应用开发、 CSS框架
软件类型 开源软件
地区 不详
投 递 者 夏景同
操作系统 跨平台
开源组织 无
适用人群 未知
软件官网
软件文档
官方下载
安全指数
 软件概览

getBase 是一个轻量级的响应式 CSS 框架，拥有自定义排版、自定义网格、组件化等特性，让你可以花少量时间来覆盖样式，而将更多的时间花在创建漂亮的网站应用程序上。

特性

基础扎实：建立在 Normalize.css 之上，确保设置了所有基本 CSS 样式。

多端统一：在所有现代浏览器的页面表现是完全一致的。

模块式编码：有多个独立模块，可以自由设计并组合模块。

自动化体验：包含 Parcel JS 配置，可以自动化工作流

安装

如果您是从头开始创建新项目，建议使用基础 starter。

git clone https://github.com/getbase/starter.git --depth=1 \ 
new-website &&  cd new-website && rm -rf .git && \ 
npm install && npm start

对于现有项目，只需使用 NPM 安装 getbase：

npm install --save @getbase/base

安装 getBase 后，可以选择要导入的内容并包含您自己的自定义样式。

HTML/CSS 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website / App </title>
  <!-- Base Core -->
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/core.css">
  <!-- Base Common -->
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/code.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/forms.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/tables.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/typography.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/headings.css">
  <!-- Add Your Website / App Stylesheet -->
  <!-- ... -->
  <!-- Add Additional Modules -->
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/containers.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/grid.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/horizontal-spacers.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/vertical-spacers.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/spacers.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/display-helpers.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/flex-helpers.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/position-helpers.css">
  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/typography-helpers.css">
</head>
<body>
  <p>
    Base!
  </p>
</body>
</html>

CSS 导入

/* Import Base */
@import url("https://unpkg.com/@getbase/base/core.css");

/* Import Base Common */
@import url("https://unpkg.com/@getbase/base/code.css");
@import url("https://unpkg.com/@getbase/base/forms.css");
@import url("https://unpkg.com/@getbase/base/tables.css");
@import url("https://unpkg.com/@getbase/base/typography.css");
@import url("https://unpkg.com/@getbase/base/headings.css");

/* Add Your Website / App Styles */
/* ... */

/* Add Additional Modules */
@import url("https://unpkg.com/@getbase/base/containers.css");
@import url("https://unpkg.com/@getbase/base/grid.css");
@import url("https://unpkg.com/@getbase/base/horizontal-spacers.css");
@import url("https://unpkg.com/@getbase/base/vertical-spacers.css");
@import url("https://unpkg.com/@getbase/base/spacers.css");
@import url("https://unpkg.com/@getbase/base/display-helpers.css");
@import url("https://unpkg.com/@getbase/base/flex-helpers.css");
@import url("https://unpkg.com/@getbase/base/position-helpers.css");
@import url("https://unpkg.com/@getbase/base/typography-helpers.css");

SCSS 导入

/* Import Base */
@import "~@getbase/base/scss/_mixins";
@import "~@getbase/base/scss/core";

/* Import Base Common */
@import "~@getbase/base/scss/code";
@import "~@getbase/base/scss/forms";
@import "~@getbase/base/scss/tables";
@import "~@getbase/base/scss/typography";
@import "~@getbase/base/scss/headings";

/* Add Your Website / App Styles */
@import "main";

// Add Additional Modules
@import "~@getbase/base/scss/containers";
@import "~@getbase/base/scss/grid";
@import "~@getbase/base/scss/horizontal-spacers";
@import "~@getbase/base/scss/vertical-spacers";
@import "~@getbase/base/scss/spacers";
@import "~@getbase/base/scss/typography-helpers";
@import "~@getbase/base/scss/display-helpers";
@import "~@getbase/base/scss/flex-helpers";
@import "~@getbase/base/scss/position-helpers";

LESS 导入

/* Import Base */
@import "~@getbase/base/less/_mixins";
@import "~@getbase/base/less/core";

/* Import Base Common */
@import "~@getbase/base/less/code";
@import "~@getbase/base/less/forms";
@import "~@getbase/base/less/tables";
@import "~@getbase/base/less/typography";
@import "~@getbase/base/less/headings";

/* Add Your Website / App Styles */
@import "main";

// Add Additional Modules
@import "~@getbase/base/less/containers";
@import "~@getbase/base/less/grid";
@import "~@getbase/base/less/horizontal-spacers";
@import "~@getbase/base/less/vertical-spacers";
@import "~@getbase/base/less/spacers";
@import "~@getbase/base/less/typography-helpers";
@import "~@getbase/base/less/display-helpers";
@import "~@getbase/base/less/flex-helpers";
@import "~@getbase/base/less/position-helpers";
 使用案例
  • get_base(current->ldt[1])和get_base(current->ldt[2])

    free_page_tables(get_base(current->ldt[1]),get_limit(0x0f)); free_page_tables(get_base(current->ldt[2]),get_limit(0x17)); 首先看下他调用的参数。 1、get_base(current->ldt[1])和get_base(current->ldt[2]) A.get_base()

  • 关于使用get请求传递base64的注意事项

    关于使用get请求传递base64的注意事项 我们知道，get请求和post请求是有区别的， 1、GET请求是用来请求获取数据， POST一般作为发送数据到后台时使用，并不返回数据 2、GET请求也可传参到后台，但是其参数在浏览器的地址栏的url中可见，所以隐私性安全性较差，且**参数长度也是有限制的 ** POST请求传递参数放在Request body中，不会在url中显示，比GET要安全，且

  • js通过图片url获取图片base64编码

    方法1：直接返回图片编码 参数url：图片的路径 ； 参数imgType：图片类型默认image/png； 方法返回值：图片base64编码 function getBase64ImageUrl(url, imgType) { if(!imgType){ imgType="image/png"; } var img=new Image(); img.src= url; img.c

  • 将本地图片获取到，转成base64数据

    ToBase64() { function getBase64Image(img) { var canvas = document.createElement(“canvas”); canvas.width = 200; canvas.height = 200; var ctx = canvas.getContext(“2d”); ctx.drawImage(img, 0, 0, img.widt

  • vue的url图片转base64

    1，调用 this.getBase64(item).then((base64) => { console.log("图片"); }) 2,方法 getBase64(img) { function getBase64Image(img, width, height) { //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小 let canvas

  • Magento: get skin url, get media url, get base url, get store url

    Magento Mage Core, Admin Static Blocks, or Phtml edits are usually includes getting url path such images, javascript, base url, media and store url. There are different ways to retrieve mentioned URL

  • antd vue 上传图片 - Base64格式、文件流格式

    1、为什么上传图片需要使用base64格式进行转换，再传给后端？当上传的图片很小的时候，转成base64格式较为划算。 贴代码： HTML： <a-form-item label="图片上传" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-upload :custom-request="cust

  • input file获取本地图片路径并转换为base64

    <template> <div> <input type="file" @change="chose"> </div> </template> <script> export default { methods: { chose(e) { console.log(e.target.files[0]); console.log(window.UR

  • Js进行base64编码、解码、中文乱码

    常规方法：编码 // base64转字符串 getEncode64(str){ // 对字符串进行编码 var encode = encodeURI(str); // 对编码的字符串转化base64 var base64 = btoa(encode); return base64; }, 解码： // base64转字符串 getDecode(str){ // 对base64转编码 var dec

  • JS 读取本地 excel 文件转为 base64 上传至服务器

    需求描述：一般使用 multipart/form-data 请求头上传文件，由于上传服务器在内网的限制，配合后端的同事要求，需要将文件转换为 base64 字符后上传至服务器。 首先来介绍 element-ui 的 upload 上传组件。 <el-upload ref="upload" action="placeholder" accept=".xls,.xlsx" :file-

  • Java Base64与字符串相互转换，Base64与文件、流相互转换

    1、转换类 import org.apache.commons.codec.binary.Base64; import java.io.*; import java.nio.file.Files; import java.nio.file.Paths; import java.nio.file.StandardOpenOption; public class Base64Object {

  • Base64工具类Base64Util

    需要的依赖包 <dependency> <groupId>commons-net</groupId> <artifactId>commons-net</artifactId> <version>3.3</version> </dependency> 直接上工具类代码，已使用数个项目 import org.apache.commons.net.util.Base64; im

  • js 将图片文件转换成base64

      1.情景展示 　　在JavaScript中，如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img

  • js工具函数之将网络图片url地址转换为base64格式

    1、封装工具函数，将url地址，转换为base64格式输出 function getBase64(url, callback) { //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染 var Img = new Image

  • JS获取图片base64

    function onSendImage() { var img = document.createElement('img'); img.id = "img"; img.src = pathPhoto; img.style.width = "100%"; img.style.height = "100%"; img.onload = function() { getBase64Image(img

  • base64转图片出现的问题及解决方案

    代码： String r = request.getParameter("r")+"";//前台传过来的base64字符串 String filename = ""; String filepath = ""; String path1 = request.getSession().getServletContext().getRealPath("/img/uploadPicture"); fil

  • get请求 关于前端base64加密后后台java进行解密报错原因及处理

    get请求的时候 前端进行了base64加密之后，后台接收到URL加密后的字符串会出现加密的字符串“+”号变成空格的问题，而base64中，加号"+"是base64编码的一部分，如果将+号转变为空格，就会导致解密失败。 只需要在base64加密后的字符串后面在进行一次encodeURIComponent转码，就可以避免base64加密失败的问题。 推送base64加密的uuid 在进行encod

 相关资料
  • 响应式框架

    如果你不想重复造轮子，你可以选择一款响应式的框架，目前市面上类似的框架也有很多，像Bootstrap、Foundation,你也可以使用像H5 Boilerplate来创建响应式项目,但不论你使用何种方式，掌握底层的原理对于你来说比挑选一门框架更有意义。所以大家Fighting~~~

  • CSS响应式布局

    主要内容：设置 meta 标签,媒体查询CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。 要实现响应式布局，常用的方式有以下几种： 使用 C

  • Css div响应式设计

    左一个如果固定大小，右一个应该是响应的，应该有最小和最大宽度，这意味着如果你收缩窗口宽度，右div应该只是收缩它的宽度！（在其最小宽度和最大宽度之间）并保持在左div的右边！，直到容器div的宽度小于左div宽度+右div最小宽度，然后右div应该低于左div！ http://jsfiddle.net/5m8lj/6/ 宽度当前css，绿色div应该收缩其宽度在200到500px之间，同时保持在左

  • 响应式 Web 设计 – 框架

    本章节为大家介绍响应式 Web 设计框架 Bootstrap。 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 实例<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <m

  • 响应式CSS背景图像

    问题内容： 我有一个网站（g-floors.eu），并且我想使背景（在CSS中我为内容定义一个bg图像）也具有响应性。不幸的是，除了我可以想到的一件事外，我真的对如何执行此操作一无所知，但这是一个解决方法。创建多个图像，然后使用css屏幕大小更改图像，但是我想知道是否有更实用的方法来实现此目的。 基本上，我想要实现的是图像（带有水印“ G”）自动调整大小，而不会显示更少的图像。如果可能的话 我到目

  • 11.7 CSS 响应式技术（responsiveness）

    Web是用来通过互联网分享信息的，从早期的电脑，发展到现在形形色色的移动智能终端，都需要能浏览这些信息。这给网页设计和技术实现在适配各种屏幕尺寸（分辨率）上提出了很大的挑战。 移动设备通常要比电脑的屏幕小很多，一套以电脑分辨率和视觉效果为蓝本的设计，显然不能满足要求。那么我们该怎么处理移动端的展示呢？通常我们有3种选择： 让用户自己调整页面大小和位置来阅读网页的不同部分乃至屏幕外的部分。 创建一个

同类工具

CSS Browser SelectorEQCSSYammSunbirdshinelesscss-pythonPhomemeSCUT_cssCSSgram

相关阅读

响应式框架Bootstrap栅格系统的实例jquery SweetAlert插件实现响应式提示框具有现有样式表的应用程序的CSS框架CSS复选框输入样式响应式图像图

相关文章

HTTP-响应vue响应式原理细节求解答GWT CSS样式CSS鼠标样式你是怎么理解Vue响应式原理的？

相关问答

响应本机响应式字体大小在css语句中响应本机样式表多个值CSS中的响应字体大小下拉选择菜单在ajax响应后丢失css样式DjangoRest框架-追加主机名到响应

相关文档

响应式 Web 开发精讲iOS 的函数响应型编程揭秘 CSS网站设计解构：有效的交互设计框架和模式Django 入门框架
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.