澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

什么编写轻量级,学习笔记9

2019-10-21 作者:澳门新萄京赌场网址   |   浏览(69)

哪些编写轻量级 CSS 框架

2017/08/08 · CSS · CSS

本文我: 伯乐在线 - 叙帝利 。未经小编许可,禁绝转载!
招待插手伯乐在线 专辑笔者。

图片 1

Github:

Demo: 

图片 2

Bootstrap基础学习-1,bootstrap基础-1

Bootstrap是一个依照栅格结构的前端结构框架(当然也可能有JS,JQuery),它的帮助和益处是内容框架能够一点也不慢搭建起来,基于媒介查询能够使搭建的页面非常快的适应不一样的顾客端,无论是手提式有线电话机,平板,照旧PC,基本上都能自适应,当然新本子已经上马不帮衬IE6了,对IE8的支持也很单薄,究竟IE8对HTML5的协理不太好,(说真的,笔者本身也恶感IE6~8,对于笔者这种起码选手来说,包容性临时候真费力,不只有品种上要用,连面试也要用,有未有搞错嘛,蒙受了,上网查一下不就行了。发个牢骚,该会的依旧得会啊!!!)

闲言闲语十分少讲,开首总计自身如今BS笔记!

1.在布局内容方面,BS对结构内容的主宰宗旨是有类来调控,比方对结构的操纵正是

<div class="container">

   <div class="row">

      <div class="col-md-4  col-xs-6">

          这风度翩翩块div的类名中,是由col-md-4,col-xs-6这八个类名来调控他的框架宽度;此中col代表是栅格,md代表顾客端显示屏的上升的幅度为pc中屏,一样的xs则代表客户端显示屏为超小屏,也正是手提式有线电话机屏;4,6就表示了栅格的尺寸,意思正是在中屏显示屏下升幅为4个栅格,在手提式有线电话机端宽度为6个栅格 ,通常情形下把把一整块div最多能够划成12个栅格,所以她的汉子儿div在中屏下则是8个栅格!  

     </div>

      <div class="col-md-8   text-muted">那风度翩翩块div的类名中,抛去col-md-8不说,来讲说text-muted.这么些类则是调整这一个div下的剧情字体颜色的,当您把BS的css下载到本地后,你在css小编文件中寻找text-muted,就能够看出她的定义独有颜色,和他在一同的此外类名就分别定义了差异的水彩 </div>

    </div>

</div>

2.构造方面讲罢了,那就说说页面中具体的局地零件,先说说导航吧,原先大家协和构建导航是由叁个基本的内联ul组成(以下css在BS中可以完结),

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

但在BS中,则有nav这么些类来兑现,不过nav那一个类须要和别的类合用手艺让页面效果发挥出来,举个例子说nav-pills和nav-tabs,倘使是垂直导航的话则在类名中步入nav-stacked

<ul class="nav nav-pill">
    <li><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

3.讲罢导航条再来讲说下拉菜单,BS中的下拉菜单得仰仗它自带的多少个js文件来落到实处,而它本人的js还依靠了JQuery,所以那五个公文是少不了的。值得提明的是有关这么些下拉菜单代码方面有一点点复杂,button中的data-toggle="dropdown"务必和外围的div类名同样。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

 4.貌似该说说表单了,在Bootstrap框架中,通过定制了一个类名`form-control`,也正是说,假使那多少个因素选用了类名“form-control”,将会兑现部遍布署上的定制效果。

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱:</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的信箱密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-default">步入邮箱</button>
</form>

Bootstrap是一个基于栅格结构的前端结构框架(当然也可能有JS,JQuery),它的优点是内容框架能够飞快搭建起来...

BootStrap布局

前言

那篇文章笔者曾经掂量了四个月之久,恐怕说拖沓了这么久吧。想说的东西重重,却又无从说起。近年来轻量级框架如雨后苦笋,数不胜数。小编想每一个人都应该总结总括专门的职业中的常见要求,编写意气风发套符合自身的 CSS 框架。在事先的篇章中,作者提到了面向对象的 CSS(比方BEM、OOCSS、SMACSS,详见 )。那是大器晚成种构思,并不关乎具体的 CSS 难点,重要是类命名的政策!未来依旧有诸四人对于前端框架的认知还栖息在表面,以为Bootstrap 是后端人士专用,前端没须求等等。笔者不领会这种说法从何而来,作者最初始也嫌恶使用框架,只怕和数不完人的主张一样,畏惧新知识、惊愕难以通晓、境遇标题标时候不可能化解等等。最要害的一些是贪求无厌人觉着框架的体裁是平昔的,修改起来太费力,还不比自身依据设计图写起来方便。

Github:

Docs: 

1>     下载地址:

怎么使用框架

为什么使用框架?答案鲜明,功效。除外,使用框架只怕商量框架的意义还恐怕有非常多,比方面向对象理念的具体得以达成。在上一家商厦职业的时候,开头的多少个品种本身也是用最原始的办法书写 CSS 。项目里面最让自家发烧的正是类的命名。作者想大多数人都以依照效益去命名,那就招致了成都百货上千的冗余,同样的组件可能写很频仍。轻巧举三个例子,如下图,个人主题的报到界面。

图片 3

众两个人满含自己刚带头的时候大概会选取上面包车型地铁类命名及布局情势,其通用性相当不好

JavaScript

<div class="login-area"> <div class="login-img">     <img src="..." />   </div> <div class="login-text">     <a href="...">请点击登入</a>   </div> </div>

1
2
3
4
5
6
7
8
<div class="login-area">
    <div class="login-img">
    <img src="..." />
  </div>
    <div class="login-text">
    <a href="...">请点击登录</a>
  </div>
</div>

不过精通 Bootstrap 的人应有如火如荼眼就意识上图就是三个 media 对象,无非一些小细节供给调动一下

JavaScript

<div class="media"> <div class="media-left"> <img src="..." /> </div> <div class="media-body media-middle"> <a href="...">请点击登陆</a> </div> </div>

1
2
3
4
5
6
7
8
<div class="media">
    <div class="media-left">
        <img src="..." />
    </div>
    <div class="media-body media-middle">
        <a href="...">请点击登录</a>
    </div>
</div>

为了让文字与图片居中对齐,大家得以选取 Bootstrap 的 .media-middle 的声援类。假设在工作中还要依据要求自定义一些协理类调节细节,当然那是一个运动端的例子,能够选用移动端框架相关的 media 对象。

此外,在类型改版的时候,原始的主意的改变更是惨无人理,能够说是恐怖的梦,冗长的 CSS 文件、混乱的效果与利益划分、类名、色值等等。最终也只可以硬着头皮一点一点修改。那一刻笔者才体会到框架的意义以至前端工具的根本。作者从办事中总括出,大概你能够自如的利用某二个框架,要么就本人完成叁个框架

前言

那篇小说作者早已研讨了八个月之久,恐怕说拖沓了这么久吧。想说的东西非常多,却又有苦难言。近些日子轻量级框架如雨后春笋,成千成万。小编想各类人都应有总结总括职业中的常见需要,编写风姿洒脱套切合本身的 CSS 框架。在事先的小说中,小编提到了面向对象的 CSS(比方 BEM、OOCSS、SMACSS,详见 )。那是黄金年代种思维,并不涉及具体的 CSS 难点,首假若类命名的国策!未来照例有成都百货上千人对从前端框架的认知还停留在外界,感觉Bootstrap 是后端职员专项使用,前端没须要等等。小编不领会这种说法从何而来,笔者最开首也不爱好使用框架,可能和无数人的主张龙马精神致,畏惧新知识、惊慌难以了解、遭遇难题的时候无法缓慢解决等等。最重视的有些是众几人以为框架的样式是长久的,修改起来太辛苦,还不及本身依照规划图写起来方便。

 图片 4

前面八个框架相比较

脚下市道上前端框架主要分重量级与轻量级。重量级入眼有 Bootstrap、Semantic、UIkit、Foundation 等,轻量级有 Pure、Skeleton、Miligram 等。常常关怀前端动态的程序员会意识轻量级框架每年每度都不可胜道。在本身下边提到的主流轻量级框架之外还应该有相当多像样的框架。笔者直接问自个儿,为啥要重新造轮子。经过研究,我发觉那一个轻量级框架其实好多都不能够胜任专门的工作须求,而且模仿的印痕相当重,基本上都或多或少的有 Bootstrap 的黑影。那么那一个轻量级框架有未有含义吗?当然有。不过就小编个人观点,选拔轻量级框架反倒不及本人完成一个框架。因为多数轻量级框架就如职业计算,是依赖自身的业务要求完结的。所以基本上不有所通用性。

前面一个框架的相比较主要以 Bootstrap、Semantic、UIkit 为主,因为小编个人感觉那八个最富有代表性,何况设计风格各有特色。Foundation 也可以有不胜枚举大商号在用,但以本人个人观点,无论是框架的易用性依然设计风格,比较别的多少个框架略逊一筹。

内部 Bootstrap 和 Semantic 是面向对象的最棒反映。

自己先说一下 Bootstrap 的优势,不是设计风格,不是模块,不是特效,而是栅格,响应式栅格。Bootstrap 的栅格在与其他框架比较中假公济私绝对优势,无论是栅格的细分也许类名的品格都号称经典。要是读者有心看一下 Bootstrap 的 Less 源文件,就能够感受到 Bootstrap 对于响应式栅格的别树一帜。其实在 Bootstrap 以前也会有多数栅格方案,不过给人的感觉便是远远不足利索,类名繁杂倒霉记。而新兴的非常多框架,极度轻量级的框架许多都有Bootstrap 的黑影。

下边大家透过相比多少个框架的栅格和开关来看一下类命名的政策。

Bootstrap

JavaScript

<div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div> <button class="btn btn-primary" type="submit">Button</button>

1
2
3
4
5
6
<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
</div>
 
<button class="btn btn-primary" type="submit">Button</button>

Semantic

JavaScript

<div class="ui grid"> <div class="ten wide column"></div> <div class="six wide column"></div> </div> <button class="ui primary basic button">Primary</button>

1
2
3
4
5
6
<div class="ui grid">
  <div class="ten wide column"></div>
  <div class="six wide column"></div>
</div>
 
<button class="ui primary basic button">Primary</button>

Foundation

JavaScript

<div class="row"> <div class="small-3 columns"></div> <div class="small-9 columns"></div> </div> <button type="button" class="primary button">Primary</button>

1
2
3
4
5
6
<div class="row">
  <div class="small-3 columns"></div>
  <div class="small-9 columns"></div>
</div>
 
<button type="button" class="primary button">Primary</button>

UIkit

JavaScript

<div class="uk-grid"> <div class="uk-width-1-2"></div> <div class="uk-width-1-2"></div> </div> <button class="uk-button uk-button-primary" type="button">Primary</button>

1
2
3
4
5
6
<div class="uk-grid">
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>
 
<button class="uk-button uk-button-primary" type="button">Primary</button>

Pure

JavaScript

<div class="pure-g"> <div class="pure-u-1-2"></div> <div class="pure-u-1-2"></div> </div> <button class="pure-button pure-button-primary">A Primary Button</button>

1
2
3
4
5
6
<div class="pure-g">
    <div class="pure-u-1-2"></div>
    <div class="pure-u-1-2"></div>
</div>
 
<button class="pure-button pure-button-primary">A Primary Button</button>

经过上边的对待,我们应该早已意识了那几个框架的命名战术的分裂。不可不可以认,Bootstrap 的命名最卓越。

从前在网上看看有人斟酌关于框架的易用性,有些人会说 Bootstrap 的类名太长,但是通过下面多少个框架的对立统生意盎然,Bootstrap 的类并不麻烦,而且用预管理器编写框架时嵌套会相比灵活。

Semantic 的类名最精简,通过多少个定语的修饰组成一句话,确实很风趣。不过过多的修饰类在编排框架时会稍显混乱,有利有弊,一碗水端平吧。

Foundation 的栅格应该是最丰硕的,攻略上附近Bootstrap,只是对集体属性举行了拆分,我们也得以看看里面包车型大巴切实可行细节。

UIkit 和 Pure 的安排一样,都加了前缀以分别此外框架,不过很鲜明类名过于冗长了。笔者在编排框架时也这么想过,可是最终舍弃了这种措施。

干什么采用框架

缘何使用框架?答案明显,功效。除外,使用框架恐怕切磋框架的意义还会有相当多,比方面向对象观念的具体落实。在上一家公司专门的学业的时候,带头的多少个档案的次序自身也是用最原始的不二秘诀书写 CSS 。项目里面最让自己高烧的就是类的命名。我想超过约得其半人都是根据效果与利益去命名,那就产生了众多的冗余,一样的零部件恐怕写很频仍。轻松举八个例证,如下图,个人主旨的报到分界面。

图片 5

很四个人包括小编刚最初的时候只怕会选拔上边包车型客车类命名及布局情势,其通用性相当差

<div class="login-area">
    <div class="login-img">
    <img src="..." />
  </div>
    <div class="login-text">
    <a href="...">请点击登录</a>
  </div>
</div>

可是通晓 Bootstrap 的人应该风姿罗曼蒂克眼就意识上海教室正是一个 media 对象,无非一些小细节需求调解一下

<div class="media">
    <div class="media-left">
        <img src="..." />
    </div>
    <div class="media-body media-middle">
        <a href="...">请点击登录</a>
    </div>
</div>

为了让文字与图片居中对齐,大家得以选用 Bootstrap 的 .media-middle 的推搡类。如若在专门的学业中还要依照供给自定义一些协助类调节细节,当然那是一个移动端的例子,能够挑选移动端框架相关的 media 对象。

其他,在档期的顺序改版的时候,原始的办法的退换更是惨不忍闻,能够说是恶梦,冗长的 CSS 文件、混乱的机能区划、类名、色值等等。最终也只可以硬着头皮一点一点修改。那一刻作者才体会到框架的意思甚至前端工具的根本。作者从专门的工作中总计出,抑或你能够熟识的行使某一个框架,要么就和煦完成一个框架

 

至于 CSS 预管理器

CSS 预处理器早就不是哪些新鲜事,可是真的可以在职业中运用的人有稍许吗?熟识应用预管理器天性的人又有个别许吧?

自身事先职业的时候也不曾用预管理器,因为不用,所以也意识不到预管理器的裨益。首若是感觉麻烦,因为要利用编写翻译器编写翻译一下,还不比间接写 CSS 方便。然则在类型爱惜的时候就发掘到预管理器的利益。后来在多少个品种中尝试了预管理器,不过对于模块化的写法不太猛烈。预管理器作为工具,能够达成模块化编写 CSS,那么相应什么划分模块?其余,预管理器有点不清特点,可是多数人刚初步只用到变量和嵌套,此外的性状差不离少之甚少用到。小编相信在谐和入手实现一个轻量级框架的进度中,我们得以对预管理器有多个完善的通晓。

现阶段风行的预管理器有 Less,Sass,Stylus 两个,选用哪位完全部是看本人的习贯。笔者最开首因为 Bootstrap 理解的 Less,可是因为习贯采纳了 Sass,其次 Sass 的效力要更周密一些。

不论是工作可能本身写项目,都要搭建三个类型情形,也便是设置大器晚成多种的 npm 包。比较茹毛饮血的开垦方式,使用工具开垦的最早妄想进度稍显麻烦,但是旭日东升旦条件建好,早先时期的开支将会百步穿杨。

Miligram 这一个轻量级框架在 Github 上有异常高人气,但是讲真的,用处并比很小。可是这一个框架的营造立模型式要命值得学习。即使CSS 对于广大人俩说相当的粗略,可是真要去写叁个框架,依旧这几个讨厌,那时候就要求殷鉴不远一些卓越的框架。

编辑框架大概会用到的 npm 如下:

JavaScript

--autoprefixer --node-sass --npm-run-all --rimraf --onchange

1
2
3
4
5
--autoprefixer
--node-sass
--npm-run-all
--rimraf
--onchange

实际最重大的正是三个 node-sass,另外的都以支援 CSS 文件的扭转修改,大家感兴趣的话能够去 npm 官方网站找出那个插件,精通实际用法,如有不懂能够给本人留言,作者就不啰嗦了。

前面二个框架比较

当下市情上前端框架首要分重量级与轻量级。重量级注重有 Bootstrap、Semantic、UIkit、Foundation 等,轻量级有 Pure、Skeleton、Miligram 等。日常关注前端动态的技术员会发觉轻量级框架一年一度都不可胜计。在笔者上面提到的主流轻量级框架之外还会有好多像样的框架。笔者直接问自个儿,为啥要重新造轮子。经过研讨,小编意识那么些轻量级框架其实许多都不能独立自己作主专门的工作需要,何况模仿的划痕十分重,基本上都或多或少的有 Bootstrap 的阴影。那么那几个轻量级框架有未有含义吗?当然有。不过就作者个人观点,选取轻量级框架反倒比不上本身达成二个框架。因为好多轻量级框架就好像职业总结,是基于本身的作业须要完毕的。所以基本上不享有通用性。

前面叁个框架的自己检查自纠首要以 Bootstrap、Semantic、UIkit 为主,因为作者个人认为那多个最具备代表性,并且设计风格各有特色。Foundation 也可能有许多大商厦在用,但以自己个人观点,无论是框架的易用性如故设计风格,相比较别的多少个框架略逊一筹。

里头 Bootstrap 和 Semantic 是面向对象的最佳反映。

自家先说一下 Bootstrap 的优势,不是安插风格,不是模块,不是特效,而是栅格,响应式栅格。Bootstrap 的栅格在与别的框架相比中据有相对优势,无论是栅格的划分只怕类名的品格都称得上杰出。假设读者有心看一下 Bootstrap 的 Less 源文件,就能感受到 Bootstrap 对于响应式栅格的独到。其实在 Bootstrap 早前也可能有不菲栅格方案,可是给人的认为正是非常不足利索,类名琐碎不佳记。而新兴的过多框架,尤其轻量级的框架许多都有Bootstrap 的影子。

上边大家经过相比相当多少个框架的栅格和按钮来看一下类命名的政策。

Bootstrap

<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
</div>

<button class="btn btn-primary" type="submit">Button</button>

Semantic

<div class="ui grid">
  <div class="ten wide column"></div>
  <div class="six wide column"></div>
</div>

<button class="ui primary basic button">Primary</button>

Foundation

<div class="row">
  <div class="small-3 columns"></div>
  <div class="small-9 columns"></div>
</div>

<button type="button" class="primary button">Primary</button>

UIkit

<div class="uk-grid">
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>

<button class="uk-button uk-button-primary" type="button">Primary</button>

Pure

<div class="pure-g">
    <div class="pure-u-1-2"></div>
    <div class="pure-u-1-2"></div>
</div>

<button class="pure-button pure-button-primary">A Primary Button</button>

经过地方的相比较,大家应该早就意识了这个框架的命名计谋的两样。不可不可以认,Bootstrap 的命名最优良。

什么编写轻量级,学习笔记9。事先在网络看看有人探讨关于框架的易用性,有些许人说 Bootstrap 的类名太长,不过通过上面多少个框架的比较,Bootstrap 的类并不麻烦,并且用预管理器编写框架时嵌套会相比较灵敏。

Semantic 的类名最精简,通过两个定语的梳洗组成一句话,确实很有趣。但是过多的修饰类在编写制定框架时会稍显凌乱,各有利弊,天公地道吧。

Foundation 的栅格应该是最丰富的,战略上看似 Bootstrap,只是对公共性质实行了拆分,咱们也得以看看当中的有板有眼细节。

UIkit 和 Pure 的国策相同,都加了前缀以分别此外框架,然则很醒目类名过于冗长了。笔者在编写制定框架时也如此想过,可是最终放任了这种艺术。

基于本身的急需,下载分化的本子。笔者这里运用的是1本子的。比较简单好用。

编纂轻量级框架

毕竟到了本篇小说的基点。

粗略介绍一下,笔者给本身编辑的框架取名 Snack,原意“零食”,首要表明简单之意。即使是轻量级框架,但小编并不想拿轻量级做为噱头,终究体积轻意味着有些效率的贫乏以致疏漏。那几个框架的意思更多的是调换学习,作者盘算借鉴其余框架的出色之处,尽量简化类名,以致尝试研究一些更通用的零部件。

大好多的轻量级框架只是 CSS 框架,不关乎 JS 部分,首要用来网页的布局。我因而筹划本身编辑框架,是因为做事中重复的东西太多,通过框架可以很好的将那些零碎组件整合到大器晚成块儿。另如日方升方面,写个小品种,学点新知识是生气勃勃件逸事。

编写制定框架是2018年想做的作业,但因为时间原因,拖了比较久。写框架之初作者曾陷入三个误区,我希图规划某个相比较洋气的样式,立体的开关、浮动的面板等,举例下图中的风格。

图片 6

可是在相对续续编写框架的进程中,小编稳步找到了可行性,上海体育场所的体制只是风姿洒脱种四肢,编写框架之初不应该把第风姿罗曼蒂克放在这里方面。当然,好的 UI 设计也是框架成功的意气风发有的。

有关 CSS 预管理器

CSS 预管理器早就不是怎么着新鲜事,然而真正能够在专门的工作中运用的人有稍许吗?熟悉使用预管理器性格的人又有个别许吧?

自个儿事先职业的时候也从不用预管理器,因为不用,所以也开掘不到预管理器的好处。重假使认为费力,因为要运用编写翻译器编译一下,还不比直接写 CSS 方便。然则在类型珍贵的时候就意识到预管理器的益处。后来在多少个类型中尝试了预管理器,可是对于模块化的写法不太明显。预管理器作为工具,能够兑现模块化编写 CSS,那么应该什么分割模块?别的,预管理器有多数风味,可是大部分人刚最早只用到变量和嵌套,另外的表征大致非常少用到。我言听计行在投机入手完结贰个轻量级框架的进度中,我们能够对预处理器有多少个完善的摸底。

现阶段盛行的预管理器有 Less,Sass,Stylus 四个,选拔哪位完全部都以看自身的习贯。笔者最早始因为 Bootstrap 领会的 Less,不过因为习于旧贯选择了 Sass,其次 Sass 的意义要更周密一些。

不论是专业还是本人写项目,都要搭建一个种类条件,也正是设置一密密层层的 npm 包。比较刀耕火耨的开拓形式,使用工具开采的开始的一段时代计划进程稍显麻烦,然则假若情状建好,早先时期的支出将会张弛有度。

Miligram 那些轻量级框架在 Github 上有相当高人气,然则说真的,用处并非常的小。可是那么些框架的营造立模型式特别值得学习。尽管CSS 对于多数个人的话很简短,可是真要去写二个框架,依旧特别艰巨,那时候就必要殷鉴不远一些大好的框架。

编辑框架大约会用到的 npm 如下:

--autoprefixer
--node-sass
--npm-run-all
--rimraf
--onchange

事实上最首要的正是三个 node-sass,其余的都以扶助 CSS 文件的生成修改,我们感兴趣的话能够去 npm 官方网站寻觅这个插件,领悟具体用法,如有不懂可以给小编留言,笔者就不啰嗦了。

2>     Bootstrap常用的布局样式介绍

模块划分

编写框架的第一步正是要规定框架应该包涵哪些模块。因为是轻量级框架,所以模块鲜明未有轻重级框架那么完美,独有基本的一些零部件。通过相比一些轻量级框架以至专门的学业总计,大概常用的模块满含栅格、媒体、按键、排版、表单、表格、面板以致扶助理工科程师具。

在常用的这多少个零部件中,须要器重关切的是栅格、表单及面板,媒体组件也很要紧,可是自由发挥的空间比十分小,作者向来用了 Bootstrap 的媒体组件。

编写制定轻量级框架

到头来到了本篇小说的基本点。

大致介绍一下,小编给本身编写的框架取名 Snack,原意“快餐”,首要表明轻易之意。固然是轻量级框架,但本身并不想拿轻量级做为噱头,终究体量轻意味着某个职能的贫乏以至脱漏。那几个框架的含义越来越多的是交换学习,笔者策动借鉴其余框架的绝妙之处,尽量简化类名,甚至尝试搜求一些更通用的零件。

大部的轻量级框架只是 CSS 框架,不涉及 JS 部分,首要用来网页的布局。作者于是希图自个儿编辑框架,是因为专门的工作中另行的东西太多,通过框架能够很好的将那几个碎片组件整合到意气风发块儿。另后生可畏方面,写个小项目,学点新知识是意气风发件逸事。

编排框架是二〇一八年想做的事务,但因为日子原因,拖了比较久。写框架之初小编曾深陷三个误区,小编策动规划有个别相比较前卫的体制,立体的按键、浮动的面板等,比方下图中的风格。

图片 7

唯独在相对续续编写框架的经过中,作者稳步找到了趋势,上海体育地方的体裁只是扶摇直上种身体发肤,编写框架之初不应有把关键放在此上头。当然,好的 UI 设计也是框架成功的一片段。

1->布局容器(.container和.container-fluid)

命名计谋

先是是类命名的档案的次序与构造。类命名一贯是自个儿相比较纠缠的地方,刚先导工业作的时候为了起一个见名知意又轻松的类名总是无可奈何。笔者在编写制定框架时尽量制止与 Bootstrap 的类名重叠,但也不可能完全幸免。相比较别的框架会发掘,这种气象不可幸免的会冒出,毕竟类名会有必然的规律性以致档次性。在这里或多或少上小编比较喜欢 Bootstrap 的品格。上面和 Bootstrap 的表单做二个对待。

Bootstrap 的表单结构及类名

JavaScript

--div.form-horizontal --div.form-group --label.control-label --input.form-control

1
2
3
4
--div.form-horizontal
  --div.form-group
    --label.control-label
    --input.form-control

Snack 的表单结构及类名

JavaScript

--div.form-row --div.form-item --label.form-label --input.form-field

1
2
3
4
--div.form-row
  --div.form-item
     --label.form-label
     --input.form-field

本条表单结构全部来说还算不错,只是分别地点须求修改。有大器晚成对框架不给 input 等成分起类名,而是给父成分叁个类名,个人对这种做法表示疑问,不起类名会裁减框架编写及选择的八面驶风。

第二个政策是组件的修饰,比方按键及面板都留存几个语境(颜色、大小等),在此一点上自身编写框架时做了有些简化,风格上有一点点Semantic 的影子。

JavaScript

<button class="btn primary">primary</button> <table class="table bordered striped">...</table> <div class="boxes primary">...</div>

1
2
3
<button class="btn primary">primary</button>
<table class="table bordered striped">...</table>
<div class="boxes primary">...</div>

关于修饰类的国策是三个仁者见仁智者见智个抒几见的难点,至于哪一种方法更加好,还索要在编写框架的长河中寻找。

模块划分

编辑框架的率先步就是要规定框架应该包蕴哪些模块。因为是轻量级框架,所以模块料定未有轻重级框架那么完美,只有着力的局部零部件。通过相比较一些轻量级框架以致职业计算,差非常的少常用的模块包罗栅格、媒体、按键、排版、表单、表格、面板以致扶助理工科程师具。

在常用的那多少个零部件中,须求入眼关怀的是栅格、表单及面板,媒体组件也很珍视,不过自由发挥的半空中相当的小,作者直接用了 Bootstrap 的传播媒介组件。

 

2->栅格系统 (.col-xs-[1-12], .col-sm-[1-12], .col-md-[1-12]和.col-lg-[1-12])

栅格系统

演示示例:

其他框架必得树立在栅格的根基上才具灵活布局。笔者在前方提到了 Bootstrap 的精髓正是栅格系统。栅格系统的编排必要使用预处理器的大循环作用,不然就要做无谓的重复劳动了。小编碰到过部分轻量级框架是用 Less 编写的,其栅格系统就一向不用循环,那样的源码稍显唐突,或然是笔者对 Less 的轮回效率不熟,当然 Less 本身的巡回比较弱,用起来有一点点别扭。关于预管理器的轮回,能够参照他事他说加以考察笔者事先翻译的《CSS 预管理器中的循环》,相比较详细地对待了二种流行预管理器的轮回作用。容易说一下,Less 未有循环,但足以用递归实现,而 Sass 和 Stylus 有真循环。

本人编写的栅格系统也是暗中认可 12 列,但是后来意识 12 列的栅格贫乏最常用的列宽(例如 一成、十分之六、五分三等),例如上边 CodePen 展示的事例用 12 列栅格是回天无力达成的,所以小编又增加了 10 列栅格,但依然无能为力八面见光,但是已经很灵巧了。

See the Pen snack-grid by Zongbin (@nzbin) on CodePen.

栅格的施用和 Bootstrap 是大器晚成律的,除了 12 列栅格外,10 列栅格以至均分栅格都要增多 .cols-

JavaScript

<!-- 暗中认可 12 列栅格,所以省略 cols-12 --> <div class="row"> <div class="col-5"></div> <div class="col-7"></div> </div> <!-- 10 列栅格 --> <div class="row cols-10"> <div class="col-3"></div> <div class="col-7"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
<!-- 默认 12 列栅格,所以省略 cols-12 -->
<div class="row">
    <div class="col-5"></div>
    <div class="col-7"></div>
</div>
 
<!-- 10 列栅格 -->
<div class="row cols-10">
    <div class="col-3"></div>
    <div class="col-7"></div>
</div>          

那个栅格并从未响应式,只有叁个断点,小屏手提式有线电话机上的话全数栅格都会单行显示。意气风发方面,那样的希图符合半数以上轻量级框架的初志;另意气风发方面,作者希图再写三个指向性移动端的框架,究竟Web 端和平运动动端的风格反差相当大,遵照业务须求分开会越来越好。可是近期自个儿退换了源文件,为响应式预先流出了扩展情势。

取名攻略

第意气风发是类命名的层系与布局。类命名一向是自身比较纠缠的地点,刚早先工作的时候为了起八个见名知意又简单的类名总是无可奈何。笔者在编写框架时尽量防止与 Bootstrap 的类名重叠,但也不能完全防止。比较其余框架会意识,这种情景不可幸免的会并发,毕竟类名会有料定的规律性以至档案的次序性。在这里或多或少上作者相比喜欢 Bootstrap 的风骨。下边和 Bootstrap 的表单做三个对待。

Bootstrap 的表单结构及类名

--div.form-horizontal
  --div.form-group
    --label.control-label
    --input.form-control

Snack 的表单结构及类名

--div.form-row
  --div.form-item
     --label.form-label
     --input.form-field

其一表单结构全体来说还算不错,只是独家地方须要修改。有一点点框架不给 input 等因素起类名,而是给父成分三个类名,个人对这种做法表示疑问,不起类名会减少框架编写及使用的八面后珑。

第一个政策是组件的修饰,比如开关及面板都留存四个语境(颜色、大小等),在这里一点上本身编写框架时做了有的简化,风格上有一些Semantic 的影子。

<button class="btn primary">primary</button>
<table class="table bordered striped">...</table>
<div class="boxes primary">...</div>

关于修饰类的政策是贰个仁者见仁智者见智个抒几见的难题,至于哪一类艺术更加好,还索要在编排框架的进度中找出。

 图片 8

表单

示范示例:

在上边的命名计策中曾经显得了 Snack 表单的主干组织,基本表单除了结构之外,样式上并不曾太多能够研讨的地点。在这里说一下表单中 checkbox 的结构调治,先看一下 Bootstrap 的 checkbox 结构。

JavaScript

<!-- checkbox --> <div class="checkbox"> <label> <input type="checkbox" value=""> checkbox </label> </div> <!-- checkbox-inline --> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox </label>

1
2
3
4
5
6
7
8
9
10
11
<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>
 
<!-- checkbox-inline  -->
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox
</label>

以上两种结构不能够有不是,稍有差错样式就能够混杂,灵活性相当糟糕。其次小编在想二种结构能或无法组成在一同,加强灵活性。想了非常久,找到了艺术,Snack 结构如下:

JavaScript

<!-- checkbox --> <div class="checkbox"> <label> <input type="checkbox" value=""> checkbox </label> </div> <!-- checkbox-inline --> <div class="checkbox inline"> <label> <input type="checkbox" value=""> checkbox </label> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>
 
<!-- checkbox-inline -->
<div class="checkbox inline">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>

也得以将样式直接加到 label 标签上。另外,如果将 input 移到 label 标签外也是尚未难题的,如下:

这种组织有多个益处,正是足以自定义 input 样式,详见上边包车型地铁 CodePen 的 scss 文件。radio 的装置和 checkBox 是如出豆蔻梢头辙的。

See the Pen snack-forms by Zongbin (@nzbin) on CodePen.

栅格系统

身体力行示例:

别的框架必需树立在栅格的根底上技巧灵活布局。作者在前方提到了 Bootstrap 的经典便是栅格系统。栅格系统的编辑撰写须求选择预管理器的轮回功用,不然就要做无谓的重复劳动了。作者遇见过一些轻量级框架是用 Less 编写的,其栅格系统就不曾用循环,那样的源码稍显唐突,只怕是笔者对 Less 的循环成效不熟,当然 Less 本人的大循环相比弱,用起来某些别扭。关于预管理器的轮回,能够参见笔者事先翻译的 《CSS 预管理器中的循环》,比较详细地对待了三种流行预管理器的轮回功用。简单说一下,Less 没有循环,但足以用递归完毕,而 Sass 和 Stylus 有真循环。

小编编写的栅格系统也是暗中认可 12 列,但是后来察觉 12 列的栅格紧缺最常用的列宽(比方 一成、四分之一、百分之三十等),举例上面 CodePen 呈现的例证用 12 列栅格是敬敏不谢形成的,所以自个儿又增加了 10 列栅格,但依然不可能面面俱圆,可是已经很灵活了。

See the Pen snack-grid by Zongbin (@nzbin) on CodePen.

栅格的应用和 Bootstrap 是千篇风姿浪漫律的,除了 12 列栅特别,10 列栅格甚至均分栅格都要加多 .cols-

<!-- 默认 12 列栅格,所以省略 cols-12 -->
<div class="row">
    <div class="col-5"></div>
    <div class="col-7"></div>
</div>

<!-- 10 列栅格 -->
<div class="row cols-10">
    <div class="col-3"></div>
    <div class="col-7"></div>
</div>          

其后生可畏栅格并未响应式,独有三个断点,小屏手提式有线电话机上的话全数栅格都会单行展现。大模大样方面,那样的安顿性相符大多数轻量级框架的初志;另如日方升方面,作者筹划再写多少个对准移动端的框架,终究Web 端和活动端的风格差距相当的大,依据作业供给分开会更加好。不过前段时间自身改造了源文件,为响应式预先流出了增加情势。

 

辅助类

扶植类是人欢马叫雨后冬笋类的结合,例如字号大小、颜色值、padding、margin 以致左右变迁等。在部分 Bootstrap 搭建的后台管理连串中进一步常见,那样布局起来就能够相比灵敏。以下是二个边框的相助类。

JavaScript

.border-left-right { border-left: 1px solid #eee; border-right: 1px solid #eee; } .border-top-bottom { border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .border-left { border-left: 1px solid #eee; } .border-right { border-right: 1px solid #eee; } .border-top { border-top: 1px solid #eee; } .border-bottom { border-bottom: 1px solid #eee; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.border-left-right {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.border-top-bottom {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.border-left {
  border-left: 1px solid #eee;
}
.border-right {
  border-right: 1px solid #eee;
}
.border-top {
  border-top: 1px solid #eee;
}
.border-bottom {
  border-bottom: 1px solid #eee;
}

有关支持类的亲力亲为内容能够阅读那篇小说《什么样编写通用的 Helper Class》

表单

亲自去做示例:

在上头的命名攻略中已经体现了 Snack 表单的宗旨结构,基本表单除了结构之外,样式上并从未太多能够切磋的地点。在这里说一下表单中 checkbox 的结构调节,先看一下 Bootstrap 的 checkbox 结构。

<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>

<!-- checkbox-inline  -->
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox
</label>

如上三种结构无法有不是,稍有不是样式就能混杂,灵活性比较糟糕。其次笔者在想三种结构能否构成在生气勃勃道,巩固灵活性。想了比较久,找到了点子,Snack 结构如下:

<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>

<!-- checkbox-inline -->
<div class="checkbox inline">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>

也足以将样式直接加到 label 标签上。另外,如果将 input 移到 label 标签外也是从未有过难点的,如下:

<!-- checkbox -->
<div class="checkbox">
  <input type="checkbox" id="checkbox1" value="">
  <label for="checkbox1">checkbox</label>
</div>

<!-- checkbox-inline -->
<div class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="">
  <label for="inlineCheckbox1">checkbox</label>
</div>

这种布局有三个功利,正是能够自定义 input 样式,详见下边包车型地铁 CodePen 的 scss 文件。radio 的设置和 checkBox 是大器晚成致的。

See the Pen snack-forms by Zongbin (@nzbin) on CodePen.

 

3->表单控件 (.form-group和.form-control)

盒组件

身体力行示例:

盒组件是本身全方位框架中相比较知足的一个模块。之所以要做那一个组件重借使感到Bootstrap 的 list 组件和 panel 组件能够整合到黄金年代块儿。当然,那样的做法有利有弊。盒组件在后台管理种类的布局中表现的更为卓绝。其取名也是精彩纷呈,比如panel、widget、portlet、ibox、card等,每一种后台处理种类框架都会对那一个组件实行深度开辟,可以预知其在布局上的机要。给四个组件起多少个体面的类名也十分重大,想了十分久,最后用了 box 的类名,当然常常情形下尽大概不要用 box,因为那个类名相比广泛。上边包车型地铁 CodePen 模拟了 Bootstrap 的 list 及 panel 组件。

See the Pen snack-boxes by Zongbin (@nzbin) on CodePen.

给框架增加大旨是蒸蒸日上件风趣的职业。Snack 的默许核心是青灰,因为喜欢土黄,最终增多了暗夜主旨,编写大旨只需改造组件的水彩。示范文书档案的页面用了暗夜核心,点击上方的土黑开关能够切换大旨。

辅助类

援助类是一文山会海类的构成,举个例子字号大小、颜色值、padding、margin 以至左右退换等。在某个 Bootstrap 搭建的后台管理种类中更为常见,那样布局起来就能相比灵敏。以下是叁个边框的提携类。

.border-left-right {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.border-top-bottom {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.border-left {
  border-left: 1px solid #eee;
}
.border-right {
  border-right: 1px solid #eee;
}
.border-top {
  border-top: 1px solid #eee;
}
.border-bottom {
  border-bottom: 1px solid #eee;
}

关于扶助类的越多内容能够翻阅那篇作品《什么编写通用的 Helper Class》

4->开关样式

总结

假设大家问小编极其框架越来越好,小编会一挥而就的选项 Bootstrap。在职业中可以依照需求的难易实行框架接纳,即便职业十分重,最佳依照Bootstrap 举办贰遍开采;反之,能够挑选部分轻量级框架,最佳照旧依据自个儿的须要造轮子,假设大家愿意选择可能借鉴作者的框架,那会是自身的光荣。

打赏帮忙小编写出更多好小说,多谢!

打赏作者

盒组件

示范示例:

盒组件是自己全方位框架中比较满意的贰个模块。之所以要做这几个组件首假如认为Bootstrap 的 list 组件和 panel 组件能够构成到一同。当然,这样的做法有利有弊。盒组件在后台处理类其余布局中显现的愈发优异。其命名也是五颜六色,比如panel、widget、portlet、ibox、card等,种种后台管理体系框架都会对这几个组件举行深度开采,可以看到其在布局上的第风姿洒脱。给三个零件起八个合适的类名也很要紧,想了相当久,最终用了 box 的类名,当然日常情形下全力以赴不要用 box,因为那些类名相比常见。上边包车型大巴 CodePen 模拟了 Bootstrap 的 list 及 panel 组件。

See the Pen snack-boxes by Zongbin (@nzbin) on CodePen.

 

 图片 9

打赏匡助作者写出越多好小说,谢谢!

图片 10

1 赞 3 收藏 评论

主题

给框架增添大旨是意气风发件旧事体。Snack 的默许核心是紫蓝,因为爱好水泥灰,最终增多了暗夜大学旨,编写宗旨只需退换组件的颜料。事必躬亲文档 的页面用了暗夜核心,点击上方的新民主主义革命按键可以切换大旨。

 

有关小编:叙帝利

图片 11

每三回选取都不可能不是贰遍当先,不然就毫无选取;每一趟扬弃都必需是贰次提升,不然就不用废弃。 个人主页 · 笔者的稿子 · 16 ·    

图片 12

总结

意气风发旦大家问作者非常框架更加好,笔者会一挥而就的抉择 Bootstrap。在职业中能够依据需要的难易进行框架选用,假诺工作相当重,最佳依照Bootstrap 进行一回开辟;反之,能够选用一些轻量级框架,最佳照旧依据自个儿的急需造轮子,借使大家愿意选拔大概借鉴作者的框架,那会是本身的体面。

5->按键的抑扬顿挫

 图片 13

 

6->图片的形制

 图片 14

 

3>     编写页面

 

<!DOCTYPE html>

 

<html>

      <head>

        <title>首页 - 客商列表页面</title>

        <link rel="shortcut icon" href="/static/img/favicon.png" />

<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>

<script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 

<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script> 

<style>

.bodercss{

border: 1px solid #00f;

}

</style>

      </head>    

    <body>

 

<!--布局容器-->

<div class="container" style="border:1px solid red">

<p>这是container布局</p>

<p>.container 类用于固定宽度并支持响应式布局的容器。</p>

</div>

<div class="container-fluid" style="border:1px solid #0f0">

<p>container-fluid</p>

<p>.container-fluid 类用于 100%宽度,攻陷全体视口(viewport)的容器。</p>

</div>

  <!--栅格布局地分-->

<div class="container">

<div class="row">

<div class="col-md-1 bodercss">1</div>

<div class="col-md-1 bodercss">2</div>

<div class="col-md-1 bodercss">3</div>

<div class="col-md-1 bodercss">4</div>

<div class="col-md-1 bodercss">5</div>

<div class="col-md-1 bodercss">6</div>

<div class="col-md-1 bodercss">7</div>

<div class="col-md-1 bodercss">8</div>

<div class="col-md-1 bodercss">9</div>

<div class="col-md-1 bodercss">10</div>

<div class="col-md-1 bodercss">11</div>

<div class="col-md-1 bodercss">12</div>

</div>

<div class="row">

<div class="col-md-2 bodercss">2</div>

<div class="col-md-2 bodercss">4</div>

<div class="col-md-2 bodercss">6</div>

<div class="col-md-2 bodercss">8</div>

<div class="col-md-2 bodercss">10</div>

<div class="col-md-2 bodercss">12</div>

</div>

<div class="row">

<div class="col-md-3 bodercss">3</div>

<div class="col-md-3 bodercss">6</div>

<div class="col-md-3 bodercss">9</div>

<div class="col-md-3 bodercss">12</div>

</div>

<div class="row">

<div class="col-md-4 bodercss">4</div>

<div class="col-md-4 bodercss">4</div>

<div class="col-md-4 bodercss">4</div>

</div>

<div class="row">

<div class="col-md-4 bodercss">4</div>

<div class="col-md-8 bodercss">8</div>

</div>

<div class="row">

<div class="col-md-6 bodercss">6</div>

<div class="col-md-6 bodercss">12</div>

</div>

<div class="row">

<div class="col-md-12 bodercss">12</div>

</div>

</div>

<!--表单控件-->

<div class="container">

<form>

<div class="form-group">

<label for="text">文本:</label>

<input type="text" class="form-control" id="text" placeholder="文本">

</div>

<div class="form-group">

<label for="number">数字:</label>

<input type="number" class="form-control" id="number" placeholder="数字">

</div>

<div class="form-group">

<label for="datetime">时间:</label>

<input type="datetime" class="form-control" id="datetime" placeholder="时间">

</div>

<div class="form-group">

<label for="tel">电话:</label>

<input type="tel" class="form-control" id="tel" placeholder="电话">

</div>

<div class="form-group">

<label for="email">邮箱:</label>

<input type="email" class="form-control" id="email" placeholder="邮箱">

</div>

<div class="form-group">

<label for="password">密码</label>

<input type="password" class="form-control" id="password" placeholder="密码">

</div>

<div class="form-group">

<label for="exampleInputFile">上传文件</label>

<input type="file" id="exampleInputFile">

<p class="help-block">上传文件</p>

</div>

<div class="checkbox">

<label>

<input type="checkbox" id="blankCheckbox" value="option1" />多选A

</label>

<label>

<input type="checkbox" id="blankCheckbox" value="option1"/>多选B

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="blankRadio" id="blankRadio1" value="option1"/>单选A

</label>

<label>

<input type="radio" name="blankRadio" id="blankRadio1" value="option1"/>单选B

</label>

</div>

<select class="form-control">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select>

<button type="submit" class="btn btn-default">提交</button>

<button type="reset" class="btn btn-primary">重置</button>

</form>

</div>

<!--按键样式-->

<div class="container" style="margin-top:20px;">

<button type="button" class="btn btn-default">(默许样式)Default</button>

<button type="button" class="btn btn-primary">(首选项)Primary</button>

<button type="button" class="btn btn-success">(成功)Success</button>

<button type="button" class="btn btn-info">(常常消息)Info</button>

<button type="button" class="btn btn-warning">(警告)Warning</button>

<button type="button" class="btn btn-danger">(危险)Danger</button>

<button type="button" class="btn btn-link">(链接)Link</button>

</div>

 

<!--图片形状-->

<div class="container" style="margin-top:20px;">

<img src="/static/img/1.jpg" style="width:200px;height:200px;" class="img-rounded">

<img src="/static/img/2.jpg" style="width:200px;height:200px;" class="img-circle">

<img src="/static/img/3.jpg" style="width:200px;height:200px;" class="img-thumbnail">

</div>

    </body>

</html>

 

 

4>   运维页面效果如下:

1->布局容器

图片 15

 

2->栅格系统

 

图片 16

3->Form表单

 

图片 17

 

 4->按键样式

图片 18

5->图片的体制

图片 19

6->下英姿焕发章节,将Easyui控件的施用

 

 

 

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:什么编写轻量级,学习笔记9

关键词: