Skocz do zawartości

  • Cześć!

    Witaj na forum RootNode - aby pisać u nas musisz się zarejestrować, a następnie zalogować. Posty pisane z kont niezarejestrowanych nie są widoczne publicznie.

Bootstrap - lokalnie czy zdalnie?

Pawel_15

Przez Pawel_15
w Webmastering

 Udostępnij

Rekomendowane odpowiedzi

Pawel_15 Specjalista

Pawel_15

Opublikowano
Opublikowano

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? 

oui Rising Star

oui

Opublikowano
Opublikowano

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
Mega Entuzjasta

Mega

Opublikowano
Opublikowano

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 :)

szarik Stały gość

szarik

Opublikowano
Opublikowano

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/

Pawel_15 Specjalista

Pawel_15

Opublikowano
  • Autor
Opublikowano

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ą :)

Pawel_15 Specjalista

Pawel_15

Opublikowano
  • Autor
Opublikowano

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. 

Mion Mentor

Mion

Opublikowano
Opublikowano
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 ?

Pawel_15 Specjalista

Pawel_15

Opublikowano
  • Autor
Opublikowano

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. 

Pawel_15 Specjalista

Pawel_15

Opublikowano
  • Autor
Opublikowano

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. 

Mion Mentor

Mion

Opublikowano
Opublikowano
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 .

Pawel_15 Specjalista

Pawel_15

Opublikowano
  • Autor
Opublikowano

@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 :) 

  • 3 tygodnie później...
Lindsey Podróżnik

Lindsey

Opublikowano
Opublikowano (edytowane)

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
Pawel_15 Specjalista

Pawel_15

Opublikowano
  • Autor
Opublikowano

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 :(

Pawel_15 Specjalista

Pawel_15

Opublikowano
  • Autor
Opublikowano

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

nnd.newbie Stały gość

nnd.newbie

Opublikowano
Opublikowano (edytowane)

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
Pawel_15 Specjalista

Pawel_15

Opublikowano
  • Autor
Opublikowano

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>

 

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ę
 Udostępnij
Tematy

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

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

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

  I accept