www.digitalmars.com         C & C++   DMDScript  

digitalmars.D.learn - How to use bootstrap with vibe.d.

reply Alaindevos <devosalain ymail.com> writes:
(title).
In flask it is "from flask_bootstrap import Bootstrap".
But what do you have to do with vibe.d ?
Nov 04 2020
parent reply James Blachly <james.blachly gmail.com> writes:
On Wednesday, 4 November 2020 at 19:01:16 UTC, Alaindevos wrote:

 (title).
 In flask it is "from flask_bootstrap import Bootstrap".
 But what do you have to do with vibe.d ?


I am not sure you really understand what bootstrap is?
Nov 04 2020
parent reply Alaindevos <devosalain ymail.com> writes:
It know it gives you nice buttons.
I suppose to use it you add the bootstrap .js and .css file links 
to the diet templates.
Nov 05 2020
parent reply Alaindevos <devosalain ymail.com> writes:
This is from the bootstrap documentation. I think you must adapt 
this to .dt files.
<!doctype html>
<html lang="en">
   <head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, 
initial-scale=1, shrink-to-fit=no">

     <!-- Bootstrap CSS -->
     <link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUO
cWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

     <title>Hello, world!</title>
   </head>
   <body>
     <h1>Hello, world!</h1>

     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script 
src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4Y
RvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script 
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZ
rnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script 
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGz
xFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
</html>
Nov 05 2020
next sibling parent James Blachly <james.blachly gmail.com> writes:
On Thursday, 5 November 2020 at 16:22:11 UTC, Alaindevos wrote:

 This is from the bootstrap documentation. I think you must 
 adapt this to .dt files.


Correct. It looks like flask_bootstrap is just a convenience that 
injects the js and css scripts or script URI for you into master 
flask template.
Nov 05 2020
prev sibling next sibling parent Arjan <arjan ask.me.to> writes:
On Thursday, 5 November 2020 at 16:22:11 UTC, Alaindevos wrote:

 This is from the bootstrap documentation. I think you must 
 adapt this to .dt files.


```
...
...
html( lang='nl' )
   head

     meta( charset="utf-8")
     meta( name="viewport"
           content="width=device-width, initial-scale=1, 
shrink-to-fit=no" )
     link( rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
           
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUO
cWr7x9JvoRxT2MZw1T" crossorigin="anonymous")
     //- fontawesome icons from localhost
     link( rel="stylesheet" href="/css/fontawesome.css" )
     link( rel="stylesheet" href="/css/brands.css" )
     link( rel="stylesheet" href="/css/solid.css" )

   body
     //- main page0
     div.d-flex.flex-column.h-100
       //- nav bar
       nav.navbar.navbar-expand-sm.sticky-top
...
```

Like this.
Nov 07 2020
prev sibling parent Arjan <arjan ask.me.to> writes:
On Thursday, 5 November 2020 at 16:22:11 UTC, Alaindevos wrote:

 This is from the bootstrap documentation. I think you must 
 adapt this to .dt files.


dt files are basically pugjs https://pugjs.org/ files.

When you use vscode with this extension: 
https://marketplace.visualstudio.com/items?itemName=ditto.convert-html-to-pug

It becomes easy to convert from html to pug/dt.
Nov 07 2020