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? 

Odnośnik do komentarza
Udostępnij na innych stronach
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/

Odnośnik do komentarza
Udostępnij na innych stronach
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. 

Odnośnik do komentarza
Udostępnij na innych stronach
Mion Specjalista

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 ?

Odnośnik do komentarza
Udostępnij na innych stronach
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. 

Odnośnik do komentarza
Udostępnij na innych stronach
Mion Specjalista

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 .

Odnośnik do komentarza
Udostępnij na innych stronach
  • 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
Odnośnik do komentarza
Udostępnij na innych stronach
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 :(

Odnośnik do komentarza
Udostępnij na innych stronach
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..

Odnośnik do komentarza
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ę
 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