提交 3ef10ea5 编写于 作者: C codecalm

html small fixes

上级 0198984c
......@@ -16,7 +16,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
## Status
<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg" /></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
## Features
......
......@@ -7,7 +7,7 @@
color = $this.attr('data-spark-color') || 'blue',
type = $this.attr('data-spark-type') || 'line';
const $div = $('<div />').html(data);
const $div = $('<div/>').html(data);
$this.append($div);
let strokeColor = tabler.colors[color],
......
......@@ -12,9 +12,9 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
{% example html wrapper=btn-list %}
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" />
<input type="reset" class="btn btn-primary" value="Reset" />
<input type="button" class="btn btn-primary" value="Input"/>
<input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-primary" value="Reset"/>
{% endexample %}
### Button variations
......
......@@ -34,5 +34,5 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
You can also use native HTML5 `<progress>` element.
{% example html %}
<progress class="progress progress-sm" value="15" max="100" />
<progress class="progress progress-sm" value="15" max="100"/>
{% endexample %}
......@@ -21,23 +21,23 @@ description: Documentation and examples for common text utilities to control ali
### Semantic text elements
{% example %}
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br /></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br /></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br /></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br /></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br /></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br /></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br /></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br /></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br /></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br /></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br /></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br /></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br /></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br /></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br /></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide>
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
{% endexample %}
### Horizontal rules
......
{% if site.data.libs %}
<!-- Libs CSS -->
{% for lib in site.data.libs.css %}
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
{% endfor %}
{% endif %}
<!-- Tabler Core -->
<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
......@@ -26,7 +26,7 @@
<div class="col-auto ml-auto">
{% if page.page-title-actions == 'users' %}
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" />
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
</div>
{% elsif page.page-title-actions == 'calendar' %}
......
<fieldset class="form-fieldset">
<div class="mb-3">
<label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" />
<input type="text" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" />
<input type="text" class="form-control" autocomplete="off"/>
</div>
<div class="mb-3">
<label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control" autocomplete="off" />
<input type="email" class="form-control" autocomplete="off"/>
</div>
<div class="">
<label class="form-label">Phone number</label>
<input type="tel" class="form-control" autocomplete="off" />
<input type="tel" class="form-control" autocomplete="off"/>
</div>
</fieldset>
<div class="mb-3">
<label class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" placeholder="Type to search..." />
<input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
<datalist id="datalistOptions">
{% for country in site.data.countries limit: 10 %}
<option value="{{ country | escape }}" />{% endfor %}
<option value="{{ country | escape }}"/>{% endfor %}
</datalist>
</div>
......@@ -5,7 +5,7 @@
{% for photo in site.data.photos limit: limit offset: 30 %}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="imagecheck mb-2">
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %} />
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="imagecheck-figure">
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
</span>
......
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off" />
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>
<!doctype html>
{% include_cached layout/banner.html %}
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
<html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
......
......@@ -17,7 +17,7 @@ done: true
<li class="d-flex align-items-center mb-3">
<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
<div>
<strong>{{ color[1].name }}</strong><br />
<strong>{{ color[1].name }}</strong><br/>
<code>.bg-{{ color[0] }}</code>
</div>
</li>
......@@ -39,7 +39,7 @@ done: true
<li class="d-flex align-items-center mb-3">
<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
<div>
<strong>{{ color[1].name }} lite</strong><br />
<strong>{{ color[1].name }} lite</strong><br/>
<code>.bg-{{ color[0] }}-lt</code>
</div>
</li>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册