nudoragon/vvveb-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
nudoragon
2026-05-17 21:09:32 +08:00
commit 1870400c47
1564 changed files with 544713 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

560
static/Vvvebjs/libs/builder/sections-bootstrap4.js Normal file
View File

@@ -0,0 +1,560 @@
/*
Copyright 2017 Ziadin Givan
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
https://github.com/givanz/Vvvebjs
*/
Vvveb.SectionsGroup['Bootstrap'] =
["bootstrap4/about-team", "bootstrap4/portfolio-one-column", "bootstrap4/portfolio-two-column", "bootstrap4/portfolio-three-column", "bootstrap4/portfolio-four-column"];
Vvveb.Sections.add("bootstrap4/about-team", {
name: "About and Team Section",
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
image: "https://assets.startbootstrap.com/img/screenshots/snippets/about-team.jpg",
html:`
<section data-name="about-team">
<header class="bg-primary text-center py-5 mb-4">
<div class="container">
<h1 class="font-weight-light text-white">Meet the Team</h1>
</div>
</header>
<div class="container">
<div class="row">
<!-- Team Member 1 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://images.unsplash.com/photo-1507591064344-4c6ce005b128?w=640" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=640" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://images.unsplash.com/photo-1522536421511-14c9073df899?w=640" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- Team Member 4 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?w=640" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
</section>
`,
});
Vvveb.Sections.add("bootstrap4/portfolio-one-column", {
name: "One Column Portfolio Layout",
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
image: "https://assets.startbootstrap.com/img/screenshots/snippets/portfolio-one-column.jpg",
html:`
<section data-name="portfolion-one-column">
<div class="container">
<!-- Page Heading -->
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Project One -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.co/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Two -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.co/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
<a class="btn btn-primary" href="#">View Project</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Three -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.co/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!</p>
<a class="btn btn-primary" href="#">View Project</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Four -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.co/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
<a class="btn btn-primary" href="#">View Project</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</div>
</section>
`,
});
Vvveb.Sections.add("bootstrap4/portfolio-two-column", {
name: "Two Column Portfolio Layout",
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
image: "https://assets.startbootstrap.com/img/screenshots/snippets/portfolio-one-column.jpg",
html:`
<section data-name="portfolio-two-column">
<div class="container">
<!-- Page Heading -->
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<div class="row">
<div class="col-lg-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project One</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Two</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
</div>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Three</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Four</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
</div>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Five</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Six</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</div>
</section>
`,
});
Vvveb.Sections.add("bootstrap4/portfolio-three-column", {
name: "Three Column Portfolio Layout",
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
image: "https://assets.startbootstrap.com/img/screenshots/snippets/portfolio-three-column.jpg",
html:`
<section data-name="portfolio-three-column">
<div class="container">
<!-- Page Heading -->
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project One</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Two</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Three</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Four</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Five</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Six</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</div>
</section>`,
});
Vvveb.Sections.add("bootstrap4/portfolio-four-column", {
name: "Four Column Portfolio Layout",
dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/image.svg">',
image: "https://assets.startbootstrap.com/img/screenshots/snippets/portfolio-four-column.jpg",
html:`
<section data-name="portfolio-four-column">
<div class="container">
<!-- Page Heading -->
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project One</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Two</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Three</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Four</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Five</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Six</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Seven</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="http://placehold.co/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="#">Project Eight</a>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius adipisci dicta dignissimos neque animi ea, veritatis, provident hic consequatur ut esse! Commodi ea consequatur accusantium, beatae qui deserunt tenetur ipsa.</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Pagination -->
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</div>
<section>
`,
});