-

CHANGES

@@ -9,4 +9,7 @@ first release
 - reset the password to random only if the mail was successfully sent
 
 1.1.2-release-build160619
-- sticky navbar in ui
+- sticky navbar in ui
+
+1.2.0-release-build290619
+- add bootstrap support

README.md

@@ -155,6 +155,24 @@ Take care to the template parameters. Add them as you need. `Name` parameter mus
 
 Look carefully over **TODO** and **NOTE** comments because you may need to adjust as you need.
 
+### Make your application look better with Bootstrap
+
+For keeping things simple, the skeleton comes with a very basic set of widgets based on W3CSS. You can use [Bootstrap](https://getbootstrap.com/) following the next steps:
+
+- remove inputs `height` from `style.html` because is useful just for W3CSS framework
+
+		select,input,button {
+		  -height:30px; /* all inputs must have the same height */
+
+- use fixed length in forms containers, eg:
+
+		<div class="w3-container" style="width:400px">
+
+- add bootstrap classes on inputs (or other elements), eg:
+
+		<input class="form-control" type="text">
+		<button class="btn btn-primary" type="submit">
+
 ### Known issues
 
 The skeleton is designed to work with HTML5 so make sure your browser support this.

main.go

@@ -19,7 +19,7 @@ import (
 
 // TODO application version
 // https://semver.org/#semantic-versioning-200
-const SW_VERSION = "1.1.2-release-build160619"
+const SW_VERSION = "1.2.0-release-build290619"
 
 // NOTE session cookie name
 const SESSID = "SESSID"

ui/head.html

@@ -7,16 +7,15 @@
 <meta http-equiv="Expires" content="0" />
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.css" />
-
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-sliderAccess.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
 <!--Google Charts https://developers.google.com/chart/terms-->
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <!--https://stackoverflow.com/questions/10511893/prevent-back-button-after-logout-->

ui/style.html

@@ -1,7 +1,7 @@
 [[define "style"]]
 <link href='http://fonts.googleapis.com/css?family=Anonymous+Pro:400normal,700normal&subset=all' rel='stylesheet' type='text/css'>
 <style>
-a { text-decoration: none }
+a:link, a:hover, a:visited { text-decoration: none; color: #000; }
 select,input,button {
   height:30px; /* all inputs must have the same height */
   font-family:Sans,FontAwesome; /* generic font then Awesome */