Problem in Bootstrap Directory

Asked

Viewed 792 times

0

I’m having a problem where when I try to access Bootstrap directly from the directory folder CSS does not work and only remains a few things, but when I Linko the Bootstrap page it works. Remembering that I am in the last version of Bootstrap. This is . If there is something wrong please help me. I’m currently using css by 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>    

    <script src="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>
html css html5 css3 bootstrap-3

  • face if you will use only for testing use the same Cdn, but if you are developing for a commercial application use the directory. See if when you link the files in your directory the paths are correct, if any folder or file name is missing bootstrap does not work.

2 answers

1


The best way is to use a local directory, because if the link of the css page with the bootstrap is changed you will have big problems. Then I recommend you follow these instructions:

  • To get started download the latest version of Bootstrap here and import up to the directory where your html file is. Remembering that you can copy the files bootstrap.min.css and bootstrap.min.js and place 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 <head>, which is not recommended. Since putting a <script> in the end of the body, on the other hand, allows the content before it already appear to the user without having to wait for its execution. This passes to printing of a website faster, the user does not need to wait each minimum detail be ready before reading the content of the page.

That would be 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>

0

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

In the example below I created a folder called "js" and saved there the file "bootstrap.min.js". 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>

:)

Browser other questions tagged html css html5 css3 bootstrap-3

You are not signed in. Login or sign up in order to post.