0

Estou com um problema no qual quando tento acessar o Bootstrap direto da pasta do diretório o CSS não funciona e só permanece algumas coisas, mas quando eu linko a página do Bootstrap ele funciona. Lembrando que estou na ultima versão do Bootstrap. Este é o . Se estiver algo errado por favor me ajudem. No momento estou usando o css pelo site mesmo.

<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>
1
  • cara se vc for usar apenas para teste use o cdn mesmo, mas se estiver desenvolvendo para uma aplicação comercial use o diretório. Veja se quando vc link os arquivos do seu diretório os caminhos estão corretos, se faltar alguma pasta ou nome de arquivo o bootstrap não funciona.
    – LeAndrade
    Commented 21/10/2017 às 19:11

2 Respostas 2

1

A melhor forma é usar um diretório local, até porque se o link da página css com o bootstrap for alterado você terá grandes problemas. Então recomendo que siga essas instruções:

  • Para começar baixe a última versão do Bootstrap aqui e importe até o diretório onde está o seu arquivo html. Lembrando que você pode copiar os arquivos bootstrap.min.css e bootstrap.min.js e colocar nas suas respectivas pastas, css e js. Ou então carregar tudo da pasta do bootstrap, como eu fiz no exemplo abaixo.
  • Outra coisa que percebi é o fato de estar carregando o script no <head>, o que não é recomendável. Visto que colocar um <script> no final do body, por outro lado, permite que o conteúdo antes dele já apareça para o usuário sem ter de esperar sua execução. Isso passa a impressão de um site mais rápido, o usuário não precisa esperar cada mínimo detalhe estar pronto antes de ler o conteúdo da página.

Assim ficaria o seu código:

    <!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

Para utilizar os arquivos localmente ao invés de apontar para o CDN, você deverá primeiro salvá-los em uma pasta abaixo do diretório raíz do seu site.

No exemplo abaixo eu criei uma pasta chamadad "js" e salvei lá o arquivo "bootstrap.min.js". Sugiro que utilize a versão "bootstrap-4.0.0-alpha.6-dist" que pode ser obtida em aqui.

<!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> 

:)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .