Skocz do zawartości
Pawel_15

Bootstrap - lokalnie czy zdalnie?

Polecane posty

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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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.

Edytowano przez Lindsey

Udostępnij ten post


Link to postu
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 ten post


Link to postu
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 ten post


Link to postu
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.

Edytowano przez nnd.newbie

Udostępnij ten post


Link to postu
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 ten post


Link to postu
Udostępnij na innych stronach

Dołącz do rozmowy

Możesz pisać i zarejestrować się później. Jeśli masz konto,Zaloguj się teraz, aby publikować na swoim koncie.

Gość
Odpowiedz...

×   Wklejony jako tekst z formatowaniem.   Wklej jako zwykły tekst

  Dozwolonych jest tylko 75 emoji.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Twoja poprzednia zawartość została przywrócona.   Wyczyść edytor

×   Nie możesz wkleić zdjęć bezpośrednio. Prześlij lub wstaw obrazy z adresu URL.


  • Kto przegląda   0 użytkowników

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

×
×
  • Utwórz nowe...

Ważne informacje

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