Bootstrap/CSS ne fonctionne pas sur Github Pages

J'essaie de mettre mon code sur les pages Github. Cela se voit et fonctionne, mais le style est désactivé, j'attache des photos de ce à quoi ça ressemble quand je teste index.html localement ou quand j'ouvre ma page github.io. Comment est-ce que je peux avoir l'air quand je le teste localement?Bootstrap/CSS ne fonctionne pas sur Github Pages

 <head> 
    <script src="jquery-3.1.1.min.js"></script> 
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <script src="bootstrap.min.js"></script> 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.png" /> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="utf-8"> 
    <script src="examples.js" defer></script> 
    <!-- stylesheet --> 
    <link rel="stylesheet" type="text/css" href="main.scss"> 
    </head>

Mon main.scss:

#utable { 

background-color: #e6e6e6; 
width: 75%; 
margin-left: 40px; 
} 


input { 
text-align: right; 
display: block !important; 
padding: 0 !important; 
margin: 0 !important; 
border: 0 !important; 
width: 98% !important; 
border-radius: 0 !important; 
line-height: 1 !important; 

} 
td { 
margin: 0 !important; 
padding: 0 !important; 
border: 0; 
} 
tr { 
margin: 0 !important; 
padding: 0 !important; 
border: 0; 
} 

.box { 
background-color: #e6e6e6; 
width: 75%; 
margin-left: 40px; 

padding: 3px; 
} 

hr { 
background-color: #1F5D15 !important; 
color: #1F5D15 !important; 
border: solid 2px #1F5D15 !important; 
heigth: 1px !important; 
width: 100% !important; 
} 

.form-control {margin:0; 
display: inline-block; 
} 

body { 
width: 95%; 
margin:0; 
padding-top:50px; 
} 

.tab { 
margin-left: 40px; 
} 

tr.spacer { 
border-bottom: 15px solid #e6e6e6; 
} 



#masthead { 
min-height:270px; 
background-color:#1F5D15; 
color:#aaaacc; 
} 

#masthead h1 { 
font-size: 55px; 
line-height: 1; 
} 

#masthead .well { 
margin-top:13%; 
background-color:#FFFFFF; 
border-color:#1F5D15; 
} 

.icon-bar { 
background-color:#fff; 
} 

@media screen and (min-width: 768px) { 
#masthead h1 { 
    font-size: 100px; 
} 
} 

.navbar-bright { 
background-color:#111155; 
color:#fff; 
} 

.navbar-bright a, #masthead a, #masthead .lead { 
color:#aaaacc; 
} 

.navbar-bright li > a:hover { 
background-color:#000033; 
} 

.affix-top,.affix{ 
position: static; 
} 

@media (min-width: 979px) { 
#sidebar.affix-top { 
position: static; 
margin-top:30px; 
width:228px; 
} 

#sidebar.affix-bottom { 
position: relative; 
} 

#sidebar.affix { 
position: fixed; 
top:70px; 
width:228px; 
    } 
} 

#sidebar li.active { 
border:0 #eee solid; 
border-right-width:4px; 
} 

#sidebar li li.active { 
border:0 #ccc solid; 
border-right-width:3px; 
} 

#mainCol h2 { 
padding-top: 55px; 
margin-top: -55px; 
}

Source

2017-07-20 OTPYG

Vous devez compiler votre fichier CSS à SCSS. –

Cela a fonctionné, merci! – OTPYG

Le problème est l'emplacement de votre fichier est erroné

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script src="bootstrap.min.js"></script>

Vous devez vérifier votre emplacement de css, js. Lorsque vous téléchargez sur le serveur, vous devez corriger cela. Il est comme

<link href="https://myreponame.github.io/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://myreponame.github.io/bootstrap.min.js"></script>

ou vous pouvez utiliser un CDN

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

Source

2017-07-20 04:46:42

Qu'en est-il de ? Comme je dois faire quelque chose de similaire pour jquery ou les fonctions ne fonctionneront pas? – OTPYG

Vous devez savoir où est exactement le lien jquery sur votre serveur. C'est comme un fichier bootstrap. Vous pouvez remplacer votre . Ça va marcher. –

Bootstrap/CSS ne fonctionne pas sur Github Pages

Répondre

Questions connexes