Home >Web Front-end >HTML Tutorial >轻量级响应式 CSS 框架:StringBean_html/css_WEB-ITnose

轻量级响应式 CSS 框架:StringBean_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:06:571305browse

StringBean 是超轻量级的响应式 CSS 框架。

在线演示:http://markgreenall.github.io/StringBean 

代码示例:

简单 Header 布局

<header class="container">  <nav class="row">    <div class="column xsmall-16 small-16 medium-10 large-11 xlarge-12">      <h1>        String Bean      </h1>    </div>    <div class="column xsmall-16 small-16 medium-5 large-4 xlarge-3">      <p id="Strapline">        Powering the internet, gently.      </p>    </div>  </nav></header>

按钮

<a href="/login" class="button normal information">Login</a><a href="/login" class="button normal alert">Register</a>

网格

<div class="grid">    <li class="box xsmall-16 small-16 medium-7 large-5 xlarge-3">        Box #1    </li>    <li class="box xsmall-16 small-16 medium-7 large-5 xlarge-3">        Box #2    </li>    <li class="box xsmall-16 small-16 medium-7 large-5 xlarge-3">        Box #3    </li></div>

项目主页:http://www.open-open.com/lib/view/home/1441788601149

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn