CSS 框架 Bulma 中文文档(翻译)

前言

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架Bulma。有了它,即使完全不懂 CSS,也可以轻而易举做出美观的网页。

Get Start

我们可以使用多种方式来引入并使用bulma:

1
npm install bulma

OR

使用CDN的方式:https://cdnjs.com/libraries/bulma

OR

下载css样式并引入,下载地址:https://github.com/jgthms/bulma/tree/master/css

如果你要使用图标请记得引入fontawesome

1
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

引入后还需要一些HTML格式上的要求:

  1. 使用HTML5 Doctype
1
<!DOCTYPE html>
  1. 设置viewport Meta标签
1
<meta name="viewport" content="width=device-width, initial-scale=1">

Web前端基础(21)HTML5的其他标签和补充

文本标记

p是最常用的文本标记之一,要在网页中表示段落就需要用p标签。

small和strong

small表示细则一类旁注,通常包括免责声明、注意事项、法律版本、版权信息等。small通常是行内文本中的一小块,而不是包含多个段落或其他元素的大块文本。

1
2
3
4
5
6
7
<p>Order now to receive free shipping. <small>(Some restrictions may apply.)</small></p>

<p>...</p>

<footer>
<p><small>&copy; 2013 The Super Store. All Rights Reserved.</small></p>
</footer>

strong表示内容的重要性,而em表示内容的着重点。根据内容需要,这两个元素可以单独使用,也可以一起使用。

1
2
<p><strong>Warning: Do not approach the zombies <em>under any circumstances</em></strong>. They may <em>look</em>
friendly, but that's just because they want to eat your arm.</p>

浏览器通常将strong文本以粗体显示,而将em文本以斜体显示,如果em是strong的子元素,将同时显示粗体和斜体。

注意:不用使用b元素代替strong,也不要使用i元素代替em。尽管他们在浏览器中显示的样式是一样的,但是含义却不一样。可以在strong中嵌套strong,em中嵌套em,来说明更加重要。

Web前端基础(20)HTML5基本结构

基本HTML结构

每个HTML文档都应该包含一下几个组成部分:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> 是声明页面为HTML5文档,在HTML4和XHTML1.0时代,有好几种DOCTYPE,每一种都会指明HTML的版本,以及使用的是过度型还是严格型模式,太难记了,所以每次都需要复制黏贴进来,现在所有浏览器都理解这种简单的HTML5的DOCTYPE,所以可以忘记过去复杂繁琐的DOCTYPE了。

<html lang=”en”> 是声明了页面默认语言。

&ltmeta charse=”UTF-8”> 是声明了文档的字符编码。

Web前端基础(19)jQuery对文本框和表单的操作

单行文本框

首先在网页中创建一个表单,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input:focus, textarea:focus{
border:1px solid #f00;
background: #fcc;
}
</style>
</head>
<body>
<form action="#" method="POST" id="regForm">
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text"></label>
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password"></label>
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg"></textarea>
</div>
</form>
</body>
</html>
个人基本信息

但是IE6并不支持除超链接元素之外的:hover伪类选择器,此时可以用jQuery来弥补。

Web前端基础(18)jQuery中的动画

show()和hide()

show()和hide()是jQuery中最基本的动画方法,该动画操作了display:none;

1
2
3
4
5
6
7
$(function(){
$("#panel").toggle(function(){
$(this).next().hide();
}, function(){
$(this).next().show();
})
})

show()和hide()可以传入动画执行毫秒数或者传入“nomal”, “slow”, “fast”关键字控制速度。

fadeIn()和fadeOut()

fadeIn()和fadeOut()只是改变透明度。

slideUp()和slideDown()

slideUp()和slideDown()只会改变元素的高度(由上到下展开, 由下到上收起)。

自定义动画animate()

1
animate(params, speed, callback);

参数说明:
params: 一个包含样式属性和值的映射
speed:速度参数,可选
callback:动画完成时执行的函数,可选

1
2
3
4
5
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"}, 3000);
})
})

Web前端基础(17)jQuery中的事件

事件绑定

1
bind(type[, data], fn);

第一个参数是绑定的事件类型,第二个参数可选是额外数据对象,第三个参数是处理函数。

在文档装载完成后,可以使用bind()方法来对元素绑定特定的事件,可以绑定的事件有:

事件说明
blur元素失去焦点
focus元素获得焦点
load一张页面或一幅图像完成加载。
resize重置按钮被点击
scroll滚动事件
unload用户退出页面
click点击事件
dblclick双击事件
mousedown鼠标按键按下
mouseup鼠标按键抬起
mousemove鼠标被移动
mouseover鼠标移到某个元素上
mouseout鼠标从某个元素上移开
mouseenter鼠标进入某个元素
mouseleave鼠标离开某个元素
change域的内容被改变
select文本被选中
submit确认按钮被点击
keydown键盘按下
keypress某个键盘按键被按下并松开。
keyup某个键盘按键被松开
error在加载文档或图像时发生错误。

Web前端基础(16)jQuery操作HTML属性和元素

属性操作

在jQuery中,用attr()方法来获取和设置元素的属性,用removeAttr()方法来删除元素属性。

attr()方法使用示例

1
2
3
4
5
6
7
var $para = $("p");
//获取
var p_text = $para.attr("title");
//设置
$para.attr("title", "dp2px");
//可以一次修改多个属性
$para.attr({"title":"dp2px", "name":"地痞兔劈叉"});

removeAttr()方法使用示例

1
$("p").removeAttr("title");

样式操作

1
<p class="myclass" title="dp2px">地痞兔劈叉</p>

上面代码中,class其实也是p元素的一个属性,因此可以用attr()方法获得和设置class的内容。jQuery提供了一个addClass()方法来追加class值。提供了removeClass()来移除class值。

1
2
$("p").addClass("another");
$("p").removeClass("another");

jQuery中还提供了一个toggleClass()方法来实现单机切换(添加和删除)操作

另外判断是否有某个class值用方法hasClass()来判断。

Web前端基础(15)jQuery选择器和DOM操作

jQuery是JavaScript中使用最广泛的一个库,它可以帮助我们简化js代码,更好的完成工作。

痛点

javascript遇到的一些痛点:

  • window.onload 事件有个覆盖问题,我们只能写一个
  • 代码容错性差
  • 浏览器兼容性问题
  • 书写很繁琐,代码量多
  • 代码很乱,各个页面到处都是
  • 动画效果,我们很难实现

版本

目前jQuery有三个大版本:

  • 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)

  • 2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

  • 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.3.1

引入

使用jQuery只需要在页面的

引入jQuery文件即可

1
2
3
4
5
6
7
8
9
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
...
</head>
<body>
...
</body>
</html>
Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×