Menu
Search

Forums

Forum Index

Thread overview
How to use bootstrap with vibe.d.
Nov 04, 2020
Alaindevos
Nov 05, 2020
James Blachly
Nov 05, 2020
Alaindevos
Nov 05, 2020
Alaindevos
Nov 06, 2020
James Blachly
Nov 07, 2020
Arjan
Nov 07, 2020
Arjan
November 04, 2020
Gravatar of AlaindevosPosted by AlaindevosReply
Alaindevos
Gravatar of Alaindevos


Reply
(title).
In flask it is "from flask_bootstrap import Bootstrap".
But what do you have to do with vibe.d ?
November 05, 2020
Gravatar of James BlachlyPosted by James Blachly
in reply to Alaindevos		Reply
James Blachly
Gravatar of James Blachly
Posted in reply to Alaindevos


Reply
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?
November 05, 2020
Gravatar of AlaindevosPosted by Alaindevos
in reply to James Blachly		Reply
Alaindevos
Gravatar of Alaindevos
Posted in reply to James Blachly


Reply
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.
November 05, 2020
Gravatar of AlaindevosPosted by Alaindevos
in reply to Alaindevos		Reply
Alaindevos
Gravatar of Alaindevos
Posted in reply to Alaindevos


Reply
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/iJTQUOhcWr7x9JvoRxT2MZw1T" 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+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
November 06, 2020
Gravatar of James BlachlyPosted by James Blachly
in reply to Alaindevos		Reply
James Blachly
Gravatar of James Blachly
Posted in reply to Alaindevos


Reply
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.
November 07, 2020
Gravatar of ArjanPosted by Arjan
in reply to Alaindevos		Reply
Arjan
Gravatar of Arjan
Posted in reply to Alaindevos


Reply
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
    title #{pageTitle}
    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/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.
November 07, 2020
Gravatar of ArjanPosted by Arjan
in reply to Alaindevos		Reply
Arjan
Gravatar of Arjan
Posted in reply to Alaindevos


Reply
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.