Problem in Bootstrap Directory

Navigation
-1

I have a problem where when I try to access Bootstrap directly from the directory folder CSS does not work and only a few things remain, but when I link to the Bootstrap page it works. Remember that I am in the last version of Bootstrap. This is the . If something is wrong please help me. I'm currently using css for the same site. 

<head>
    <title>Site - Responsivo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/default.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

</head>
    
asked by anonymous 21.10.2017 / 20:06

2 answers

1

The best way is to use a local directory, because even if the css page link with the bootstrap changes, you will have major problems. So I recommend that you follow these instructions:

  • To get started download the latest version of Bootstrap here and import to the directory where your html file is. Remembering that you can copy the files bootstrap.min.css and bootstrap.min.js and put them in the their respective folders, css and js. Or load everything from the bootstrap, as I did in the example below.
  • Another thing I noticed is the fact that I'm loading the script into the <head> , which is not recommended. Since you put a <script> in the end of the body, on the other hand, allows content before it already appear to the user without having to wait for it to run. This becomes printing a faster site, the user does not need to wait each least detail is ready before reading the contents of the page.

This would give your code: 

    <!DOCTYPE html>
    <html>
        <head>

            <title>Título do seu site</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="">
            <meta name="author" content="">
            <link rel="icon" href="#">

            <title>Musika Klub</title>

            <!--Aqui o css do bootstrap é importado --> 
            <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

            <!--Aqui o seu css é importado --> 
            <link href="css/css_index.css" rel="stylesheet">

        </head>
        <body>

            <!--Aqui o seu script é carregado -->  
            <script src="bootstrap/dist/js/bootstrap.min.js"></script>

        </body>
  </html>
    
08.11.2017 / 17:30
0

To use the files locally instead of pointing to the CDN, you must first save them in a folder below the root directory of your site.

In the example below I created a folder named "js" and saved the file "bootstrap.min.js" there. I suggest you use the "bootstrap-4.0.0-alpha.6-dist" version that can be obtained at here . 

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title></title>

        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

    </head>

    <body>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>

    </body>

</html>

:)

    
22.10.2017 / 03:56
Naval battle program C # [closed] Create Options with div and make interaction with JavaScript