Bootstrapp Affix Function

109 Views Asked by OptimusPrime At 26 November 2018 at 15:58

If I copy the code from W3Schools to my webserver then the "sticky" menu works as long as I am referencing the CDN path for the script and stylesheet.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

If I change it to the location of the Bootstrap files that I have downloaded to the server then it doesn't work, although all other bootstrap styles and javascript functions work when referencing the local files. I have tried downloading the latest from Bootstrap as well.

Sorry as I am probably missing something obvious, but is it possible to download the function and styles necessary for this to work?

Original Q&A

There are 1 best solutions below

Diego Avila On 26 November 2018 at 16:20

i suggest try this: first you need set your static files in this case Bootstrap(css, js, etc):

static
....Bootstrap
......CSS
.........bootstrap.min.css
......JS
.........jquery-3.3.1.slim.min.js
.........popper.min.js
.........bootstrap.min.js
....etc
..etc

in this case we has the posible structure folder for static into this folder put the folder that content css an js files of bootstrap. the next is set your links for css and js files in you template similar to this:

{% load staticfiles %}
<!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="{% static 'Bootstrap/css/bootstrap.min.css' %}">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="{% static 'Bootstrap/js/jquery-3.3.1.slim.min.js' %}"></script>
    <script src="{% static 'Bootstrap/js/popper.min.js' %}"></script>
    <script src="{% static 'Bootstrap/js/bootstrap.min.js' %}"></script>
  </body>
</html>

now you need this on your settings.py:

..
..
..
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/static/',
]
...
..

that is all for load bootstrap or other static files in yout template, please try and good luck.

For download Bootstrap4 , 3..etc.. go to the official website:

Official site Bootstrap

Bootstrapp Affix Function

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in DJANGO

Related Questions in DJANGO-BOOTSTRAP3

Related Questions in DJANGO-BOOTSTRAP4

Trending Questions

Popular # Hahtags

Popular Questions