Bwb

A basic webpage builder

Usage

<link href="https://cdn.jsdelivr.net/gh/crqblog/bwb.js@v.1.2.x/css/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/crqblog/bwb.js@v.1.2.x/js/plugins.js"></script>

You need to add these 2 urls to use bwb.js

Navs

Navbar

You can change the links in the code below.(tip: you can change the command "dark" to "light".)

<div class="navbar-theme-dark">
  <a href="http://github.com">GitHub</a>
</div>

Sidenav

These codes may help you.Try to change the links

<div id="sidenav" class="sidenav">
  <a href="jsvascript:void(0)" class="closebtn" onclick="closenav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  </div>
<span style="font-size:30px;cursor:pointer" onclick="opennav()">&#9776;</span>

Features

Back Button

<button  onclick="goback()">Back</button>

Try to change the key word "goback" to "gofoward"

Snackbar

Before you use,add this to your html file(body tag) <body onload="snackbar()">

<div id="snackbar">Welcome<strong> to </strong>use！</div>

Information

<div class="info" style="color:grey;" onclick="info()">jyzjyzjy;
  <span class="infotext" id="info">ZJYZJYZJY!</span>
</div>

Timer

<script src="https://cdn.jsdelivr.net/gh/crqblog/blog.js@v.1.2.5/js/timer.js"></script>

Design

Page

row

<div class="row">
  ...
</div>

container

<div class="container">
  ...
</div>

inbox

<div class="inbox">
  ...
</div>

e.g.

<div class="container">
      <h2>About us:</h2>
    <p>Author:</p></br>
<p>The project was build by Chen Ruiqi(crq)<p>
      <script src="https://cdn.jsdelivr.net/gh/crqblog/blog.js@v.1.2.5/js/timer.js"></script>
   <div class="inbox">
      <h2>Friends</h2>
      <h5>ZJY:</h5>
      <div class="fakeimg" style="height:200px;">no photo</div>
    </div>
  </div>

Bar

<div class="bar bar-warning">
...
</div>

You can change the "warning" command to "done" or "information"

License

MIT

hy89173584jiayu / bwb

Bwb