随笔分类 - Semantic-UI
摘要：设置disabled，可以在两个地方设置，一个是在外层的div上面设置，一个是在input checkbox里面设置。 设置checked，只能在input checkbox中设置。 默认未选中，且禁止修改 观察效果会发现，虽然这两个复选框不可以更改选中状态，但是，当鼠标移动到复选框上时，复选框仍然
阅读全文
摘要：模态窗口即加了ui modal的class的div而已，会有点像是alert弹出框的形式，但是美观一点点。
阅读全文
摘要：注意：在使用semantic的下拉框的时候，不仅需要引入semantic.css，还要引入semantic.js，最重要的是引入jquery。否则下拉效果不会显示。 并且，jquery必须先于semantic.js引入，因为semantic.js需要用到jquery。 1、标准的下拉框 2、搜索功能
阅读全文
摘要：1、定义表单 先看一个基础的表单，再讲解一下： semantic中的表单，其实就是在form标签中加一个ui form的class即可 下面的使用div将input包含主要是为了好理解，其中的filed的class标识的是表单项的宽度，和grid的column一样，最大值支持sixteen。 需要注
阅读全文
摘要：1、标准输入框 semantic-ui中定义输入框需要将input标签包含于另外一个标签内，外层标签的class为ui input，注意外层标签可以是div，span、p、i。 2、改变输入框的状态 focus表示选中（活跃），disabled表示禁用，error表示出错。 3、图标与输入框配合使用
阅读全文
摘要：semantic中可以指定one-sixteen这16个单词来指定网格column所占的长度。也就是说，在网页中，一行最多只有16个column，超过16个之后，自动移到下一行。 栅格可以使用i，div，span标签，尽量不要使用button和p标签 1、定义栅格 注意，单独将标签的class设置为
阅读全文
摘要：分段：用于创建一组相关联的内容。 1、创建一个基础的分段 在class中加一个segment的class即可 2、使分段突出 注意不要加active，应该加一个raised，和segment配合使用。 3、堆叠样式的分段 只有一个分段，但是看起来分段下面还有很多分段。需要加上tall stacked
阅读全文
摘要：分割线即原生html中的<hr>标签。不过semantic-ui中将<hr>美化了一下下。 1、基础分割线 需要注意的是分割线只能使用div标签和p标签，不能使用span标签。 2、定义水平线 经常看到水平线的中间有文字，其实可以使用下面代码实现，但是要注意class中加horizontal，并且要
阅读全文
摘要：1、基础样式 方式一：因为图片是使用img标签，所以直接将class加载img标签中即可。不过要注意的是，class中要指定是ui image。 方式二：使用一个span或者div将img标签包裹，然后ui image的class加载div或者span里面，img中只写一个src即可 2、设置大小
阅读全文
摘要：在semantic-ui中定义了5中标题样式，注意HTML中有h1-h6，而semantic-ui中只有h1-h5。 不过需要注意的是，semantic-ui的标题仍旧使用h1-h5来表示，但是在class中可以指定大小。 1、基础标题样式 2、设置标题大小 首先可以通过选择h1-h5对应的大小来表
阅读全文
摘要：semantic-ui提供了很多的图标，基本常用的在官网上面都能找到。要想记住这么多图标是不可能的，但是也是有简便方法记忆。 首先，图标其实和按钮的区别基本没有，要说有的话，也就是基础样式的大小不同吧，按钮较大一点，当然也是可以加大小的值来设置。 学习semantic的图标有这个简洁方法： 1、图标
阅读全文
摘要：1、基础按钮： 使用button、div、span、i等标签，将其class设置为"ui button"，显示的就是最基础的按钮样式。 2、设置按钮颜色 直接在class中加对应的颜色即可，注意不能加#112233这种颜色值。 3、设置按钮的大小 semantic一共提供了8种大小值，分别是mini
阅读全文
