# hltui

**Repository Path**: hulitong/hltui

## Basic Information

- **Project Name**: hltui
- **Description**: hlt-ui是自己平时参考其他流行的框架，组装编写自己的前端web框架。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-04-14
- **Last Updated**: 2022-10-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, CSS, JavaScript

## README

# hlt-ui 组件

#### 介绍
hlt-ui是参考Bootstrap、h-ui等其他流行的框架，组装编写自己的前端web组件。

组件主要引用两个css文件（用less写的）和一个js文件（没有引入第三方插件）：

1. BaseStyle.css
2. ComponentStyle.css
3. common.js

#### 全局样式

1.  排版
2.  布局
3.  栅格系统
4.  媒体查询
5.  按钮


##### 排版
参考Bootstrap框架


##### 栅格系统

栅格系统用于通过一系列的行row（.hlt-row）与列column（.hlt-col）的组合来创建页面布局。

简单的通过布局实现美化页面，所有的行row（.hlt-row）与列column（.hlt-col）都必须放在容器里（.hlt-container）。

~~~html
<div class="hlt-container">
    <div class="hlt-row">
        <div class="hlt-col-4">
            列一
        </div>
        <div class="hlt-col-4">
            列二
        </div>
        <div class="hlt-col-4">
            列三
        </div>
    </div>
</div>
~~~


##### 媒体查询（medio）

在特定的开发环境中不用响应适配屏幕时，可以使用：
hlt-col 

要求适配不同终端屏幕可以使用媒体查询：

hlt-ui参考bootstrap的媒体查询也进行了简单的划分：

hlt-col-xs(width<768px) 

hlt-col-sm(769px<width<970px) 

hlt-col-md(970px<width<1200px) 

hlt-col-lg(width>1200px)

~~~css

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

~~~


##### 字体

##### 按钮

按钮按颜色类型开分为：default(默认)、primary（主要）、secondary（次要）、success（成功）、warning（警告）、info（信息）、error（错误）

按钮按尺寸大小可分为：sm、lg、

<button class="hlt-btn">按钮</button>   

<button class="hlt-btn hlt-btn-default">default按钮</button>  

<button class="hlt-btn hlt-btn-primary">primary按钮</button>  

<button class="hlt-btn hlt-btn-success">success按钮</button>  

<button class="hlt-btn hlt-btn-info">info按钮</button>

<button class="hlt-btn hlt-btn-warning">info按钮</button>

<button class="hlt-btn hlt-btn-error">error按钮</button>


将全文所有的字体设置为13像素

`font-size:13px`



#### 组件

1.  面板（hlt-panel）
2.  表格（hlt-table）
3.  列表 （hlt-list）
4.  选项卡 （hlt-tab）
5.  表单 （hlt-form）
6.  按钮  （hlt-button）
7.  折叠  （hlt-fold）

##### 面板（hlt-panel）

~~~html

<div class="hlt-panel hlt-panel-primary">
    <div class="hlt-panel-header">
        title
    </div>
    <div class="hlt-panel-body">
         content         
    </div>
</div>

~~~

##### 选项卡 （hlt-tab）

~~~html
<div class="hlt-tab">
    <ul class="hlt-tabbar">
        <li class="hlt-tab-title current">选项卡一</li>
        <li class="hlt-tab-title">选项卡二</li>
        <li class="hlt-tab-title">选项卡三</li>
    </ul>
    <div class="hlt-tab-content hlt-tab-active">选项卡一concent</div> 
    <div class="hlt-tab-content">选项卡二concent</div> 
    <div class="hlt-tab-content">选项卡三concent</div> 
</div>
~~~

##### 折叠 （hlt-fold）

~~~html
<ul class="hlt-fold">
    <li class="hlt-fold-list">
        <h4 class="hlt-fold-title">
            <span>管理员</span>
            <span>></span>
        </h4>
        <div class="hlt-fold-content">
            <ul class="hlt-subfold">
                <li class="hlt-subfold-item">管理员列表</li>
                <li class="hlt-subfold-item">管理员列表</li>
                <li class="hlt-subfold-item">管理员列表</li>
            </ul>
        </div>
    </li>
    
    <li class="hlt-fold-list">
        <h4 class="hlt-fold-title">
            <span>管理员</span>
            <span>></span>
        </h4>
        <div class="hlt-fold-content">
            <ul class="hlt-subfold">
                <li class="hlt-subfold-item">管理员列表</li>
                <li class="hlt-subfold-item">管理员列表</li>
                <li class="hlt-subfold-item">管理员列表</li>
            </ul>
        </div>
    </li>
    <li class="hlt-fold-list">
        <h4 class="hlt-fold-title">
            <span>管理员</span>
            <span>></span>
        </h4>
        <div class="hlt-fold-content">
            <ul class="hlt-subfold">
                <li class="hlt-subfold-item">管理员列表</li>
                <li class="hlt-subfold-item">管理员列表</li>
                <li class="hlt-subfold-item">管理员列表</li>
            </ul>
        </div>
    </li>
</ul>
~~~

##### 表单  （hlt-form）

~~~html
<form action="" class="hlt-form">
    <div class="hlt-form-group">
        <label for="" class="hlt-form-label">用户名：</label>
        <div class="hlt-form-input">
            <input type="text" class="input-text">
        </div>
    </div>

    <div class="hlt-form-group">
        <label for="" class="hlt-form-label">密码：</label>
        <div class="hlt-form-input">
            <input type="password" class="input-text">
        </div>
    </div>

    <div class="hlt-form-group">
        <label for="" class="hlt-form-label">手机号码：</label>
        <div class="hlt-form-input">
            <input type="tel" class="input-text">
        </div>
    </div>

    <div class="hlt-form-group">
        <label for="" class="hlt-form-label">邮箱：</label>
        <div class="hlt-form-input">
            <input type="email" class="input-text">
        </div>
    </div>

    <div class="hlt-form-group">
        <label for="" class="hlt-form-label">姓名：</label>
        <div class="hlt-form-input">
            <input type="text" class="input-text">
        </div>
    </div>

    <div class="hlt-form-group">
        <label for="" class="hlt-form-label">身份证号码：</label>
        <div class="hlt-form-input">
            <input type="number" class="input-text">
        </div>
    </div>

    <div class="hlt-form-group">
        <label for="" class="hlt-form-label">银行卡号：</label>
        <div class="hlt-form-input">
            <input type="number" class="input-text">
        </div>
    </div>

    <div class="hlt-form-group">
        <label for="" class="hlt-form-label">批注：</label>
        <div class="hlt-form-input">
            <textarea name="remarks" class="input-text" cols="30" rows="10"></textarea>
        </div>
    </div>

    <div class="hlt-form-group">
        
        <div class="hlt-form-input">
            <input type="button" value="提交">
        </div>
    </div>
</form>
~~~


##### 表格  (hlt-table)

~~~html
<table class="hlt-table hlt-text-c">
    <thead>
        <tr class="text-c">
            <th>title1</th>
            <th>title1</th>
            <th>title1</th>
            <th>title1</th>
            <th>title1</th>
            <th>title1</th>
            <th>title1</th>
        </tr>
    </thead>  
    <tbody>
        <tr>
            <td>php</td>
            <td>flutter</td>
            <td>javascript</td>
            <td>csss</td>
            <td>html</td>
            <td>nodeJs</td>
            <td>
                <a href="#">编辑</a>
                <a href="#">删除</a>
            </td>
        </tr>
        <tr>
        <td>php</td>
        <td>flutter</td>
        <td>javascript</td>
        <td>csss</td>
        <td>html</td>
        <td>nodeJs</td>
        <td>
            <a href="#">编辑</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td>php</td>
        <td>flutter</td>
        <td>javascript</td>
        <td>csss</td>
        <td>html</td>
        <td>nodeJs</td>
        <td>
            <a href="#">编辑</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td>php</td>
        <td>flutter</td>
        <td>javascript</td>
        <td>csss</td>
        <td>html</td>
        <td>nodeJs</td>
        <td>
            <a href="#">编辑</a>
            <a href="#">删除</a>
        </td>
    </tr>
    </tbody>    
</table>
~~~

#### 辅助类 

##### 文本颜色

添加.text-white、.text-black、.text-primary、.text-success、.text-warnnig类，可以快速的给想要的内容添加文本颜色或者链接颜色

~~~css

.text-white {
    color: white !important;
}

.text-black {
    color: black !important;
}

.text-primary {
    color: lightgrey !important;
}

.text-success {
    color: darkgreen !important;
}

.text-warnnig {
    color: darkorange !important;
}

.text-danger {
    color: red !important;
}

~~~

##### 背景颜色

同文本颜色一样，可以快速的给想要的内容添加背景颜色

~~~css

.bg-white {
    background-color: white !important;
}

.bg-black {
    background-color: black !important;
}

.bg-primary {
    background-color: lightgrey !important;
}

.bg-success {
    background-color: darkgreen !important;
}

.bg-warnnig {
    background-color: darkorange !important;
}

.bg-danger {
    background-color: red !important;
}

~~~

##### 浮动

通过添加.fl、.fr类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。

~~~css
.fl {
    float: left!important;
}

.fr {
    float: right!important;
}
~~~

##### 清除浮动

通过添加.clearfix()类可以快速清除浮动。

~~~css
.clearfix() {
    &:before,
    &:after {
      content: " ";
      display: table;
    }
    &:after {
      clear: both;
    }
}
~~~

##### 显示和隐藏

.show 和 .hidden 类可以强制任意元素显示或隐藏

~~~css
.show {
    display: block !important;
}
.hidden {
    display: none !important;
}

~~~

#####  布局和居中

通过添加 .hlt-text-l 、.hlt-text-c 、.hlt-text-r类,可以直接使
文本向左、居中、向右排列布局。

```css
.hlt-text-l{
    text-align: left;
}
.hlt-text-c{
    text-align: center;
}
.hlt-text-r{
    text-align: right;
}
```

##### 三角形

使用.triangle(bottom/top/left/right,40px,#ccc)可以做出不同方向的三角形

```css
// 三角形
.sjx-1{
    .triangle(bottom,40px,#ccc)
}
.sjx-2{
    .triangle(top,40px,rgb(141, 41, 41))
}
.sjx-3{
    .triangle(left,40px,rgb(140, 58, 196))
}
.sjx-4{
    .triangle(right,40px,rgb(25, 161, 55))
}
```