vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面

原创 已于 2022-12-29 22:11:20 修改 · 2.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #前端 #javascript #vue.js #HTML

于 2022-07-31 00:58:45 首次发布

效果图

完整代码

里面有注释，看不懂的翻官方手册 https://cn.vuejs.org/v2/guide/

./index.php

<?php 
$file = __DIR__ . '/data.json';
$list_jsoned = (file_exists($file))? file_get_contents($file):'[]';
?>
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue搜题 - Rudon</title>
    <link rel="shortcut icon" type="image/x-icon" href="/core/tpl/logo.png" />
    <link href="//lib.sinaapp.com/js/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自动换行 */
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        
        ::-webkit-input-placeholder { /* WebKit browsers */ 
            color: #DDD; 
        } 
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
            color: #DDD; 
        } 
        ::-moz-placeholder { /* Mozilla Firefox 19+ */ 
            color: #DDD; 
        } 
        :-ms-input-placeholder { /* Internet Explorer 10+ */ 
            color: #DDD; 
        }


        /* 手指指 */
        .cursorPointer {
            cursor: pointer;
        }
        .weightBold {
            font-weight: bold;
        }
        .underline {
            text-decoration: underline;
        }
        .paddingCol10 {
            padding: 10px 0;
        }
        .paddingBottom30 {
            padding-bottom: 30px;
        }
        .bgColorWhite {
            background-color: white;
        }
        .padding10 {
            padding: 10px;
        }
        .fontSize12 {
            font-size: 12px;
        }
    </style>
</head>
 
<body style="background: linear-gradient(to bottom, #E4EFE0 0%, #FFFFFF 90%); min-height: 90vh;">
 
    <div id="vuebox">
        <div class="container">
             
             <!--fixed-top-->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">
                    Vue搜题
                </a>
                <a class="navbar-brand" href="./questions/">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
  <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
  <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
 
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        
                        <li class="nav-item dropdown fontSize12">
                            <a class="nav-link dropdown-toggle" href="#" id="nd1" role="button" data-toggle="dropdown">
                                {{ title_showtype }}
                            </a>
                            <div class="dropdown-menu" aria-labelledby="nd1">
                                <a class="dropdown-item cursorPointer" @click="show_type = 1">
                                    显示题目+答案
                                </a>
                                <a class="dropdown-item cursorPointer" @click="show_type = 0">
                                    只显示题目
                                </a>
                            </div>
                        </li>
                        
                    </ul>
                    <div class="form-inline my-2 my-lg-0">
 
                        <!--搜索模式-->
                        <ul class="navbar-nav">
                        
                            <li class="nav-item dropdown mr-4 fontSize12">
                                <a class="nav-link dropdown-toggle" href="#" id="nd2" role="button" data-toggle="dropdown">
                                    {{ title_searchmode }}
                                </a>
                                <div class="dropdown-menu" aria-labelledby="nd2">
                                    <a class="dropdown-item cursorPointer" @click="search_mode = 0">
                                        模糊查询
                                    </a>
                                    <a class="dropdown-item cursorPointer" @click="search_mode = 1">
                                        精准查询
                                    </a>
                                </div>
                            </li>
                            
                        </ul>
                        
                        
                        
                        <!--搜索范围-->
                        <ul class="navbar-nav">
                        
                            <li class="nav-item dropdown mr-4 fontSize12">
                                <a class="nav-link dropdown-toggle" href="#" id="nd2" role="button" data-toggle="dropdown">
                                    {{ title_searchtype }}
                                </a>
                                <div class="dropdown-menu" aria-labelledby="nd2">
                                    <a class="dropdown-item cursorPointer" @click="search_type = 0">
                                        只搜索题目
                                    </a>
                                    <a class="dropdown-item cursorPointer" @click="search_type = 1">
                                        搜索题目+内容
                                    </a>
                                </div>
                            </li>
                            
                        </ul>
 
                        
 
                        <input class="form-control mr-sm-2" type="search" placeholder="关键词" v-model="keyword_input" @keyup.enter="seachEnter" @clear="keyword = keyword_input"/>
                        
                        
                        <a class="navbar-nav" @click="keyword = keyword_input">
                            <button>搜索</button> 
                        </a>
                        
                    </div>
                </div>
            </nav>
 
 
 
            <div class="bgColorWhite padding10">
 
                <!-- 遍历 -->
                <div v-for="(item, key) in list" class="paddingBottom30" v-show="showOrNot(key)">
 
                    <!-- 使用v-html来显示带HTML标签的文本 -->
                    <!-- 题目 -->
                    <div v-html="highlight(key,'title')" class="weightBold underline paddingCol10"></div>
 
                    <!-- 答案 -->
                    <pre v-html="highlight(key,'answer')" v-show="show_type"></pre>
 
                </div>
 
            </div>
 
 
        </div>
 
 
        <!-- 隐藏 -->
        <div class="d-none">
 
            <!-- 初始化值，不可直接写进v-model的DOM，会被清空掉 -->
            <textarea id="init_str"><?php echo $list_jsoned; ?></textarea>
 
            <!-- 所有资料的压缩版 -->
            <textarea v-model="list_encoded"></textarea>
 
        </div>
 
    </div>
 
 
    <!-- 不用Bootstrap可以不加载jQuery -->
    <script src="//lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
    <script src="//lib.sinaapp.com/js/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
    <!-- vue核心库 -->
    <script src="//cdn.jsdelivr.net/npm/vue@2"></script>
 
 
    <script>
        // 字符串全部替换 replaceAll
        // https://xercis.blog.csdn.net/article/details/106839160
        String.prototype.replaceAll = function (s1, s2) {
            return this.replace(new RegExp(s1, "gm"), s2);
        };
    </script>
 
 
    <script>
        // 初始化
        var app = new Vue({
            // 制定某个DOM为vue快乐专区
            el: '#vuebox',
 
            // 默认数据
            data: {
                // 搜索关键词
                keyword: '',
                
                // 搜索关键词 - 输入中
                keyword_input: '',
 
                // 列表 （json加密）
                list_encoded: '[]',
                list: [],
 
                // 搜索类型 0=title 1=title+answer
                search_type: 1,
 
                // 显示类型 0=title 1=title+answer
                show_type: 1,
                
                // 搜索模式 0模糊查询 1精准查询
                search_mode: 0,
                
            },
            
            // 自动计算出来的值（响应式数据）
            computed: {
                title_showtype : function () {
                    return (this.show_type)? '显示题目+答案':'只显示题目'
                },
                title_searchtype : function () {
                    return (this.search_type)? '搜索题目+内容':'只搜索题目'
                },
                title_searchmode: function () {
                    return (this.search_mode)? '精准查询':'模糊查询'
                },
                
                search_keywords: function () {
                    let res = []
                    if (this.keyword != '') {
                        res = this.keyword.split('')
                    }
                    return res
                },
                
            },
 
            // onload以后
            mounted: function () {
                // 转换字符串为数组对象 -- 也可以使用jQuery
                this.list_encoded = document.getElementById('init_str').value
 
                // 转换字符串为数组对象
                this.list = JSON.parse(this.list_encoded)
                
            },
 
            // 方法
            methods: {
                // 高亮
                highlight (k, col) {
                    let c = this.list[k][col]
                    let kw = this.keyword
                    
                    if (kw != '') {
                        // 插入高亮标签
                        if (this.search_mode) {
                            // 精准查询
                            c = c.replaceAll(kw, '<font color="red">'+kw+'</font>')
                        
                        } else {
                            // 模糊查询
                            for (let curKW of this.search_keywords) {
                                c = c.replaceAll(curKW, '<font color="red">'+curKW+'</font>')
                            }
                        }
                        
                    }
                    return c
                },
 
                // 显示与否
                showOrNot (k) {
                    if (this.keyword == '') {
                        return true
                    }
 
                    let res = false
                    if (this.search_type) {
                        // 全部搜
                        
                        if (this.search_mode) {
                            // 精准查询
                            if (!res) {
                                if (this.list[k].title.indexOf(this.keyword) !== -1) {
                                    res = true
                                }
                            }
                            if (!res) {
                                if (this.list[k].answer.indexOf(this.keyword) !== -1) {
                                    res = true
                                }
                            }
                        
                        } else {
                            // 模糊查询
                            for (let curKW of this.search_keywords) {
                                if (!res) {
                                    if (this.list[k].title.indexOf(curKW) !== -1) {
                                        res = true
                                    }
                                }
                                if (!res) {
                                    if (this.list[k].answer.indexOf(curKW) !== -1) {
                                        res = true
                                    }
                                }
                            }
                        }
                        
                        
                        return res
 
                    } else {
                        // title only
                        
                        
                        if (this.search_mode) {
                            // 精准查询
                            if (!res) {
                                if (this.list[k].title.indexOf(this.keyword) !== -1) {
                                    res = true
                                }
                            }
                        
                        } else {
                            // 模糊查询
                            for (let curKW of this.search_keywords) {
                                if (!res) {
                                    if (this.list[k].title.indexOf(curKW) !== -1) {
                                        res = true
                                    }
                                }
                            }
                        }
                        
                        
                        return res
                    }
                },
                
                
                
                // 输入框Enter
                seachEnter(e) {
                    var keyCode = window.event ? e.keyCode : e.which;
                    if (keyCode == 13) {
                        this.keyword = this.keyword_input
                    }
                },

                
                
                
                
                
                // Methods结束
            },
 
            
        })
    </script>
 
</body>
 
</html>

./questions/index.php

<?php
$max = 1000;
$file = dirname(__DIR__) .'/data.json';


function a ($var) {
    header('content-type: text/css; charset=utf-8');
    print_r($var);
    die();
}

if (isset($_POST['a1'])) {
    //print_r($_POST);die();
    $tobe = array();
    for ($i = 0; $i < $max; $i++) {
        $t = $_POST['q'.$i];
        $a = $_POST['a'.$i];
        if($t != '' && $a != ''){
            $tobe[] = array(
                'title' => $_POST['q'.$i],
                'answer' => $_POST['a'.$i]
            );
        }
         
    }
    
    file_put_contents($file, json_encode($tobe));
    
    // echo json_encode($tobe);die();
    $backup = dirname(__FILE__) . '/backup/';
    if (!is_dir($backup)) {
        mkdir($backup, 0777, true);
    }
    $backup_file = $backup . date('YmdHis').'.json';
    file_put_contents($backup_file, json_encode($tobe));
}


$list = array();

if (!file_exists($file)) {
    file_put_contents($file, json_encode($list));
}
$list = json_decode(file_get_contents($file), true);

if (count($list) < $max) {
    $left = $max - count($list);
    for ($i = 0; $i < $left; $i++) {
         $list[] = array(
            'title' => '',
            'answer' => ''
        );
    }
}



?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>题目管理</title>
        <link href="./c.css"  rel="stylesheet"/>
    </head>
    <body>
        <form action="" method="post">
            <div class="margin0Auto paddingCol50 fontSize30 text-center maxWidth1000">
                <button type="submit" class="padding30 width100pct">更新</button>
            </div>    
            <div class="margin0Auto maxWidth1000">
                
                <?php foreach ($list as $k=>$one): ?>
                    <!-- html... -->
                <div class="rowSpaceBetween paddingCol20">
                    <div>
                        #<?php echo $k + 1; ?>
                    </div>
                    <div class="width40pct">
                        <textarea name="q<?php echo $k; ?>" id="q<?php echo $k; ?>" rows="3" class="width100pct padding10 radius10" placeholder="题目"><?=$one['title'];?></textarea>
                    </div>
                    <div class="width40pct">
                        <textarea name="a<?php echo $k; ?>" id="a<?php echo $k; ?>" rows="3" class="width100pct padding10 radius10" placeholder="答案"><?=$one['answer'];?></textarea>
                    </div>
                </div>
                <?php endforeach; ?>
                
                
                
            </div>
        </form>
        
    </body>
</html>

./questions/c.css


/* ---------------------------- 自定义CLASS ----------------------------- */

/* 全屏、居中 */
.sysCoverBoxFullAndCenter {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	color: white;
}

/* 全屏、居中 */
.sysCoverBoxFullAndTop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
}

/**
 * Display
 */
 .hidden,
 .d-none {
	display: none;
}

.displayInlineBlock {
    display: inline-block;
}


/**
 * A
 */
.noUnderLine {
	text-decoration: none!important;
}
.textUnderLine {
	text-decoration: underline!important;
}
.textCrossLine {
	text-decoration: line-through;
}


/**
 * Flex
 * 
 * @link https://blog.csdn.net/qq285744011/article/details/123043631
 */
 .rowStart {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.rowEnd {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}


.rowCenter {
	display: flex;
	flex-direction: row;
	justify-content: center;
}



.rowSpaceBetween {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}


.rowSpaceAround {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.rowSpaceEvenly {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.rowStretch {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
}

.rowAlignItemsEnd {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

/* Special for column direction */
.aliasRowDCAS,
.rowDirectionColumnAndStart {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.aliasRowDCRAS,
.rowDirectionColumnReverseAndStart {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
}

/* 里面的多个.col容器水平放置，而且垂直方向对齐 */
.colAlignItemsCenter > .colInner {
	display: flex;
	align-items: center;
}


/* 里面的顶级容器纵向放置，而且集体在垂直方向居中 */
.rowAlignItemsCenter {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 子元素平分父类宽度 */
.flex1,
.flex-1-1-0pct {
        flex: 1 1 0%;
}

/* 子元素各自按照自己的内容宽度 等比平分父类宽度 */
.flexAuto,
.flex-1-1-auto {
        flex: 1 1 auto!important;
}

.flex00auto,
.flex00Auto,
.flex-0-0-auto {
        flex: 0 0 auto!important;
}

/* flex布局 */
.d-flex {
	display: flex;
}

.justify-content-center {
	justify-content: center;
}

.align-items-center {
	align-items: center;
}

/* 自动换行 */
.flexFlowWrap {
	flex-flow: wrap;
}


/**
 * 文字不可选中
 */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.selectableText {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.selectableAll {
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -khtml-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

/**
 * 背景图位置
 */
.bgPosCenter {
	background-position: center;
}


/* 子元素 */
.innerAgray a,
.innerAgray a:hover {
	color: gray;
}

.innerAblack a,
.innerAblack a:hover {
	color: black;
}

.innerDomCursorPointer > * {
	cursor: pointer;
}

.innerMediaResponsive img,
.innerMediaResponsive video {
	max-width: 100%!important;
}


/* 弹性盒子模型 flex-shrink 伸缩 */
.innerDomFlexShrink0 > * {
	flex-shrink: 0;
}


.innerDomInlineBlock > * {
	display: inline-block;
}



.innerDomPaddingRow5 > * {
    padding-left: 5px;
    padding-right: 5px;
}

.innerDomPaddingRow10 > * {
    padding-left: 10px;
    padding-right: 10px;
}

.innerDomPaddingRow20 > * {
    padding-left: 20px;
    padding-right: 20px;
}

.innerDomPaddingRow30 > * {
    padding-left: 30px;
    padding-right: 30px;
}

.innerDomPaddingRow40 > * {
    padding-left: 40px;
    padding-right: 40px;
}

.innerDomPaddingRow50 > * {
    padding-left: 50px;
    padding-right: 50px;
}

.innerDomPaddingRow100 > * {
    padding-left: 100px;
    padding-right: 100px;
}


.innerDomPaddingCol5 > * {
    padding-top: 5px;
    padding-bottom: 5px;
}

.innerDomPaddingCol10 > * {
    padding-top: 10px;
    padding-bottom: 10px;
}

.innerDomPaddingCol20 > * {
    padding-top: 20px;
    padding-bottom: 20px;
}

.innerDomPaddingCol30 > * {
    padding-top: 30px;
    padding-bottom: 30px;
}

.innerDomPaddingCol40 > * {
    padding-top: 40px;
    padding-bottom: 40px;
}

.innerDomPaddingCol50 > * {
    padding-top: 50px;
    padding-bottom: 50px;
}

.innerDomPaddingCol100 > * {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* 单边 */

.innerDomPaddingBottom5 > * {
    padding-bottom: 5px;
}

.innerDomPaddingBottom10 > * {
    padding-bottom: 10px;
}

.innerDomPaddingBottom20 > * {
    padding-bottom: 20px;
}

.innerDomPaddingBottom30 > * {
    padding-bottom: 30px;
}

.innerDomPaddingBottom40 > * {
    padding-bottom: 40px;
}

.innerDomPaddingBottom50 > * {
    padding-bottom: 50px;
}

.innerDomPaddingBottom100 > * {
    padding-bottom: 100px;
}


.innerDomMarginRow5 > * {
    margin-left: 5px;
    margin-right: 5px;
}

.innerDomMarginRow10 > * {
    margin-left: 10px;
    margin-right: 10px;
}

.innerDomMarginRow20 > * {
    margin-left: 20px;
    margin-right: 20px;
}

.innerDomMarginRow30 > * {
    margin-left: 30px;
    margin-right: 30px;
}

.innerDomMarginRow40 > * {
    margin-left: 40px;
    margin-right: 40px;
}

.innerDomMarginRow50 > * {
    margin-left: 50px;
    margin-right: 50px;
}

.innerDomMarginRow100 > * {
    margin-left: 100px;
    margin-right: 100px;
}


.innerDomMarginCol5 > * {
    margin-top: 5px;
    margin-bottom: 5px;
}

.innerDomMarginCol10 > * {
    margin-top: 10px;
    margin-bottom: 10px;
}

.innerDomMarginCol20 > * {
    margin-top: 20px;
    margin-bottom: 20px;
}

.innerDomMarginCol30 > * {
    margin-top: 30px;
    margin-bottom: 30px;
}

.innerDomMarginCol40 > * {
    margin-top: 40px;
    margin-bottom: 40px;
}

.innerDomMarginCol50 > * {
    margin-top: 50px;
    margin-bottom: 50px;
}

.innerDomMarginCol100 > * {
    margin-top: 100px;
    margin-bottom: 100px;
}

/* 单边 */

.innerDomMarginBottom5 > * {
    margin-bottom: 5px;
}

.innerDomMarginBottom10 > * {
    margin-bottom: 10px;
}

.innerDomMarginBottom20 > * {
    margin-bottom: 20px;
}

.innerDomMarginBottom30 > * {
    margin-bottom: 30px;
}

.innerDomMarginBottom40 > * {
    margin-bottom: 40px;
}

.innerDomMarginBottom50 > * {
    margin-bottom: 50px;
}

.innerDomMarginBottom100 > * {
    margin-bottom: 100px;
}


/* PlaceHolder样式 */
/* WebKit browsers */
.innerPlaceholderFontSize14 textarea::-webkit-input-placeholder,
.innerPlaceholderFontSize14 input::-webkit-input-placeholder {  
    font-size: 14px;
}
/* Mozilla Firefox 4 to 18 */
.innerPlaceholderFontSize14 textarea:-moz-placeholder,
.innerPlaceholderFontSize14 input:-moz-placeholder { 
    font-size: 14px;
}
/* Mozilla Firefox 19+ */
.innerPlaceholderFontSize14 textarea::-moz-placeholder,
.innerPlaceholderFontSize14 input::-moz-placeholder {
    font-size: 14px;
}
/* Internet Explorer 10+ */
.innerPlaceholderFontSize14 textarea :-ms-input-placeholder,
.innerPlaceholderFontSize14 input :-ms-input-placeholder {
    font-size: 14px;
}



.innerPlaceholderFontSize12 textarea::-webkit-input-placeholder,
.innerPlaceholderFontSize12 input::-webkit-input-placeholder {  
    font-size: 12px;
}
.innerPlaceholderFontSize12 textarea:-moz-placeholder,
.innerPlaceholderFontSize12 input:-moz-placeholder { 
    font-size: 12px;
}
.innerPlaceholderFontSize12 textarea::-moz-placeholder,
.innerPlaceholderFontSize12 input::-moz-placeholder {
    font-size: 12px;
}
.innerPlaceholderFontSize12 textarea :-ms-input-placeholder,
.innerPlaceholderFontSize12 input :-ms-input-placeholder {
    font-size: 12px;
}


.innerPlaceholderFontSize16 textarea::-webkit-input-placeholder,
.innerPlaceholderFontSize16 input::-webkit-input-placeholder {  
    font-size: 16px;
}
.innerPlaceholderFontSize16 textarea:-moz-placeholder,
.innerPlaceholderFontSize16 input:-moz-placeholder { 
    font-size: 16px;
}
.innerPlaceholderFontSize16 textarea::-moz-placeholder,
.innerPlaceholderFontSize16 input::-moz-placeholder {
    font-size: 16px;
}
.innerPlaceholderFontSize16 textarea :-ms-input-placeholder,
.innerPlaceholderFontSize16 input :-ms-input-placeholder {
    font-size: 16px;
}


/* 颜色 */
.innerPlaceholderColorDEDEDE textarea::-webkit-input-placeholder,
.innerPlaceholderColorDEDEDE input::-webkit-input-placeholder {  
    color: #DEDEDE;
}
.innerPlaceholderColorDEDEDE textarea:-moz-placeholder,
.innerPlaceholderColorDEDEDE input:-moz-placeholder { 
    color: #DEDEDE;
}
.innerPlaceholderColorDEDEDE textarea::-moz-placeholder,
.innerPlaceholderColorDEDEDE input::-moz-placeholder {
    color: #DEDEDE;
}
.innerPlaceholderColorDEDEDE textarea :-ms-input-placeholder,
.innerPlaceholderColorDEDEDE input :-ms-input-placeholder {
    color: #DEDEDE;
}







/* 输入框放大缩小 禁止拉伸 */
.resizeNone textarea {
	resize: none;
}



.paddingCol0 {
    padding-top: 0!important;
    padding-bottom: 0!important;
}


.paddingCol1 {
    padding-top: 1px!important;
    padding-bottom: 1px!important;
}
.paddingCol2 {
    padding-top: 2px!important;
    padding-bottom: 2px!important;
}
.paddingCol3 {
    padding-top: 3px!important;
    padding-bottom: 3px!important;
}
.paddingCol4 {
    padding-top: 4px!important;
    padding-bottom: 4px!important;
}
.paddingCol5 {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}
.paddingCol6 {
    padding-top: 6px!important;
    padding-bottom: 6px!important;
}
.paddingCol7 {
    padding-top: 7px!important;
    padding-bottom: 7px!important;
}
.paddingCol8 {
    padding-top: 8px!important;
    padding-bottom: 8px!important;
}
.paddingCol9 {
    padding-top: 9px!important;
    padding-bottom: 9px!important;
}

.paddingCol10 {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
.paddingCol15 {
    padding-top: 15px!important;
    padding-bottom: 15px!important;
}

.paddingCol20 {
    padding-top: 20px!important;
    padding-bottom: 20px!important;
}

.paddingCol30 {
    padding-top: 30px!important;
    padding-bottom: 30px!important;
}

.paddingCol40 {
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}


.paddingCol50 {
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}

.paddingCol100 {
    padding-top: 100px!important;
    padding-bottom: 100px!important;
}

.paddingCol200 {
    padding-top: 200px!important;
    padding-bottom: 200px!important;
}


.padding0 {
    padding: 0!important;
}
.padding1 {
    padding: 1px!important;
}
.padding2 {
    padding: 2px!important;
}
.padding3 {
    padding: 3px!important;
}
.padding4 {
    padding: 4px!important;
}
.padding5 {
    padding: 5px!important;
}
.padding6 {
    padding: 6px!important;
}
.padding7 {
    padding: 7px!important;
}
.padding8 {
    padding: 8px!important;
}
.padding9 {
    padding: 9px!important;
}

.padding10 {
    padding: 10px!important;
}

.padding12 {
    padding: 12px!important;
}

.padding14 {
    padding: 14px!important;
}

.padding16 {
    padding: 16px!important;
}

.padding18 {
    padding: 18px!important;
}



.padding20 {
    padding: 20px!important;
}

.padding30 {
    padding: 30px!important;
}

.padding40 {
    padding: 40px!important;
}


.padding50 {
    padding: 50px!important;
}

.padding100 {
    padding: 100px!important;
}

.padding200 {
    padding: 200px!important;
}






/**
 * Color
 * 
 */
.colorForTheme {
	color: #FF9304;
}

.colorWhite {
	color: white;
}
.colorWhiteImportant {
	color: white!important;
}
.colorBlack {
	color: black;
}
.colorBlackLighter {
	color: #282828;
}
.colorRed {
	color: red;
}
.colorGreen {
	color: green;
}
.colorBlue {
	color: blue;
}
.colorGray {
	color: gray;
}
.colorGrayDarker {
	color: #6a6a6a;
}
.colorOrange {
	color: orange;
}
.colorYellow {
	color: orange;
}


.color3199EE {
	color: #3199EE;
}
.colorB0B0B0 {
	color: #b0b0b0;
}
.colorCBCBCB {
	color: #cbcbcb;
}
.colorDEDEDE {
	color: #dedede;
}
.color6BADF7 {
	color: #6BADF7;
}
.colorCCF1EF {
	color: #CCF1EF;
}

.color4A84FF {
	color: #4A84FF;
}




/**
 * Bgcolor
 * 
 */
.bg-F0F1F5 {
    background-color: #F0F1F5;
}

.bgColor49A3F2 {
	background-color: #49A3F2!important;
}
.bgColor5DABF9 {
	background-color: #5DABF9!important;
}


.bgColorFAD038 {
	background-color: #FAD038!important;
}

.bgColorForTheme {
	background-color: #FF9304!important;
}

.bgColorEEE7F7 {
	background-color: #EEE7F7!important;
}

.bgColorF2EEF7 {
	background-color: #F2EEF7!important;
}

.bgColorF8F8F8 {
	background-color: #F8F8F8!important;
}

.bgColorF5F5F5 {
	background-color: #F5F5F5!important;
}

.bgColorE8E8E8 {
	background-color: #E8E8E8!important;
}

.bgColorB6B6B6 {
	background-color: #B6B6B6!important;
}

.bgColor23D2B1 {
	background-color: #23D2B1!important;
}
.bgColor45C2E5 {
	background-color: #45C2E5!important;
}
.bgColorCBF2F8 {
	background-color: #cbf2f8!important;
}
.bgColor2A82E4 {
	background-color: #2A82E4!important;
}
.bgColorE8F4FF {
	background-color: #E8F4FF!important;
}

.bgColorF6F5FA {
	background-color: #F6F5FA!important;
}

.bgColorFCDAC8 {
	background-color: #FCDAC8!important;
}
.bgColorE8D8C9 {
	background-color: #E8D8C9!important;
}
.bgColorFFE0A6 {
	background-color: #FFE0A6!important;
}
.bgColorFFF3DE {
	background-color: #FFF3DE!important;
}
.bgColorFDFDFD {
	background-color: #FDFDFD!important;
}

.bgColorFACF9F {
	background-color: #FACF9F!important;
}

.bgColorF4E2E1 {
	background-color: #f4e2e1!important;
}

.bgColor91CB74 {
	background-color: #91CB74!important;
}

.bgColorD43030 {
	background-color: #D43030!important;
}
.bgColorD4BEBE {
	background-color: #d4bebe!important;
}
.bgColorFDD1D2 {
	background-color: #FDD1D2!important;
}

.bgColorFDE9E8 {
	background-color: #FDE9E8!important;
}
.bgColorF8DFDF {
	background-color: #f8dfdf!important;
}

.bgColorD9D9D9 {
	background-color: #D9D9D9!important;
}

.bgColor6D96EF {
	background-color: #6D96EF!important;
}

.bgColor5C89EE {
	background-color: #5C89EE!important;
}

.bgColor7ABFFF {
	background-color: #7ABFFF!important;
}

.bgColor5FACF9 {
	background-color: #5FACF9!important;
}

.bgColor24375F {
	background-color: #24375F!important;
}
.bgColor949CB3 {
	background-color: #949CB3!important;
}
.bgColorFFF9E7 {
	background-color: #fff9ef!important;
}
.bgColorFFFCF7 {
	background-color: #fffcf7!important;
}

.bgColorCCCCCC {
	background-color: #CCCCCC!important;
}


.bgColorDDDDDD {
	background-color: #DDDDDD!important;
}


.bgColorEEEEEE {
	background-color: #EEEEEE!important;
}



.bgColorGreen {
	background-color: green!important;
}

.bgColorGray {
	background-color: gray!important;
}

.bgColorBlue {
	background-color: blue!important;
}

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

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

.bgColorRed {
	background-color: red!important;
}

.bgColorInherit {
	background-color: inherit!important;
}

.bgColorTransparent {
	background-color: transparent!important;
}


/* 大小缩放 HOVER */
.hoverTransformScale0d5:hover {
	transform: scale(0.5);
}
.hoverTransformScale0d6:hover {
	transform: scale(0.6);
}
.hoverTransformScale0d7:hover {
	transform: scale(0.7);
}
.hoverTransformScale0d8:hover {
	transform: scale(0.8);
}
.hoverTransformScale0d9:hover {
	transform: scale(0.9);
}
.hoverTransformScale1:hover {
	transform: scale(1);
}
.hoverTransformScale1d5:hover {
	transform: scale(1.5);
}
/* 大小缩放 */
.transformScale0d5 {
	transform: scale(0.5);
}
.transformScale0d6 {
	transform: scale(0.6);
}
.transformScale0d7 {
	transform: scale(0.7);
}
.transformScale0d8 {
	transform: scale(0.8);
}
.transformScale0d9 {
	transform: scale(0.9);
}
.transformScale1 {
	transform: scale(1);
}
.transformScale1d5 {
	transform: scale(1.5);
}


/**
 * Font size
 */
.fontSize10 {
 font-size: 10px!important;
}
.fontSize12 {
 font-size: 12px!important;
}
.fontSize14 {
 font-size: 14px!important;
}
.fontSize16 {
 font-size: 16px!important;
}
.fontSize16important {
 font-size: 16px!important;
}
.fontSize18 {
 font-size: 18px!important;
}
.fontSize20 {
 font-size: 20px!important;
}
.fontSize22 {
	font-size: 22px!important;
}
.fontSize24 {
	font-size: 24px!important;
}
.fontSize26 {
	font-size: 26px!important;
}
.fontSize28 {
	font-size: 28px!important;
}
.fontSize30 {
	font-size: 30px!important;
}
.fontSize32 {
	font-size: 38px!important;
}
.fontSize34 {
	font-size: 34px!important;
}
.fontSize35 {
	font-size: 35px!important;
}
.fontSize36 {
	font-size: 36px!important;
}
.fontSize38 {
	font-size: 38px!important;
}
.fontSize40 {
	font-size: 40px!important;
}
.fontSize42 {
	font-size: 42px!important;
}
.fontSize44 {
	font-size: 44px!important;
}
.fontSize46 {
	font-size: 46px!important;
}
.fontSize48 {
	font-size: 48px!important;
}
.fontSize50 {
	font-size: 50px!important;
}
.fontSize60 {
	font-size: 60px!important;
}
.fontSize70 {
	font-size: 70px!important;
}
.fontSize80 {
	font-size: 80px!important;
}
.fontSize90 {
	font-size: 90px!important;
}
.fontSize100 {
	font-size: 100px!important;
}




/**
 * 透明度
 * opacity
 */
 .toumingOpacity10,
 .opacity0 {
     opacity: 0;
 }
 
 .opacity10 {
     opacity: 0.1;
 }
 
 .opacity20 {
     opacity: 0.2;
 }
 
 .opacity30 {
     opacity: 0.3;
 }
 
 .opacity40 {
     opacity: 0.4;
 }
 
 .opacity50 {
     opacity: 0.5;
 }
 
 .opacity60 {
     opacity: 0.6;
 }
 
 .opacity70 {
     opacity: 0.7;
 }
 
 .opacity80 {
     opacity: 0.8;
 }
 
 .opacity90 {
     opacity: 0.9;
 }
 
 .opacity100 {
     opacity: 1;
 }
 
 


 
/**
 * Padding-Row 
 * 左右两边
 */
.paddingRow0 {
	padding-left: 0;
	padding-right: 0;
}
.paddingRow2 {
	padding-left: 2px;
	padding-right: 2px;
}
.paddingRow4 {
	padding-left: 4px;
	padding-right: 4px;
}
.paddingRow6 {
	padding-left: 6px;
	padding-right: 6px;
}
.paddingRow8 {
	padding-left: 8px;
	padding-right: 8px;
}
.paddingRow10 {
	padding-left: 10px;
	padding-right: 10px;
}
.paddingRow15 {
	padding-left: 15px;
	padding-right: 15px;
}
.paddingRow20 {
	padding-left: 20px;
	padding-right: 20px;
}
.paddingRow30 {
	padding-left: 30px;
	padding-right: 30px;
}
.paddingRow40 {
	padding-left: 40px;
	padding-right: 40px;
}
.paddingRow50 {
	padding-left: 50px;
	padding-right: 50px;
}
.paddingRow60 {
	padding-left: 60px;
	padding-right: 60px;
}
.paddingRow70 {
	padding-left: 70px;
	padding-right: 70px;
}
.paddingRow80 {
	padding-left: 80px;
	padding-right: 80px;
}
.paddingRow90 {
	padding-left: 90px;
	padding-right: 90px;
}
.paddingRow100 {
	padding-left: 100px;
	padding-right: 100px;
}
.paddingRow200 {
	padding-left: 200px;
	padding-right: 200px;
}
.paddingRow300 {
	padding-left: 300px;
	padding-right: 300px;
}




/**
 * Padding 单边
 */
.paddingTop10 {
	padding-top: 10px;
}
.paddingTop12 {
	padding-top: 12px;
}
.paddingTop14 {
	padding-top: 14px;
}
.paddingTop16 {
	padding-top: 16px;
}
.paddingTop18 {
	padding-top: 18px;
}
.paddingTop20 {
	padding-top: 20px;
}
.paddingTop24 {
	padding-top: 24px;
}
.paddingTop30 {
	padding-top: 30px;
}
.paddingTop40 {
	padding-top: 40px;
}
.paddingTop50 {
	padding-top: 50px;
}
.paddingTop60 {
	padding-top: 60px;
}
.paddingTop70 {
	padding-top: 70px;
}
.paddingTop80 {
	padding-top: 80px;
}
.paddingTop90 {
	padding-top: 90px;
}
.paddingTop100 {
	padding-top: 100px;
}
.paddingTop150 {
	padding-top: 150px;
}
.paddingTop200 {
	padding-top: 200px;
}
.paddingTop300 {
	padding-top: 300px;
}
.paddingTop400 {
	padding-top: 400px;
}
.paddingTop500 {
	padding-top: 500px;
}
.paddingBottom0 {
	padding-bottom: 0px;
}
.paddingBottom5 {
	padding-bottom: 5px;
}
.paddingBottom6 {
	padding-bottom: 6px;
}
.paddingBottom8 {
	padding-bottom: 8px;
}
.paddingBottom10 {
	padding-bottom: 10px;
}
.paddingBottom20 {
	padding-bottom: 20px;
}
.paddingBottom30 {
	padding-bottom: 30px;
}
.paddingBottom40 {
	padding-bottom: 40px;
}
.paddingBottom50 {
	padding-bottom: 50px;
}
.paddingBottom60 {
	padding-bottom: 60px;
}
.paddingBottom70 {
	padding-bottom: 70px;
}
.paddingBottom80 {
	padding-bottom: 80px;
}
.paddingBottom90 {
	padding-bottom: 90px;
}
.paddingBottom100 {
	padding-bottom: 100px;
}
.paddingBottom200 {
	padding-bottom: 200px;
}
.paddingBottom300 {
	padding-bottom: 300px;
}
.paddingBottom400 {
	padding-bottom: 400px;
}

.paddingRight5 {
	padding-right: 5px;
}

.paddingRight10 {
	padding-right: 10px;
}
.paddingRight12 {
	padding-right: 12px;
}
.paddingRight14 {
	padding-right: 14px;
}
.paddingRight16 {
	padding-right: 16px;
}
.paddingRight18 {
	padding-right: 18px;
}
.paddingRight20 {
	padding-right: 20px;
}
.paddingRight30 {
	padding-right: 30px;
}
.paddingRight40 {
	padding-right: 40px;
}
.paddingRight50 {
	padding-right: 50px;
}
.paddingRight60 {
	padding-right: 60px;
}
.paddingRight70 {
	padding-right: 70px;
}
.paddingRight80 {
	padding-right: 80px;
}
.paddingRight90 {
	padding-right: 90px;
}
.paddingRight100 {
	padding-right: 100px;
}
.paddingRight150 {
	padding-right: 150px;
}
.paddingRight200 {
	padding-right: 200px;
}
.paddingRight300 {
	padding-right: 300px;
}
.paddingRight400 {
	padding-right: 400px;
}


.paddingLeft0 {
	padding-left: 0px;
}
.paddingLeft2 {
	padding-left: 2px;
}
.paddingLeft4 {
	padding-left: 4px;
}
.paddingLeft5 {
	padding-left: 5px;
}
.paddingLeft6 {
	padding-left: 6px;
}
.paddingLeft8 {
	padding-left: 8px;
}
.paddingLeft10 {
	padding-left: 10px;
}
.paddingLeft12 {
	padding-left: 12px;
}
.paddingLeft14 {
	padding-left: 14px;
}
.paddingLeft16 {
	padding-left: 16px;
}
.paddingLeft18 {
	padding-left: 18px;
}
.paddingLeft20 {
	padding-left: 20px;
}
.paddingLeft30 {
	padding-left: 30px;
}
.paddingLeft40 {
	padding-left: 40px;
}
.paddingLeft50 {
	padding-left: 50px;
}
.paddingLeft60 {
	padding-left: 60px;
}
.paddingLeft70 {
	padding-left: 70px;
}
.paddingLeft80 {
	padding-left: 80px;
}
.paddingLeft90 {
	padding-left: 90px;
}
.paddingLeft100 {
	padding-left: 100px;
}
.paddingLeft150 {
	padding-left: 150px;
}
.paddingLeft200 {
	padding-left: 200px;
}
.paddingLeft300 {
	padding-left: 300px;
}
.paddingLeft400 {
	padding-left: 400px;
}




/**
 * margin-Row 
 * 左右两边
 */
.marginRow0 {
	margin-left: 0;
	margin-right: 0;
}
.marginRow5 {
	margin-left: 5px;
	margin-right: 5px;
}
.marginRow10 {
	margin-left: 10px;
	margin-right: 10px;
}
.marginRow12 {
	margin-left: 12px;
	margin-right: 12px;
}
.marginRow14 {
	margin-left: 14px;
	margin-right: 14px;
}
.marginRow16 {
	margin-left: 16px;
	margin-right: 16px;
}
.marginRow18 {
	margin-left: 18px;
	margin-right: 18px;
}
.marginRow20 {
	margin-left: 20px;
	margin-right: 20px;
}
.marginRow30 {
	margin-left: 30px;
	margin-right: 30px;
}
.marginRow40 {
	margin-left: 40px;
	margin-right: 40px;
}

.margin0Auto {
	margin: 0 auto;
}



/**
 * Margin-Col 
 * 上下两边
 */
.marginCol1 {
	margin-top: 1px;
	margin-bottom: 1px;
}
.marginCol2 {
	margin-top: 2px;
	margin-bottom: 2px;
}
.marginCol4 {
	margin-top: 4px;
	margin-bottom: 4px;
}
.marginCol5 {
	margin-top: 5px;
	margin-bottom: 5px;
}
.marginCol6 {
	margin-top: 6px;
	margin-bottom: 6px;
}
.marginCol8 {
	margin-top: 8px;
	margin-bottom: 8px;
}
.marginCol10 {
	margin-top: 10px;
	margin-bottom: 10px;
}
.marginCol20 {
	margin-top: 20px;
	margin-bottom: 20px;
}
.marginCol30 {
	margin-top: 30px;
	margin-bottom: 30px;
}
.marginCol40 {
	margin-top: 40px;
	margin-bottom: 40px;
}
.marginCol50 {
	margin-top: 50px;
	margin-bottom: 50px;
}
.marginCol60 {
	margin-top: 60px;
	margin-bottom: 60px;
}
.marginCol70 {
	margin-top: 70px;
	margin-bottom: 70px;
}
.marginCol80 {
	margin-top: 80px;
	margin-bottom: 80px;
}
.marginCol90 {
	margin-top: 90px;
	margin-bottom: 90px;
}
.marginCol100 {
	margin-top: 100px;
	margin-bottom: 100px;
}


/**
 * margin
 */
.margin0 {
	margin: 0!important;
}
.marginTop1 {
	margin-top: 1px;
}
.marginTop2 {
	margin-top: 2px;
}
.marginTop3 {
	margin-top: 3px;
}
.marginTop4 {
	margin-top: 4px;
}
.marginTop5 {
	margin-top: 5px;
}
.marginTop10 {
	margin-top: 10px;
}
.marginTop20 {
	margin-top: 20px;
}
.marginTop30 {
	margin-top: 30px;
}
.marginTop40 {
	margin-top: 40px;
}
.marginTop50 {
	margin-top: 50px;
}
.marginTop100 {
	margin-top: 100px;
}
.marginTop200 {
	margin-top: 200px;
}
.marginTop300 {
	margin-top: 300px;
}

/**
 * margin 负数
 */
.marginTop-5 {
	margin-top: -5px;
}
.marginTop-10 {
	margin-top: -10px;
}
.marginTop-15 {
	margin-top: -15px;
}
.marginTop-20 {
	margin-top: -20px;
}
.marginTop-25 {
	margin-top: -25px;
}
.marginTop-30 {
	margin-top: -30px;
}
.marginTop-32 {
	margin-top: -32px;
}
.marginTop-34 {
	margin-top: -34px;
}
.marginTop-35 {
	margin-top: -35px;
}
.marginTop-40 {
	margin-top: -40px;
}
.marginTop-45 {
	margin-top: -45px;
}
.marginTop-50 {
	margin-top: -50px;
}
.marginTop-60 {
	margin-top: -60px;
}
.marginTop-80 {
	margin-top: -80px;
}
.marginTop-100 {
	margin-top: -100px;
}


/**
 * Margin 单边 - 负数
 */
.marginBottom-2 {
	margin-bottom: -2px;
}
.marginBottom-4 {
	margin-bottom: -4px;
}
.marginBottom-6 {
	margin-bottom: -6px;
}
.marginBottom-8 {
	margin-bottom: -8px;
}
/**
 * Margin 单边
 */
.marginBottom0 {
	margin-bottom: 0!important;
}
.marginBottom2 {
	margin-bottom: 2px;
}
.marginBottom4 {
	margin-bottom: 4px;
}
.marginBottom6 {
	margin-bottom: 6px;
}
.marginBottom8 {
	margin-bottom: 8px;
}
.marginBottom10 {
	margin-bottom: 10px;
}
.marginBottom20 {
	margin-bottom: 20px;
}
.marginBottom30 {
	margin-bottom: 30px;
}
.marginBottom40 {
	margin-bottom: 40px;
}
.marginBottom50 {
	margin-bottom: 50px;
}
.marginBottom60 {
	margin-bottom: 60px;
}
.marginBottom70 {
	margin-bottom: 70px;
}
.marginBottom80 {
	margin-bottom: 80px;
}
.marginBottom90 {
	margin-bottom: 90px;
}
.marginBottom100 {
	margin-bottom: 100px;
}

.marginRight0 {
	margin-right: 0!important;
}
.marginRight2 {
	margin-right: 2px;
}
.marginRight4 {
	margin-right: 4px;
}
.marginRight6 {
	margin-right: 6px;
}
.marginRight8 {
	margin-right: 8px;
}
.marginRight10 {
	margin-right: 10px;
}
.marginRight20 {
	margin-right: 20px;
}
.marginRight30 {
	margin-right: 30px;
}
.marginRight40 {
	margin-right: 40px;
}
.marginRight50 {
	margin-right: 50px;
}
.marginRight60 {
	margin-right: 60px;
}
.marginRight70 {
	margin-right: 70px;
}
.marginRight80 {
	margin-right: 80px;
}
.marginRight90 {
	margin-right: 90px;
}
.marginRight100 {
	margin-right: 100px;
}


.marginTop2 {
	margin-top: 2px;
}
.marginTop4 {
	margin-top: 4px;
}
.marginTop6 {
	margin-top: 6px;
}
.marginTop8 {
	margin-top: 8px;
}
.marginTop10 {
	margin-top: 10px;
}
.marginTop20 {
	margin-top: 20px;
}
.marginTop30 {
	margin-top: 30px;
}
.marginTop40 {
	margin-top: 40px;
}
.marginTop50 {
	margin-top: 50px;
}
.marginTop60 {
	margin-top: 60px;
}
.marginTop70 {
	margin-top: 70px;
}
.marginTop80 {
	margin-top: 80px;
}
.marginTop90 {
	margin-top: 90px;
}
.marginTop100 {
	margin-top: 100px;
}




/**
 * Font weight
 */
 .weightBold {
	font-weight: bold;
}
.weightNormal {
	font-weight: normal;
}



/**
 * Line height
 */
 .lineHeight1 {
	line-height: 1;
}
.lineHeight1d2 {
	line-height: 1.2;
}
.lineHeight1d4 {
	line-height: 1.4;
}
.lineHeight1d6 {
	line-height: 1.6;
}
.lineHeight1d8 {
	line-height: 1.8;
}
.lineHeight2 {
	line-height: 2;
}
.lineHeight2d2 {
	line-height: 2.2;
}
.lineHeight2d4 {
	line-height: 2.4;
}
.lineHeight2d6 {
	line-height: 2.6;
}
.lineHeight2d8 {
	line-height: 2.8;
}
.lineHeight3 {
	line-height: 3;
}
.lineHeight5 {
	line-height: 5;
}


/* 宽、高 */
.img-fluid {
	width: 100%;
	height: auto;
}

.img5,
.square5 {
	width: 5px;
	height: 5px;
}

.img4,
.square4 {
	width: 4px;
	height: 4px;
}

.img6,
.square6 {
	width: 6px;
	height: 6px;
}

.img8,
.square8 {
	width: 8px;
	height: 8px;
}

.img10,
.square10 {
	width: 10px;
	height: 10px;
}

.img12,
.square12 {
	width: 12px;
	height: 12px;
}

.img14,
.square14 {
	width: 14px;
	height: 14px;
}

.img16,
.square16 {
	width: 16px;
	height: 16px;
}

.img18,
.square18 {
	width: 18px;
	height: 18px;
}

.img20,
.square20 {
	width: 20px;
	height: 20px;
}

.img30,
.square30 {
	width: 30px;
	height: 30px;
}

.img40,
.square40 {
	width: 40px;
	height: 40px;
}

.img50,
.square50 {
	width: 50px;
	height: 50px;
}

.img60,
.square60 {
	width: 60px;
	height: 60px;
}

.img70,
.square70 {
	width: 70px;
	height: 70px;
}

.img80,
.square80 {
	width: 80px;
	height: 80px;
}

.img90,
.square90 {
	width: 90px;
	height: 90px;
}

.img100,
.square100 {
	width: 100px;
	height: 100px;
}

.img200,
.square200 {
	width: 200px;
	height: 200px;
}


.img300,
.square300 {
	width: 300px;
	height: 300px;
}


.img400,
.square400 {
	width: 400px;
	height: 400px;
}


.img500,
.square500 {
	width: 500px;
	height: 500px;
}





/**
 * Height
 * more in dynamicStyle.css
 */
 .heightAuto {
	height: auto;
}


/**
 * 绝对 像素px
 */
.height10 {
	height: 10px;
}
.height12 {
	height: 12px;
}
.height14 {
	height: 14px;
}
.height16 {
	height: 16px;
}
.height18 {
	height: 18px;
}
.height20 {
	height: 20px;
}
.height22 {
	height: 22px;
}
.height24 {
	height: 24px;
}
.height26 {
	height: 26px;
}
.height28 {
	height: 28px;
}
.height30 {
	height: 30px;
}
.height40 {
	height: 40px;
}
.height50 {
	height: 50px;
}
.height60 {
	height: 60px;
}
.height70 {
	height: 70px;
}
.height80 {
	height: 80px;
}
.height90 {
	height: 90px;
}
.height100 {
	height: 100px;
}
.height120 {
	height: 120px;
}
.height140 {
	height: 140px;
}
.height150 {
	height: 150px;
}
.height200 {
	height: 200px;
}
.height300 {
	height: 300px;
}
.height400 {
	height: 400px;
}
.height500 {
	height: 500px;
}
.height550 {
	height: 550px;
}
.height1000 {
	height: 1000px;
}

/**
 * Height
 */


 .height10pct {
	height: 10%;
}

.height20pct {
	height: 20%;
}

.height30pct {
	height: 30%;
}

.height40pct {
	height: 40%;
}

.height50pct {
	height: 50%;
}

.height60pct {
	height: 60%;
}

.height70pct {
	height: 70%;
}

.height80pct {
	height: 80%;
}

.height85pct {
	height: 85%;
}


.height90pct {
	height: 90%;
}

.height100pct {
	height: 100%;
}

.height110pct {
	height: 110%;
}


/**
 * min-height
 */
.minHeight10px {
	min-height: 10px;
}
.minHeight20px {
	min-height: 20px;
}
.minHeight30px {
	min-height: 30px;
}
.minHeight40px {
	min-height: 40px;
}
.minHeight50px {
	min-height: 50px;
}
.minHeight60px {
	min-height: 60px;
}
.minHeight70px {
	min-height: 70px;
}
.minHeight80px {
	min-height: 80px;
}
.minHeight90px {
	min-height: 90px;
}

.minHeight100px {
	min-height: 100px;
}
.minHeight140px {
	min-height: 140px;
}
.minHeight150px {
	min-height: 150px;
}
.minHeight200px {
	min-height: 200px;
}
.minHeight300px {
	min-height: 300px;
}
.minHeight400px {
	min-height: 400px;
}
.minHeight500px {
	min-height: 500px;
}
.minHeight600px {
	min-height: 600px;
}
.minHeight700px {
	min-height: 700px;
}
.minHeight800px {
	min-height: 800px;
}
.minHeight900px {
	min-height: 900px;
}
.minHeight1000px {
	min-height: 1000px;
}

.minHeight100pct {
	min-height: 100%;
}

/**
 * max-height
 */
.maxHeight50 {
	max-height: 50px;
}
.maxHeight60 {
	max-height: 60px;
}
.maxHeight100 {
	max-height: 100px;
}
.maxHeight200 {
	max-height: 200px;
}
.maxHeight300 {
	max-height: 300px;
}
.maxHeight400 {
	max-height: 400px;
}
.maxHeight500 {
	max-height: 500px;
}

.maxHeight100pct {
	max-height: 100%;
}



/**
 * Shadow
 * https://blog.csdn.net/qq_34400736/article/details/119350056
 * https://blog.csdn.net/qq_44747461/article/details/108489779
 * https://box-shadow.org/
 */
 .littleShadow {
	box-shadow: 3px 3px 6px #B0B0B0;
}
.littleShadowAround {
	box-shadow: 8px 8px 8px -8px #9c9c9c,
             -8px 8px 8px -8px #9c9c9c;
}
.littleShadowAroundAndTop {
	box-shadow: 0 0 5px 0 #c8c8c8;
}
.littleShadowAroundAndTopDarker {
	box-shadow: 0 0 10px 0 #9c9c9c;
}

.bigShadow {
	box-shadow: 8px 8px 12px #B0B0B0;
}
.noShadow .bigShadow {
	box-shadow: none;
}


/**
 * 鼠标样式
 */
.cursorPointer {
	cursor: pointer;
}




/**
 * border-radius
 */
.radius0 {
	border-radius: 0px!important;
}
.radius2 {
	border-radius: 2px!important;
}
.radius4 {
	border-radius: 4px!important;
}
.radius6 {
	border-radius: 6px!important;
}
.radius8 {
	border-radius: 8px!important;
}

.radius10 {
	border-radius: 10px!important;
}
.radius20 {
	border-radius: 20px!important;
}
.radius30 {
	border-radius: 30px!important;
}
.radius40 {
	border-radius: 40px!important;
}
.radius50 {
	border-radius: 50px!important;
}

.radius50pct {
	border-radius: 50%!important;
}

.radius8TopSides {
	border-top-left-radius: 8px!important;
	border-top-right-radius: 8px!important;
}

.radius8BottomSides {
	border-bottom-left-radius: 16px!important;
	border-bottom-right-radius: 16px!important;
	/* border-collapse:separate; */
}


/* over-flow */
.overflowHidden {
	overflow: hidden;
}




/**
 * position
 */
.positionRelative {
	position: relative;
}

.positionAbsolute {
	position: absolute;
}

.positionFixed {
	position: fixed;
}

.topRightBottomLeft0 {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}



/**
 * 相对
 */

 .width1pct {
	width: 1%!important;
}

.width2pct {
	width: 2%!important;
}

.width3pct {
	width: 3%!important;
}

.width4pct {
	width: 4%!important;
}

.width5pct {
	width: 5%!important;
}

.width6pct {
	width: 6%!important;
}

.width7pct {
	width: 7%!important;
}

.width8pct {
	width: 8%!important;
}

.width9pct {
	width: 9%!important;
}

.width10pct {
	width: 10%!important;
}

.width11pct {
	width: 11%!important;
}

.width12pct {
	width: 12%!important;
}

.width13pct {
	width: 13%!important;
}

.width14pct {
	width: 14%!important;
}

.width15pct {
	width: 15%!important;
}

.width16pct {
	width: 16%!important;
}

.width17pct {
	width: 17%!important;
}

.width18pct {
	width: 18%!important;
}

.width19pct {
	width: 19%!important;
}

.width20pct {
	width: 20%!important;
}

.width21pct {
	width: 21%!important;
}

.width22pct {
	width: 22%!important;
}

.width23pct {
	width: 23%!important;
}

.width24pct {
	width: 24%!important;
}

.width25pct {
	width: 25%!important;
}

.width26pct {
	width: 26%!important;
}

.width27pct {
	width: 27%!important;
}

.width28pct {
	width: 28%!important;
}

.width29pct {
	width: 29%!important;
}

.width30pct {
	width: 30%!important;
}

.width31pct {
	width: 31%!important;
}

.width32pct {
	width: 32%!important;
}

.width33pct {
	width: 33%!important;
}

.width34pct {
	width: 34%!important;
}

.width35pct {
	width: 35%!important;
}

.width36pct {
	width: 36%!important;
}

.width37pct {
	width: 37%!important;
}

.width38pct {
	width: 38%!important;
}

.width39pct {
	width: 39%!important;
}

.width40pct {
	width: 40%!important;
}

.width41pct {
	width: 41%!important;
}

.width42pct {
	width: 42%!important;
}

.width43pct {
	width: 43%!important;
}

.width44pct {
	width: 44%!important;
}

.width45pct {
	width: 45%!important;
}

.width46pct {
	width: 46%!important;
}

.width47pct {
	width: 47%!important;
}

.width48pct {
	width: 48%!important;
}

.width49pct {
	width: 49%!important;
}

.width50pct {
	width: 50%!important;
}

.width51pct {
	width: 51%!important;
}

.width52pct {
	width: 52%!important;
}

.width53pct {
	width: 53%!important;
}

.width54pct {
	width: 54%!important;
}

.width55pct {
	width: 55%!important;
}

.width56pct {
	width: 56%!important;
}

.width57pct {
	width: 57%!important;
}

.width58pct {
	width: 58%!important;
}

.width59pct {
	width: 59%!important;
}

.width60pct {
	width: 60%!important;
}

.width61pct {
	width: 61%!important;
}

.width62pct {
	width: 62%!important;
}

.width63pct {
	width: 63%!important;
}

.width64pct {
	width: 64%!important;
}

.width65pct {
	width: 65%!important;
}

.width66pct {
	width: 66%!important;
}

.width67pct {
	width: 67%!important;
}

.width68pct {
	width: 68%!important;
}

.width69pct {
	width: 69%!important;
}

.width70pct {
	width: 70%!important;
}

.width71pct {
	width: 71%!important;
}

.width72pct {
	width: 72%!important;
}

.width73pct {
	width: 73%!important;
}

.width74pct {
	width: 74%!important;
}

.width75pct {
	width: 75%!important;
}

.width76pct {
	width: 76%!important;
}

.width77pct {
	width: 77%!important;
}

.width78pct {
	width: 78%!important;
}

.width79pct {
	width: 79%!important;
}

.width80pct {
	width: 80%!important;
}

.width81pct {
	width: 81%!important;
}

.width82pct {
	width: 82%!important;
}

.width83pct {
	width: 83%!important;
}

.width84pct {
	width: 84%!important;
}

.width85pct {
	width: 85%!important;
}

.width86pct {
	width: 86%!important;
}

.width87pct {
	width: 87%!important;
}

.width88pct {
	width: 88%!important;
}

.width89pct {
	width: 89%!important;
}

.width90pct {
	width: 90%!important;
}

.width91pct {
	width: 91%!important;
}

.width92pct {
	width: 92%!important;
}

.width93pct {
	width: 93%!important;
}

.width94pct {
	width: 94%!important;
}

.width95pct {
	width: 95%!important;
}

.width96pct {
	width: 96%!important;
}

.width97pct {
	width: 97%!important;
}

.width98pct {
	width: 98%!important;
}

.width99pct {
	width: 99%!important;
}

.width100pct {
	width: 100%!important;
}

.width110pct {
	width: 110%!important;
}




/**
 * 绝对 像素px
 */
.width10px {
	width: 10px;
}
.width12px {
	width: 12px;
}
.width14px {
	width: 14px;
}
.width16px {
	width: 16px;
}
.width18px {
	width: 18px;
}
.width20px {
	width: 20px;
}
.width22px {
	width: 22px;
}
.width24px {
	width: 24px;
}
.width26px {
	width: 26px;
}
.width28px {
	width: 28px;
}
.width30px {
	width: 30px;
}
.width40px {
	width: 40px;
}
.width42px {
	width: 42px;
}
.width44px {
	width: 44px;
}
.width45px {
	width: 45px;
}
.width46px {
	width: 46px;
}
.width48px {
	width: 48px;
}
.width50px {
	width: 50px;
}
.width60px {
	width: 60px;
}
.width70px {
	width: 70px;
}
.width80px {
	width: 80px;
}
.width90px {
	width: 90px;
}
.width100px {
	width: 100px;
}
.width120px {
	width: 120px;
}
.width110px {
	width: 110px;
}
.width130px {
	width: 130px;
}
.width140px {
	width: 140px;
}
.width150px {
	width: 150px;
}
.width160px {
	width: 160px;
}
.width180px {
	width: 180px;
}
.width200px {
	width: 200px;
}
.width300px {
	width: 300px;
}
.width400px {
	width: 400px;
}

.maxWidth20 {
	max-width: 20px;
}
.maxWidth40 {
	max-width: 40px;
}
.maxWidth50 {
	max-width: 50px;
}
.maxWidth60 {
	max-width: 60px;
}
.maxWidth80 {
	max-width: 80px;
}
.maxWidth100 {
	max-width: 100px;
}

.maxWidth200 {
	max-width: 200px;
}

.maxWidth300 {
	max-width: 300px;
}

.maxWidth400 {
	max-width: 400px;
}

.maxWidth500 {
	max-width: 500px;
}

.maxWidth600 {
	max-width: 600px;
}
.maxWidth1000 {
	max-width: 1000px;
}

.maxWidth90pct {
	max-width: 90%;
}

.maxWidth100pct {
	max-width: 100%;
}

/* 最小宽度 */

.minWidth20 {
	min-width: 20px;
}
.minWidth30 {
	min-width: 30px;
}
.minWidth40 {
	min-width: 40px;
}
.minWidth50 {
	min-width: 50px;
}
.minWidth60 {
	min-width: 60px;
}
.minWidth80 {
	min-width: 80px;
}
.minWidth100 {
	min-width: 100px;
}

.minWidth200 {
	min-width: 200px;
}

.minWidth300 {
	min-width: 300px;
}

.minWidth400 {
	min-width: 400px;
}

.minWidth500 {
	min-width: 500px;
}

.minWidth600 {
	min-width: 600px;
}
.minWidth1000 {
	min-width: 1000px;
}





/**
 * Border
 */
 .borderNone {
	border: none;
}

.border1PxForTheme {
	border: 1px #FF9304 solid;
}
.border2PxForTheme {
	border: 2px #FF9304 solid;
}
.border3PxForTheme {
	border: 3px #FF9304 solid;
}

.border1Px000000 {
	border: 1px #000 solid;
}

.border1PxGreen {
	border: 1px #00aa00 solid;
}

.border1Px4A84FF {
	border: 1px #4A84FF solid;
}

.border1PxB6B6B6 {
	border: 1px #B6B6B6 solid;
}

.border1PxB0B0B0 {
	border: 1px #B0B0B0 solid;
}

.border1PxBlue {
	border: 1px blue solid;
}



.border1PxWhite {
	border: 1px white solid;
}

.border1PxRed {
	border: 1px red solid;
}

.border1PxEEEEEE {
	border: 1px #EEEEEE solid;
}

.border1PxDADADA {
	border: 1px #DADADA solid;
}

.border1PxD8D8D8 {
	border: 1px #D8D8D8 solid;
}

.border1PxE8E8E8 {
	border: 1px #e8e8e8 solid;
}

.border1PxF8F8F8 {
	border: 1px #F8F8F8 solid;
}

.border1PxCCCCCC {
	border: 1px #cccccc solid;
}

.border1PxDashedCCCCCC {
	border: 1px #cccccc dashed;
}
.border2PxDashedCCCCCC {
	border: 2px #cccccc dashed;
}


/**
 * Border单边
 */
.borderTop2pxForTheme {
	border-top: 2px #FF9304 solid;
}
.borderTop1pxFFFFFF {
	border-top: 1px #FFFFFF solid;
}
.borderTop1pxEEEEEE {
	border-top: 1px #EEEEEE solid;
}
.borderTop2pxFFFFFF {
	border-top: 2px #FFFFFF solid;
}
.borderTop1pxCCCCCC {
	border-top: 1px #CCCCCC solid;
}
.borderTop2pxCCCCCC {
	border-top: 2px #CCCCCC solid;
}

.borderBottom1pxF4F4F4 {
	border-bottom: 1px #f4f4f4 solid;
}
.borderBottom1pxCCCCCC {
	border-bottom: 1px #CCCCCC solid;
}
.borderBottom1pxDDDDDD {
	border-bottom: 1px #DDDDDD solid;
}

.borderBottom1pxEEEEEE {
	border-bottom: 1px #EEEEEE solid;
}

.borderBottom1pxBlack {
	border-bottom: 1px black solid;
}

.borderLeft1pxFFFFFF {
	border-left: 1px #FFFFFF solid;
}
.borderLeft1pxCCCCCC {
	border-left: 1px #CCCCCC solid;
}
.borderLeft1pxF4F4F4 {
	border-left: 1px #f4f4f4 solid;
}

.borderRight1pxFFFFFF {
	border-right: 1px #FFFFFF solid;
}
.borderRight1pxCCCCCC {
	border-right: 1px #CCCCCC solid;
}
.borderRight1pxF4F4F4 {
	border-right: 1px #f4f4f4 solid;
}



/**
 * z-index
 */
 .zIndex1 {
	z-index: 1!important;
}
.zIndex2 {
	z-index: 2!important;
}
.zIndex3 {
	z-index: 3!important;
}
.zIndex4 {
	z-index: 4!important;
}
.zIndex5 {
	z-index: 4!important;
}
.zIndex99 {
	z-index: 99!important;
}
.zIndex100 {
	z-index: 100!important;
}



/* 换行 */
.lineBreaking,
.autoLineBreaking {
    white-space: pre-line;
    word-wrap: break-word;
}

.lineBreakingEnglish {
	word-break: break-all;
}

.noLineBreaking {
    white-space: nowrap;
}
.flexNoLineBreaking {
    flex-wrap: nowrap;
}


/* 不换行 */
.innerNoLineBreaking > * {
	white-space: nowrap;
}



/* 字体间距 */
.letterSpace2 {
    letter-spacing: 2px;
}
.letterSpace4 {
    letter-spacing: 4px;
}
.letterSpace6 {
    letter-spacing: 6px;
}
.letterSpace8 {
    letter-spacing: 8px;
}
.letterSpace10 {
    letter-spacing: 10px;
}




/* 图片灰度 */
.imgGrayScale0pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(0%);
}
.imgGrayScale10pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(10%);
}
.imgGrayScale20pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(20%);
}
.imgGrayScale30pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(30%);
}
.imgGrayScale40pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(40%);
}
.imgGrayScale50pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(50%);
}
.imgGrayScale60pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(60%);
}
.imgGrayScale70pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(70%);
}
.imgGrayScale80pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(80%);
}
.imgGrayScale90pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(90%);
}
.imgGrayScale100pct {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

/* 图片hover灰度 */
.imgGrayScale0pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(0%);
}
.imgGrayScale10pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(10%);
}
.imgGrayScale20pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(20%);
}
.imgGrayScale30pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(30%);
}
.imgGrayScale40pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(40%);
}
.imgGrayScale50pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(50%);
}
.imgGrayScale60pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(60%);
}
.imgGrayScale70pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(70%);
}
.imgGrayScale80pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(80%);
}
.imgGrayScale90pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(90%);
}
.imgGrayScale100pctHover:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}



/**
 * 隐藏伪类
 */
.domNoBeforeAndAfter:before,
.domNoBeforeAndAfter:after {
	display: none!important;
}




/**
 * 对齐
 */
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}


.clearBoth {
	clear: both;
}



/**
 * 缩放
 */
.scale10 {
	transform: scale(0.1);
}

.scale20 {
	transform: scale(0.2);
}

.scale30 {
	transform: scale(0.3);
}

.scale40 {
	transform: scale(0.4);
}

.scale50 {
	transform: scale(0.5);
}

.scale60 {
	transform: scale(0.6);
}

.scale70 {
	transform: scale(0.7);
}

.scale80 {
	transform: scale(0.8);
}

.scale90 {
	transform: scale(0.9);
}

.scale100 {
	transform: scale(1);
}





/* 文字溢出隐藏 - 最多1行、2行等... 超出显示点点点省略号 */
.maxLine1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.maxLine2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.maxLine3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

封面

感谢

一 键 生 成 gif 动 态 图 片

在线制作GIF动态图、表情包 - 码工具在线制作GIF动态图，一键生成gif动态图、闪图和搞笑表情包https://www.matools.com/gif

Bootstrap(实现搜索书籍页面&&购物车页面以及订单)
m0_68332494的博客
05-04 3725
运用Bootstrap实现以下案例： 案例1：实现搜索书籍页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：实现搜索书籍页面</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&
vue-light-bootstrap-dashboard:Vue Light Bootstrap仪表板-FREE BOOTSTRAP 4 VUEJS ADMIN TEMPLATE
05-02
Vue Light Bootstrap仪表板建立在Bootstrap 4，Vuejs和Vue-router之上。 要开始，请执行以下步骤： 下载专案 确保已安装node.js（ ） 在package.json所在的源文件夹中键入npm install 键入npm run dev启动开发...
Bootstrap+Vue.js 练习入门一
dingsiquan6406的博客
11-24 221
一. 效果如下图所示，输入用户名和年龄，点击添加，数据会自动添加到下面的用户信息表内。当没有数据时，用户信息表显示：暂无数据……，当有数据时，显示 删除全部 按钮，这里为了方便快捷，我没有做删除按钮的弹出框，所以 点击删除按钮 会直接删除掉当前这条数据。 <!DOCTYPE html> <html> <head lang="en"> ...
CSS——利用bootstrap实现搜索界面
Fancymeng的博客
09-05 2204
本篇一如既往，说了CSS的方法，本次借助bootstrap 实现。此外，还有相关的具体实现哦~
关于html页面直接引入vue.js后使用bootstrap-datetimepicker
qq_42449688的博客
02-17 566
使用方法 1.引用文件 <script src="../../js/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="../../js/lib/jquery.signalR-2.2.1.js" type="text/javascript" charset="utf-8"></script> <!-- bootstrap样式表 -->
Vue.js进阶【5-2】bootstrap-vue入门
C++ 爱好者 make_it_simple888
09-18 3974
GitHub https://github.com/bootstrap-vue/bootstrap-vue 元素背景颜色 variant 可选值：success、info、warning、primary、danger、link，缺省灰色，light（白色透明背景）、dark &lt;div&gt; &lt;b-button-group&gt; &lt;b-button&g...
vuejs-uib-pagination-Vue.js的最佳和完整的分页插件。 受角引导分页启发。-Vue.js开发
05-27
vuejs-uib-pagination适用于Vue.js 2.0的最佳，完整的分页插件。 受角引导分页启发。 不使用Bootstrap吗？ 没问题！ vuejs-uib-pagination适用于Vue.js 2.0的最佳和完整的分页插件。 受角引导分页启发。 不使用...
Vue Light Bootstrap 仪表板 - 免费 BOOTSTRAP 4 VUEJS 管理模板.zip
最新发布
12-01
入门Vue Light Bootstrap Dashboard 建立在 Bootstrap 4、Vuejs 和 Vue-router 之上。要开始使用，请执行以下步骤下载项目确保已安装 node.js（https://nodejs.org/en/）输入npm install源文件夹的package.json位置...
laravel-coreui-vue：具有CoreUI的Laravel 5.6（VueJS完整入门模板）>>>已弃用，请转到https：coreui.iolaravel
01-31
不建议使用的存储库 ...当前安装的CoreUI主题的版本不是最新版本，因为作者正在将存储库重新构造为免费HTML模板，然后将每个版本（Angular，VueJS，React等）分离到自己的存储库中。 目前，VueJS版本尚未发布。
vue-bootstrap-样板：plate Vue.js 3，Bootstrap 4，Vuex，Vue-Router，SassScss，ESLint，Axios
02-05
:mechanical_arm: 带有Vue.js和Bootstrap的入门样板 :package: Vue.js 3，Bootstrap 4，Vuex，Vue-Router，Sass / Scss，ESLint，Axios :watch: 最近更新：11/4/2020 入门 克隆项目并输入文件夹： cd vue-...
基于bootstrap的java答题系统+附带数据库
03-14
本人亲测，很好用，适合初学者学习，带数据库文件，部分jsp写的有点乱 但是可以理解
Bootstrap Table 搜索框和查询功能
12-29
1..知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量  /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询匹配对象 var $button = $('<div class=columns><button class=btn btn-default type=button name=refresh title=查询><i class=g
做一个导航网站 vue+Bootstrap单html导航网站
多才多多
06-10 632
作为Bootstrap入门案例是一个不错的选择.采用vue和Bootstrap框架。制作一个属于自己的导航网站.只需一个html文件,
基于bootstrap+vue+html开发的喜茶订单页面项目
qq_58372242的博客
10-24 2354
大家好,这里是果力成,很久没更了，甚是想念CSDN的大家！毕竟今天是属于我们程序猿的节日，还是需要回来看看的哈哈哈。其实我自认为也没达到一个正规的程序员的标准，但也跟程序打交道了不少时间，在学习编程的那段时间，思维上无疑是对我们有了很大的提升的。拥有编程思维，无论是不是从事IT行业，都对我们处理事情、工作有帮助。今天给大家带来一个前端的简单网页设计制作,利用框架写了一个小页面。前端嘛，所见即所得，虽然目前的主流开源框架都很成熟，但当时其中的三件套学习过程也是很让我着迷啊。
html中引入bootstrap,vue如何引入bootstrap？
weixin_40005454的博客
07-09 518
vue如何引入bootstrap？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。第一步先安装jquery① 在终端输入npm install jquery --save-dev② 在build文件夹中的webpack.config.js 添加以下内容const webpack = require("webpack");如图：然后在module.exp...
学习Vue之路（二）——html文件中导入vue，bootstrap
weixin_45611255的博客
11-27 555
学习Vue之路（二）——html文件中导入vue，bootstrap 一、html文件中导入vue 一开始在index.html所在目录的父目录中尝试导入vue和bootstrap，结果疯狂报错Refused to apply style from 'http://127.0.0.1:5500/node_modules/bootstrap/dist/css/bootstrap.css' becau...
前端面试刷题网站
Kne982895961的博客
04-02 3102
前端面试刷题网站 PS：（自己找的，发个博是怕自己给忘了） 阿西河 阿西河的面试题非常全，然后分类也很明确，很适合要刷题的小伙伴 链接: link. 图片: 面试指南 该网站里面的东西大多数是在面试时比较常被问到的东西，个人觉得挺实用的，而且里面分类时属于进阶型的，推荐初级前端小伙伴去浏览 链接: link. 图片: 力扣 当然还有程序猿们经常用的力扣了，力扣里面大部分是属于算法类的，好多东西我自己也没有去刷过，所以不知道具体的 链接: link. 图片: 个人经常用的就是前面两个，希望各位大佬看到了
html添加用户与删除,vue与bootstrap实现简单用户信息添加删除功能
weixin_29163797的博客
06-18 513
这篇文章主要为大家详细介绍了vue与bootstrap实现简单用户信息添加删除功能，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！本文实例为大家分享了vue与bootstrap实现用户信息添加删除操作的具体代码，供大家参考，具体内容如下小记：1.v-model="" 用于input表单双向数据绑定 逻辑层跟渲染层双向绑定2.v-on:cl...
在线获取网页源代码 - 在线查看源代码 - 源文件查看工具
热门推荐
Rudon滨海渔村的博客
04-07 3万+
【工具】获取网页源代码！ https://tools.rudon.cn/web/get-copyable-webpage/
Vue.js 3 和 Bootstrap 4 入门样板：使用Vuex、Vue-Router和ESLint
【标题】中提到了几个关键的IT技术栈元素：Vue.js、Bootstrap、Vuex、Vue-Router、Sass/Scss、ESLint、Axios。这些技术在现代Web开发中扮演重要角色，特别是在单页面应用程序（SPA）和组件化开发范式中。 Vue.js 是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rudon滨海渔村

花的越多，赚得越多...

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值