strona www w bootstrap 4.0

pawelck · 6 Października 2017

Witam

Ściągnąłem sobie boostrapa 4.0, oraz szablon przykładowy.

Mam katalog bootstrap, w nim katalog css, js. Plik index.html, jeden obrazek 1.jpg oraz favicon.ico

Niestety nie wiem jak zrobić żeby po otwarciu index w przeglądarce były te style, szablon a nie sam tekst.

Tak to ma wyglądać https://v4-alpha.getbootstrap.com/examples/album/#

Wziąłem pokaż kod źródłowy i skopiowałem do index.html

Próbowałem ustawić te ścieżki link href

zamiast <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">

dałem <link href="css/bootstrap.min.css" rel="stylesheet"

lub dałem <link href="/css/bootstrap.min.css" rel="stylesheet"

Dzięki za pomoc

Cały plik index:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="">
   <meta name="author" content="">
   <link rel="icon" href="favicon.ico">

   <title>Album example for Bootstrap</title>

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

   <!-- Custom styles for this template -->
   <link href="album.css" rel="stylesheet">
 </head>

 <body>

   <div class="collapse bg-dark" id="navbarHeader">
     <div class="container">
       <div class="row">
         <div class="col-sm-8 py-4">
           <h4 class="text-white">About</h4>
           <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
         </div>
         <div class="col-sm-4 py-4">
           <h4 class="text-white">Contact</h4>
           <ul class="list-unstyled">
             <li><a href="#" class="text-white">Follow on Twitter</a></li>
             <li><a href="#" class="text-white">Like on Facebook</a></li>
             <li><a href="#" class="text-white">Email me</a></li>
           </ul>
         </div>
       </div>
     </div>
   </div>
   <div class="navbar navbar-dark bg-dark">
     <div class="container d-flex justify-content-between">
       <a href="#" class="navbar-brand">Album</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
     </div>
   </div>

   <section class="jumbotron text-center">
     <div class="container">
       <h1 class="jumbotron-heading">Album example</h1>
       <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
       <p>
         <a href="#" class="btn btn-primary">Main call to action</a>
         <a href="#" class="btn btn-secondary">Secondary action</a>
       </p>
     </div>
   </section>

   <div class="album text-muted">
     <div class="container">

       <div class="row">
         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>
         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>
         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>

         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>
         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>
         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>

         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>
         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>
         <div class="card">
           <img data-src="holder.js/100px280/thumb" alt="Card image cap">
           <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
         </div>
       </div>

     </div>
   </div>

   <footer class="text-muted">
     <div class="container">
       <p class="float-right">
         <a href="#">Back to top</a>
       </p>
       <p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
       <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
     </div>
   </footer>

   <!-- Bootstrap core JavaScript
   ================================================== -->
   <!-- Placed at the end of the document so the pages load faster -->
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
   <script src="../../../../assets/js/vendor/popper.min.js"></script>
   <script src="../../../../assets/js/vendor/holder.min.js"></script>
   <script>
     $(function () {
       Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" });
     });
   </script>
   <script src="../../../../dist/js/bootstrap.min.js"></script>
   <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
   <script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
 </body>
</html>

Matt91111 · 6 Października 2017

Ale weź to trochu sformatuj :foch: --> (code)twój Kłot(/code) zastąp nawiasy kwadratowymi [].

Matt91111 · 6 Października 2017

https://www.w3schools.com/css/css_howto.asp

A tak w ogóle to wygląda jak byś najzwyczajniej miał źle skonfigurowane relatywne ścieżki do plików.

Wg. Ciebie wygląda to w ten sposób:

[root]

[css/] --| bootstrap.min.css (MUSI tu oczywiście być)

|

index.html

oczywiście domknąłeś

<link href="css/bootstrap.min.css" rel="stylesheet"

przy użyciu znaku > ??

spróbuj użyć relatywnego prefixu w ścieżce:

pawelck · 6 Października 2017

https://www.w3schools.com/css/css_howto.asp
A tak w ogóle to wygląda jak byś najzwyczajniej miał źle skonfigurowane relatywne ścieżki do plików.

Wg. Ciebie wygląda to w ten sposób:
[root]
[css/] --| bootstrap.min.css (MUSI tu oczywiście być)
|
index.html

oczywiście domknąłeś przy użyciu znaku > ??

spróbuj użyć relatywnego prefixu w ścieżce:
<link href="./css/bootstrap.min.css" rel="stylesheet">

./css..... pomogło, dzięki, ale jeszcze nie wiem gdzie się dodaje ścieżkę do zdjęcia, tych miniaturek

Matt91111 · 7 Października 2017

https://www.w3schools.com/tags/tag_img.asp

pawelck · 7 Października 2017

https://www.w3schools.com/tags/tag_img.asp

Ja mam coś nie tak w kodzie bo nie mam nawet pustych kwadratów tylko po prostu text

obrazki są ale nie w osobnych kwadratach

Jeśli ktoś mógłby zobaczyć, byłbym bardzo bardzo wdzięczny

http://host1gb.net.pl/download.php?file=338eb1ff6967289ed3feefaa38e1e0e9

Viking · 7 Października 2017

CO rozumiesz przez osobne kwadraty? Obrazki się wyświetlają.

pawelck · 7 Października 2017

CO rozumiesz przez osobne kwadraty? Obrazki się wyświetlają.

Tutaj jest jak to powinno wyglądać, taka galeria a nie jeden pod drugim

https://v4-alpha.getbootstrap.com/examples/album/#

Viking · 7 Października 2017

Tam są reguły arkusza album.css którego ty nie masz.

pawelck · 7 Października 2017

Tam są reguły arkusza album.css którego ty nie masz.

Dzięki wielkie. Kliknąłem na stronie pokaż źródło potem kliknąłem album.css i mam kod. Wszystko działa raczej.

Czy jest jakiś edytor html,css który pokaże wynik w oknie obok tak jak np Visual studio z UWP?. Skąd co się bierze, kolorowanie. Kiedyś miałem jakiś zajączek ale to było parę lat temu

Viking · 8 Października 2017

Netbeans + narzędzia deweloperskie przeglądarki każdej.

pawelck · 8 Października 2017

Netbeans + narzędzia deweloperskie przeglądarki każdej.

Zbyt hardkorowe, skorzystam z notepad++

Mógłby ktoś jeszcze napisać czy to jest pisane w html5 czy jak?

10 lat nie miałem doczynienia z html i nie wiem gdzie mam wstawić background-color: orange dla całego tła

:Album example

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.

próbowałem <section class="jumbotron text-center">

zmienić na <section class="jumbotron text-center" background-color: orange>

ale to nic nie daje

Viking · 8 Października 2017

Weź jakiś kurs podstaw html przeczytaj w końcu. Albo w css, albo w atrybucie style.

Temat został przeniesiony do archiwum

strona www w bootstrap 4.0

Rekomendowane odpowiedzi

pawelck 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Matt91111 5

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Matt91111 5

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

pawelck 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Matt91111 5

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

pawelck 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Viking 2

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

pawelck 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Viking 2

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

pawelck 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Viking 2

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

pawelck 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Viking 2

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Ostatnio przeglądający 0 użytkowników

Tematy

Odpowiedzi

Aktywni użytkownicy

Przeglądaj

Aktywność