快捷搜索:
来自 新京葡娱乐场网址 2019-10-23 05:18 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

相见未知的

一、简介

Bulma 框架最大的特点,就是简单好用。所有样式都基于class,只需为 HTML 元素指定class,样式立刻生效。

JavaScript

<a class="button is-primary is-large">Login</a>

1
<a class="button is-primary is-large">Login</a>

上面代码中,a 元素只需加上几个class,就会出现一个主色调(is-primary)的大(is-large)按钮。

图片 1

Bulma 是一个手机优先的框架,提供五个宽度断点,具有良好的自适应特性,可以随心所欲为不同设备设置不同样式。

  • mobile:小于等于768px
  • tablet:大于等于769px
  • desktop:大于等于1024px
  • widescreen:大于等于1216px
  • fullhd:大于等于1408px

图片 2

它提供二十多种常用组件,比如表单 、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站,可以不用写任何 CSS 代码。

关于作者:追梦子

图片 3

快乐一直在我们身边,不管你身处何地何时,只要心是快乐的,一切都是快乐的。是那一秒,也是那一秒,都不会改变。 个人主页 · 我的文章 · 8 ·    

图片 4

五、文字

Bulma 提供7个修饰指定文字大小。

  • is-size-1: 3rem
  • is-size-2: 2.5rem
  • is-size-3: 2rem
  • is-size-4: 1.5rem
  • is-size-5: 1.25rem
  • is-size-6: 1rem
  • is-size-7: 0.75rem

可以为不同设备指定不同的文字大小。

  • is-size-1-mobile:手机是 size-1
  • is-size-1-tablet:平板是 size-1
  • is-size-1-touch:手机和平板是 size-1
  • is-size-1-desktop:桌面、宽屏和高清是 size-1
  • is-size-1-widescreen:宽屏和高清是 size-1
  • is-size-1-fullhd:高清是 size-1

此外,还有字体颜色、对齐、轻重的修饰类。

13. 让元素重叠

JavaScript

div{transform:skew(90deg);}

1
div{transform:skew(90deg);}

元素重叠了,类似width等于0。

二、基本用法

Bulma 的安装只需一步,把样式表插入网页即可。

JavaScript

<link rel="stylesheet" href="css/bulma.min.css"/>

1
<link rel="stylesheet" href="css/bulma.min.css"/>

使用更简单,就是为 HTML 元素加上class

JavaScript

<a class="button">Button</a>

1
<a class="button">Button</a>

上面的代码为 a 元素加上button类,这个链接就会被渲染成按钮。

图片 5

Bulma 提供大量的修饰类,用来改变基类的样式。它们都是以is-has-开头。比如,要改变 Button 的大小,就可以使用下面的修饰类。

JavaScript

a class="button is-small">Small</a> <a class="button">Normal</a> <a class="button is-medium">Medium</a> <a class="button is-large">Large</a>

1
2
3
4
a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

图片 6

Bulma 默认提供6种颜色。

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

图片 7

按钮状态的修饰类如下。

  • is-hovered
  • is-focused
  • is-active
  • is-loading

完整的修饰类清单请看官方文档。

享受一片宁静的天空。

当中文超出7个字符以后,文字就会被隐藏,效果如图

图片 8

六、定制

最后这个部分是高级内容,讲解如何定制 Bulma,也就是修改默认样式。Bulma 采用 Sass 语法(注意,不是 Scss 语法),所以定制的样式也必须使用 SASS。

首先,克隆或下载源码。

JavaScript

$ git clone

1
$ git clone https://github.com/jgthms/bulma.git

然后,安装依赖。

JavaScript

$ cd bulma $ npm install

1
2
$ cd bulma
$ npm install

接着,在源码的根目录里面,新建一个app.sass文件,定制的代码都写在这个文件。在它里面,先引入 Bulma 基础变量。如果需要的话,可以改掉。

JavaScript

@import "./sass/utilities/initial-variables" $blue: #72d0eb $pink: #ffb3b3 $family-serif: "Merriweather", "Georgia", serif

1
2
3
4
5
@import "./sass/utilities/initial-variables"
 
$blue: #72d0eb
$pink: #ffb3b3
$family-serif: "Merriweather", "Georgia", serif

上面代码中,预设的bluepinkfamily-serif变量被改掉。

有一些 Bulma 变量是从基础变量衍生的,需要的话也可以改掉。

JavaScript

$primary: $pink

1
$primary: $pink

上面代码中,主色调改成了pink变量。

接着,在这个文件里面加载 Bulma 的入口脚本。

JavaScript

@import "./bulma"

1
@import "./bulma"

这一行的下面,你就可以写自己的样式了,比如为所有标题加一个下划线。

JavaScript

.title { text-decoration: underline; }

1
2
3
    .title {
      text-decoration: underline;
    }

最后,打开package.json,找到下面这一行。

JavaScript

"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css

1
"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css

把里面的bulma.sass改成app.sass

JavaScript

"build-sass": "node-sass --output-style expanded --source-map true app.sass css/bulma.css",

1
    "build-sass": "node-sass --output-style expanded --source-map true app.sass css/bulma.css",

以后每次修改完样式,运行一下npm run build,就会生成自己的样式表css/bulma.css了。

(全文完)

1 赞 5 收藏 评论

图片 9

1.1.4 margin垂直外边距折叠的意义是什么

margin垂直外边距折叠的特性主要来自传统排版,举个例子,代码如下。

XHTML

<style> body,ul,li{ margin:0; padding:0; } ul{ list-style:none; } ul>li{ margin:20px 0; } </style> <ul> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  body,ul,li{
    margin:0;
    padding:0;
  }
  ul{
    list-style:none;
  }
  ul>li{
    margin:20px 0;
  }
</style>
<ul>
  <li>1111111111</li>
  <li>2222222222</li>
  <li>3333333333</li>
</ul>

效果如图 1.1

图片 10

从图1.1中可以看到3行数字的垂直外边距都是一样的。如果没有这个特性,第一行数字与下面两行数字的外边距就不一样了,因为我们给每个li都设置了一个上下外边距,假如没有外边距折叠,那么第1个li的下边距加上第2个li的上边距,就是两倍的间距了,但是第一个li上面没有其他元素,所以它只有一个上边距,最终导致的结果就是,第1个li和后面的几个li的外边距不一样,这显然不是我们所希望的。而margin外边距折叠功能正是要在这种情况下,让格式可以好看一点。

1.1.1 CSS层叠规则

在介绍CSS层叠规则之前首先举个例子,代码如下。

JavaScript

<style> .box{ color:red; font-size:18px; } </style> <div class="box"> <a href="#">层叠</a> </div>

1
2
3
4
5
6
7
8
9
<style>
  .box{
    color:red;
    font-size:18px;
  }
</style>
<div class="box">
  <a href="#">层叠</a>
</div>

结果如图1.2所示:

图片 11

按理说颜色是可以继承的,那么为什么a标签的颜色没有变成红色呢?审查一下元素,如图1.3所示。

图片 12

从图1.3中可以看到继承的颜色被划掉了,出现这个问题的原因是浏览器对a标签设置了默认样式,将继承的样式层叠了,因为继承的样式权重最小。下面介绍CSS关于层叠规则是怎么计算的。

在CSS中一个样式可能会来自不同的地方,分别是作者,用户以及用户代理。那么问题来了,如果在这几份样式中,他们对同一个元素的同一个属性做了不同的操作,那么用户代理应该如何处理这段CSS呢?举个例子,代码如下。

JavaScript

/* 作者 */ .box{ color:red; } /* 用户代理 */ .box{ color:green; } /* 用户 */ .box{ color:pink; }

1
2
3
4
5
6
7
8
9
10
11
12
/* 作者 */
.box{
  color:red;
}
/* 用户代理 */
.box{
  color:green;
}
/* 用户 */
.box{
  color:pink;
}

可以看到用户代理以及用户的代码和作者写的样式起冲突了,而CSS的层叠规则就是为了解决这些问题的,以下是一些CSS层叠规则。

在层叠中每个样式规则都有一个权重值,当其中几条规则同时生效时,权重值最大的规则优先。一般来说作者指定的样式权重值高于用户样式权重值,用户样式权重值高于客户端(用户代理)权重值。

四、响应式布局

前面说过,Bulma 有五个宽度断点,分别是 mobile(手机)、tablet(平板)、desktop(桌面)、widescreen(宽屏)、fullHD(高清)。

columns布局默认是在手机上垂直堆叠,其他宽度都是平铺。如果希望手机也保持平铺,可以加上is-mobile修饰类。

JavaScript

<div class="columns is-mobile"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>

1
2
3
4
5
6
    <div class="columns is-mobile">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>
    </div>

如果希望手机和平板是垂直堆叠,其他宽度平铺,可以使用is-desktop修饰类。

JavaScript

<div class="columns is-desktop"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>

1
2
3
4
5
6
    <div class="columns is-desktop">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>
    </div>

如果希望在不同设备,网格占据不同的宽度,可以像下面这样写。

JavaScript

<div class=" column is-half-mobile is-one-third-tablet is-one-quarter-desktop "> </div

1
2
3
4
5
6
7
<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div

上面代码中,这个网格在手机上占据二分之一宽度,平板三分之一宽度,桌面四分之一宽度,宽屏和高清则是平铺。

Bulma 允许为不同设备指定不同的布局。

JavaScript

<div class=" column is-flex-mobile is-inline-tablet is-block-desktop "> </div>

1
2
3
4
5
6
<div class="
      column
      is-flex-mobile
      is-inline-tablet
      is-block-desktop
    ">  </div>

上面代码中,手机是 flex 布局,平板是 inline 布局,其他宽度是 block 布局。

下面是隐藏某个项目的修饰类。

  • is-hidden-mobile:只在手机隐藏
  • is-hidden-tablet-only:只在平板隐藏
  • is-hidden-desktop-only :只在桌面隐藏
  • is-hidden-touch:手机和平板隐藏,其他宽度显示

完整的清单请看官方文档。

8. 通过display将元素彻底隐藏

JavaScript

div{display:none;}

1
div{display:none;}

元素会被隐藏,并且不占位置。

CSS 框架 Bulma 教程

2017/10/26 · CSS · Bulma

原文出处: 阮一峰   

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。

Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架—-Bulma。有了它,即使完全不懂 CSS,也可以轻而易举做出美观的网页。

图片 13

我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站,本文结尾有他们的简介,最近想换工作的朋友可以看一下。

场景一:

如图1.18所示,图中的内容一旦超过了浮动元素的高,那么这些文本就会与图片左对齐,这种效果并不是我们想要的。我们想要的效果,如图1.19所示。

图片 14

图1.18 实际不理想的效果

图片 15

图1.19 预期理想的效果

如果知道图片的宽度,那么解决这个问题也很简单,给这段文本添加一个左边距即可,但如果图片使用的是百分比,那么就无能为力了,而如果使用calc函数可以很好地解决这个问题,代码如下。

JavaScript

<style> .box img{ width:50%; float:left; } .box p{ margin-left:calc(50% 10px); } </style> <div class="box"> <img src="psb.jpg" alt=""> <p>......</p> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .box img{
        width:50%;
        float:left;
    }
    .box p{
        margin-left:calc(50% 10px);
    }
</style>
<div class="box">
    <img src="psb.jpg" alt="">
    <p>......</p>
</div>

利用calc函数更改代码后的效果如图1.20所示

图片 16

图1.20 利用calc函数的效果

三、网格体系

Bulma 的网格体系基于 Flex 布局,写起来非常容易。最简单的用法就是使用columns指定容器,使用column指定项目。

图片 17

JavaScript

<div class="columns"> <div class="column">First column</div> <div class="column">Second column</div> <div class="column">Third column</div> <div class="column">Fourth</div> </div>

1
2
3
4
5
6
<div class="columns">
      <div class="column">First column</div>
      <div class="column">Second column</div>
      <div class="column">Third column</div>
      <div class="column">Fourth</div>
</div>

屏幕宽度大于 768px 时,所有项目平铺,平分容器的宽度;宽度小于等于 768px 时,所有项目变成垂直堆叠。

图片 18

以下的修饰类用来指定项目的宽度。

  • 四分之三:is-three-quarters
  • 四分之一: is-one-quarter
  • 三分之二:is-two-thirds
  • 三分之一:is-one-third
  • 二分之一:is-half
  • 五分之四:is-four-fifths
  • 五分之三:is-three-fifths
  • 五分之二:is-two-fifths
  • 五分之一:is-one-fifth

图片 19

此外,还有一些修饰类也非常有用。

  • is-narrow:网格的宽度由内容的宽度决定
  • is-centered:网格内容居中对齐
  • is-gapless:网格之间没有间距

Bulma 也支持12网格体系。

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

图片 20

如果要指定某个网格偏移,可以用is-offset-修饰类。

  • is-offset-one-quarter
  • is-offset-one-fifth
  • is-offset-8
  • is-offset-1
14. 设置margin负值

JavaScript

div{margin-left:-999999px;}

1
div{margin-left:-999999px;}

将元素移出屏幕可视区

场景三:

如果再结合媒体查询,那么就很容易实现一个响应式的布局,代码如下。

<style> .box img{ width:calc(100% / 4 - 40px); margin:20px; float:left; } @media (max-width:600px){ .box img{ width:calc(100% / 2 - 40px); } } </style><code>

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.box img{
width:calc(100% / 4 - 40px);
margin:20px;
float:left;
}
@media (max-width:600px){
.box img{
width:calc(100% / 2 - 40px);
}
}
</style><code>

这段代码表示在屏幕不小于600px时,一行最多可以放4张图片,如果屏幕小于或等于600px时,一行最多只能放两张图片。

1.1.2 为什么“@import”指令需要写在样式表的开头

代码如下。

JavaScript

@import url(style/layer.css); body{ background-color:red; }

1
2
3
4
@import url(style/layer.css);
body{
  background-color:red;
}

“@import”指令之所以需要写在样式表的开头,是因为这样可以使后面的样式能更好地层叠导入进来的样式。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 21 图片 22

2 赞 7 收藏 评论

1.2.4 calc函数

在CSS中,如果需要用计算的功能,那么calc函数将非常有用。calc函数允许进行任何长度值的计算,运算符可以是加( )、减(-)、乘(*)、除(/)等。但需要注意的是,运算符前后都需要保留一个空格,虽然在某些特殊情况下可能不需要,但最好都加上,下面来介绍一些calc函数的使用场景。

11. 通过transform的translate函数来隐藏一个元素

JavaScript

div{transform:translate(-99999px);}

1
div{transform:translate(-99999px);}

left:-99999px;原理一样,把元素移出屏幕可视区。

12. 将元素的缩放设成0

JavaScript

transform:scale(0);

1
transform:scale(0);

看不见我,看不见我。

1.1.1 在CSS中为什么要有层叠

在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者、用户、用户代理样式冲突。

  • 模块化

一个页面中的样式可以拆分成多个样式表,代码如下。

JavaScript

@import url(style/base.css); @import url(style/layer.css);

1
2
@import url(style/base.css);
@import url(style/layer.css);

但这种方式也会随之产生一个问题,即如果对某个元素的同一个属性设置样式,到底应用谁的呢?

  • 作者/用户/用户代理

当作者(写代码的人)和用户(浏览页面的人),以及用户代理(一般指浏览器)都能更改样式表时,也会产生同样的问题:究竟用谁设置的样式,因此CSS层叠机制就显得格外重要。

2. 将元素的opacity:0;设置成0

JavaScript

div{opacity:0;}

1
div{opacity:0;}

元素本身还在,只是看不见而已

JavaScript

div{ opacity:0; filter:alpha(opacity:0); }

1
2
3
4
div{
    opacity:0;
    filter:alpha(opacity:0);
}
1.2.2 玩转CSS选择器
1.1.6 CSS的命名

在代码复用时,也许你写过类似以下这样的代码,代码如下

JavaScript

size-10{ font-size:10px; }

1
2
3
size-10{
font-size:10px;
}

虽然这段代码看起来没什么问题,但如果考虑到可维护性,那就有很大问题了。假如有一天你不想用10px,想改成12px,也许你会想再加一个class就行了,修改后的代码如下

JavaScript

size-10{ font-size:10px; } size-12{ font-size:12px; }

1
2
3
4
5
6
size-10{
    font-size:10px;
}
size-12{
    font-size:12px;
}

但那些页面中原本用的size-10的class都得修改成size-12,所以不建议这么修改代码。笔者建议用语义的方式命名,代码如下

JavaScript

.size-small{ font-size:12px; }

1
2
3
.size-small{
  font-size:12px;
}

这样写代码的好处是当需要调整字体大小时,只需修改一处,而不必修改添加到元素上的class。也就是说不要按照显示的效果命名,而是根据这个class的用意命名。

遇见未知的 CSS

2017/06/11 · CSS · CSS

本文作者: 伯乐在线 - 追梦子 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

摘录自《CSS核心技术详解》

6. 通过给元素设置overflow来隐藏元素

CSS

div{ width:100px; height:100px; overflow:hidden; }

1
2
3
4
5
div{
    width:100px;
    height:100px;
    overflow:hidden;
}

如果元素超出所设置的宽和高,溢出的部分就会被隐藏。如果想让整个元素隐藏,将元素的宽和高设置成0即可。经常通过这种方式将超出的文字隐藏,代码如下

5. 通过z-index隐藏一个元素

JavaScript

<style> .box{ position:relative; } .box .item{ position:absolute; left:0; top:0; width:100px; height:100px; border:1px solid red; z-index:-1; } .box .item:first-of-type{ z-index:1; } </style> <div class="box"> <div class="item">程序员</div> <div class="item">设计师</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
   .box{
       position:relative;
   }
   .box .item{
       position:absolute;
       left:0;
       top:0;
       width:100px;
       height:100px;
       border:1px solid red;
       z-index:-1;
   }
   .box .item:first-of-type{
   z-index:1;
   }
</style>
<div class="box">
<div class="item">程序员</div>
<div class="item">设计师</div>
</div>

但你会发现文字被“透”上来了,效果如图

图片 23

因为默认的背景设置是透明的,并且允许下面的元素“透”上来,想解决这个问题很简单,就是给元素添加一个背景,代码如下。

CSS

.box .item{ position:absolute; left:0; top:0; width:100px; height:100px; border:1px solid red; background-color:#fff; z-index:-1; }

1
2
3
4
5
6
7
8
9
10
.box .item{
        position:absolute;
        left:0;
        top:0;
        width:100px;
        height:100px;
        border:1px solid red;
        background-color:#fff;
        z-index:-1;
}

设置完成后,效果如图

图片 24

1. 通过设置 width:0; 或 height:0; 隐藏一个元素

JavaScript

div{width:0;}

1
div{width:0;}

JavaScript

div{height:0;}

1
div{height:0;}

一个物体是由宽和高组成的,那么至少这个物体得有宽和高,这种方式的缺点是隐藏不了文字。可以将元素的color设置成与背景色一样的颜色,这样就看不见了。也可以设置成透明色(transparent),但问题是它们的内容还是存在的,所以需要将文字的大小设置成0,代码如下

JavaScript

div{font-size:0;}

1
div{font-size:0;}

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:相见未知的

关键词: