Skocz do zawartości
Pawel_15

Bootstrap - lokalnie czy zdalnie?

Rekomendowane odpowiedzi

Sklejam prostą stronę w HTML i postanowiłem ją nieco "upiększyć" różnymi bajerami takimi jak Alerts, Accordion, Carousel, Buttons z wykorzystaniem Bootstrap 3 w oparciu o http://w3schools.com

W przykładach a konkretnie w przykładowych kodach są odnośniki do zewnętrznych plików które odpowiadają za skrypty js, bootstrap etc:

- style: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
- jquery: https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

- bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Nie specjalnie lubię linkować cokolwiek z innych serwerów. W każdej chwili mogą się zmienić linki, może paść usługa albo się zlikwidować i na stronie zrobi się cyrk. 

Chciałbym powyższe trzy pliki pobrać i wrzucić na serwer i do nich linkować wszystkie odwołania do elementów BS. Zadziała taki bajer czy muszę na siłę mieć połączenie z zewnętrznymi plikami? 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Polecam zainteresować się LESS/SCSS. Wtedy możesz "zbudować" swojego bootstrapa, nadpisując jego domyślne zmienne i użyć różnych modułów. 

  • Lubię 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeżeli pobierz sobie te pliki na swój serwer bez problemów powinno Ci wszystko działać.  Tym bardziej, że sprawdzenie tego (działa/nie działa) nie będzie Cię kosztować dużo czasu :)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Spokojnie możesz serweować lokalnie z serwera... ponadto możesz sobie kompilować w locie bootstrapa tak jak pisał @mrViperoo  po stronie swojego serwera.

 

Tu https://getbootstrap.com/docs/3.3/customize/ przykładowo możesz z poziomu www stworzyć własną 'paczkę' do v3

 

Linki:

https://getbootstrap.com/docs/4.1/getting-started/theming/

http://getbootstrap.com/docs/4.1/getting-started/download/

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Dziękuję za szybki odzew :) Aż tak zaawansowany w tych sprawach jeszcze nie jestem żeby kompilować coś swojego. Na początek wystarczy mi linkowanie do tych plików z własnego serwera z wykorzystaniem gotowców niemniej dzięki za linki, może w przyszłości się przydadzą :)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

A jednak nie ogarniam tematu :( Obojętnie czy podlinkuję pliki z własnego serwera czy z CDN/Google/Bootstrapa to leci mi CSS oryginalnego szablonu. Analiza tych zewnętrznych plików przerasta moje możliwości. Ze strony https://www.w3schools.com/bootstrap/default.asp chciałbym na swojej zaimplementować tylko kilka elementów: BS Images, BS Alerts, BS Buttons, BS Progress Bars, BS Collapse/Accordion i BS Carousel. Da się jakoś na szybko zmontować plik bootstrapa czy muszę się bawić w kompilowanie wszystkiego od zera? Jestem w tym totalnie zielony. Na WP wystarczyło zainstalować Shortcode i dwoma kliknięciami miałem to co chciałem. Na HTML jest widzę z tym sporo roboty. 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
20 minut temu, Pawel_15 napisał:

hciałbym na swojej zaimplementować tylko kilka elementów: BS Images, BS Alerts, BS Buttons, BS Progress Bars

Hmmm ale po co takie kombinacje ? Na stronie https://getbootstrap.com/ masz 4 linki do zamieszenie w tym jeden CSS i masz podpiętego bootstrap'a. Lub po ściągnięciu do siebie na serwer.

Jeśli chciał byś "skompilować" tylko niektóre style bootstrapa to też jesteś wstanie, ale oszczędność tech kilku KB chyba można pominąć.

Tu masz składowe: https://github.com/twbs/bootstrap/tree/v4-dev/scss

https://github.com/twbs/bootstrap/blob/v4-dev/scss/bootstrap.scss

Poza tym  skoro już pakujesz bootstrap'a, to dlaczego robisz layout "sztywnego ułana" rodem z ubiegłego wieku, a nie układ RWD ?

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Tylko chodzi mi o to że jak podlinkuję te pliki to wykrzacza mi się CSS mojego starego przedpotopowego szablonu. Jakieś wpisy muszą się dublować i gryźć co powoduje taki a nie inny skutek. 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Znalazłem w sieci częściowe rozwiązanie mojego problemu dotyczącego Alerts Message:

<style>
.container{width:600px; margin:0 auto; margin-top:40px; padding-bottom: 30px;}
.message{padding: 13px; margin-top: 15px; border-radius: 4px; border: #ccc solid 1px;}
.message p{margin: 0px; font-size: 14px; font-weight: normal; font-family: arial;}
.success{color: #2C7635;background-color: #DFF0D4;border: #D6E9C4 solid 1px;}
.information{color: #31708C;background-color: #D1E4F1;border: #BCE8EF solid 1px;}
.warning{color: #8A6D39;background-color: #FCF8E1;border: #FAEBCA solid 1px;}
.failure{color: #AC260D;background-color: #F2DEDC;border: #EBCCCF solid 1px;}
</style>

Wygląda to tak samo jak z wykorzystaniem Bootstrap 3. Do pełni szczęścia muszę jeszcze znaleźć podobny kod na Accordion. 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
2 godziny temu, Pawel_15 napisał:

A da się z tego pliku powyciągać odpowiednie wpisy odpowiedzialne tylko za konkretną funkcję/klasę? 

W pliku jest straszny bałagan, nic nie jest poukładane, wszystko jest sklecione razem. 

To nie łatwiej zmieniać stary kod niż kod bootstrapa ?

Możesz użyć https://getfirebug.com/  i znajdziesz jakie selektory klasy CSS  są nadpisywane .

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

@szarik dziękuję za link. Wstępnie utworzyłem własny plik bootstrap.css w którym wkleiłem tylko klasy do potrzebnym mi elementów. Poza Accordion/Collapse wszystko działa prawidłowo i nie wykrzacza mi css'a od mojego przedpotopowego szablonu :) 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

do accordion i collapse musisz podlinkować js'a  :)

 

Ps. linkowanie z CDN'a jest lepsze dlatego, że jak ktoś raz wejdzie na stronę gdzie ma link z cdn'a to jest on chache'owany i jak później ktoś wejdzie na Twoją stronę gdzie jest ten sam link to plik załaduje się z cache'u a nie będzie pobierany jeszcze raz.

Edytowane przez Lindsey

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Tak wygląda mój plik bootstrap.accordion.css:

.panel-group 
	{
    margin-bottom: 20px;
	}
.panel-group .panel 
	{
    margin-bottom: 0;
    border-radius: 4px;
	}
.panel-default 
	{
    border-color: #ddd;
	}
.panel 
	{
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
	}
.panel-default > .panel-heading 
	{
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
	}
.panel-group .panel-heading 
	{
    border-bottom: 0;
	}
.panel-heading 
	{
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
	}
.panel-title 
	{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
	}
.collapse.in 
	{
    display: block;
	}
.collapse 
	{
    display: none;
	}
.panel-body::after
	{
    clear: both;
	}
.panel-body::after, .panel-body::before,
	{
    display: table;
    content: " ";
	}
.panel-default > .panel-heading + .panel-collapse > .panel-body 
	{
    border-top-color: #ddd;
	}
.panel-group .panel-heading + .panel-collapse > .panel-body 
	{
    border-top: 1px solid #ddd;
	color: #000;
	}
.panel-body 
	{
    padding: 15px;
	}
.panel-group .panel + .panel 
	{
    margin-top: 5px;
	}
  .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height .35s ease;
       -o-transition: height .35s ease;
          transition: height .35s ease;
}

Po podpięciu tego linka:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Nadal accordion działa niepoprawnie. Robię coś źle, tylko nie mogę dojść co to takiego :(

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Na pustej stronie wklejenie kodu:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Blablabla</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Blablabla</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Blablabla</div>
    </div>
  </div>
</div>

z linkowaniem do wspomnianych wyżej plików i nadal nie chce działać poprawnie..

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

EDIT: Sorry,  nie doczytałem, że masz już podpięty bootstrap.js. To sprawdź jeszcze z jquery bo pluginy z Bootstrapa korzystają z jQuery.

Edytowane przez nnd.newbie

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Do poprawnego załadowania bootstrapa jest wymagany jquery i popper. Odpal konsole developera w przeglądarce i sprawdź sobie błędy

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Podpięte oba linki i nadal źle...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się

  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

×

Powiadomienie o plikach cookie

Korzystając z forum, wyrażasz zgodę na: Warunki użytkowania, Regulamin, Polityka prywatności.