• Bootstrap

WellCMS 前端和后端模板以 Bootstrap 4.0 和 JQuery 3.1.0 (支持JQuery更高版本) 制作,遵照 Bootstrap 4 的 UI 规范,基本未写过 style,尽量用 class 搞定。Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。仅需具备 HTML 、 CSS 和 JavaScript 的基础知识,利用 WellCMS 给出的代码组合,就可以创建自己的网站模板。

制作模板前,您务必了解bootstrap 4.0 ,或者具备html/CSS/JS基础知识。

一个完整的页面有两个部分:页头head和主体body;主体可在分为:主要main和页脚footer。

在开发模板的时候把代码拆,单独存放。如:head、header、main、footer四个部分,此时除了改动 main 部分代码外,其他代码无需再改动,作为公用文件,直接在 mian 代码页引用其他三个部分,即可形成一个完整的页面。

再开发模板前,先设计好整体页面结构,然后在 WellCMS 后台获得代码,复制粘贴到您建立的htm文件相对应位置保存即可,根据自己的需要,也可进行二次修改代码。

模板中的注释无需去掉,程序加载时会自动去掉注释并压缩代码。


                        

布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。BS提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。


.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。


hidden-md hidden-lg (在 md lg 下隐藏)

hidden-sm hidden-md (在 sm md 隐藏)


填充padding:p-0; px-1, py-1, pl-1, pr-1。值为0 1 2 3 4


边距margin:m-0; mx-1, my-1, ml-1, mr-1。值为0 1 2 3 4


div 块左右居中,设定宽度后,布局居中 class="mx-auto",此处并非文字居中。如
<div class="row">
    <div class="col-md-6 mx-auto">
    </div>
</div>


flex 两列布局,一列自动撑开:

第一种:
<div class="media">
    <div>left</div>
    <div class="media-body">right</div>
</div>

第二种:左右对齐的方式,跟上面不同,它类似 inline 模式,内缩,而不是撑满:
<div class="row justify-content-between m-0">
    <div>left</div>
    <div>right</div>
</div>

第三种:左自适应宽度,右余量完整填充(推荐):
<div class="d-flex">
    <div>Left</div>
    <div class="col">Right, Full Fill </div>
</div>


其他更多可到bootstrap官方了解
https://getbootstrap.com/docs/4.0/components/alerts/
或者
https://v4.bootcss.com/docs/4.0/getting-started/introduction/