Flask HTMLX材料包 - 开源样本

编码员你好!

Bootstrap 5 本文介绍了一个在现代Flask 和HTMLX 设计基础上精心制作的开源样本。所有的表单（登录、注册和联系）都由HTMLX ，这是一个轻量级的JS工具库，可以直接在HTML中访问AJAX、CSS转换、WebSockets和服务器发送事件。

谢谢你的阅读!

✨ 设计信息

Material Kit由60多个前端独立元素组成，如按钮、输入、导航栏、导航标签、卡片或警报，让你可以自由选择和组合。所有的组件都可以采取不同的颜色，你可以使用SASS文件和类来轻松修改。

这个Bootstrap 5 Design System ，带有预置的设计块，所以开发过程是无缝的，从我们的页面切换到真正的网站是非常容易做到的。

如果你想获得灵感，或者只是直接向你的客户展示一些东西，你可以通过我们预建的例子页面来快速启动你的开发。你将能够快速地为你的网络项目建立基本结构。

✨ 如何使用示例

要开始使用机器中的应用程序，使用手动构建的方式

• Python3 - 在进行安装说明之前，请确保系统中已经安装了 python3 和 highr=er。
• Git - 下载并安装Git.OSX和Linux都预装了Git。如果你的windows机器上还没有安装Git，请下载并安装。
• Pip - 我们将使用pip来安装项目中需要的软件包。

如果有人喜欢Docker ，该产品已经包含了所有必要的脚本，这个简单的启动器可以通过一个（Docker）命令来启动。

👉第1步- 克隆存储库。

$ git clone https://github.com/app-generator/sample-flask-htmlx-mkit.git
$ cd sample-flask-htmlx-mkit

👉 第2步- 在Docker上启动。

$ docker-compose up --build 

一旦上述命令被执行，应用程序就应该启动和运行了。

✨ HTMLx

该应用所管理的所有表单都使用HTMLx指令。下面是登录表单的源代码和使用的HTMLx指令：

    <form  hx-swap="outerHTML" 
           hx-post="{{ url_for('auth.signin') }}" 
           hx-push-url="true" 
           hx-target=".content" 
           class="p-5 bg-white shadow mh-100 col-sm-8 col-md-6 col-lg-4" novalidate >

        <p class="h3 text-center p-2">SignIn</p>

        <!-- Truncated content -->

        <div class="form-input p-1">
            {{form.email.label}}
            {{form.email(class_="form-control")}}
        </div>

        <div class="form-input p-1">
            {{form.password.label}}
            {{form.password(class_="form-control")}}
        </div>

        <button class="btn p-2 px-3 rounded btn-primary h1" type="submit">Sign In</button>
    </form>

Thanks for reading! 如需更多资源，请随时访问。