• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Bootstrap a drugi stylesheet

VPS Starter Arubacloud
0 głosów
147 wizyt
pytanie zadane 19 kwietnia 2016 w HTML i CSS przez artix132 Użytkownik (870 p.)

Próbuje zrobić menu z kartami za pomocą tego kodu:
 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

Działa on OK, ale jak dodaje do mojego head :
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

to on zaczyna wpływac na drugie menu na mojej stronie.Wszystkim odnośnikom, ul, li  nadałem klasy ale skutek jest taki sam ( po najechaniu zmniejsza sie cały pojemnik):


Mój head:
 

<head>
	<meta name="description" content="LOK Miechów"/>
	<meta name="keywords" content="LOK, Miechów, obronność, stzrelectwo "/>
	<title>LOK Miechów</title>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	
	<meta name=viewport content="width=device-width, initial-scale=1">
	<script src="js/jquery-1.6.4.js"></script>
	<link rel="stylesheet" href="css/fontello.css" type="text/css"/>
	<link   href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>	
	<link  rel="stylesheet" href="lok.css" type="text/css"/>
	
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

W czym problem????

1 odpowiedź

0 głosów
odpowiedź 19 kwietnia 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
Z użyciem BOOTSTRAPA :). Poczytaj jak jest zbudowany szablon w BOOTSTRAP albo zmunifikuj go do tego co jest Ci potrzebne (usuń zbędne klasy). W tym przypadku, ściągnij go i użyj jak zwykłego stylesheet.
komentarz 19 kwietnia 2016 przez artix132 Użytkownik (870 p.)
A dokładniej jak go zmodyfikować, jakie klasy w tym przypdaku są zbędne?
komentarz 19 kwietnia 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
wyrzuć klasy odpowiadające za budowę szablonu (col,md,xs.lg, row, container itd..), wyczyść reguły dla body. Ale... tu jest jedno ale, musisz sprawdzić użyte klasy bo mogą odwoływać do wyższych klas lub nie posiadać odpowiednich reguł. Ja tu i tak, wspominam o klasach odpowiadajacych za budowę. To nie będzie optymilizowany CSS, bo sama jak nazwa wskazuje jest framework do budowy stron i tam jest tego ogrom. Zalecałbym się zdecydować, na czym chcesz zbudować szablon bo możesz mieć 2 arkusze i to samej wielkości. A to niewypada zbyt dobrze, pod względem wydajności.
komentarz 19 kwietnia 2016 przez artix132 Użytkownik (870 p.)

W 1 szym styleshhet mam mało kodu to to nie problem
Ja mam ten cały kod przejrzeć i usunąc co niepptrzebne?!  laughlaughja?!  surpriselaugh
 

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
komentarz 19 kwietnia 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
Ściągnij go ;)
komentarz 19 kwietnia 2016 przez artix132 Użytkownik (870 p.)
W sensie skopiowac kod i wkleić do programu? juz to zrobiłem i dodaje spacje, zeby byl bardziej czytelny a potem bede usuwał co niepotrzebne
komentarz 19 kwietnia 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
tak, pamiętaj o podlinkowaniu jądra jQuery.
komentarz 19 kwietnia 2016 przez artix132 Użytkownik (870 p.)
Sorry, ale o czym?!
Pobrałem ten kod, usunąłem pare linii kodu, podpiąłem jak zwykły plik i działa.
Dzięki
komentarz 20 kwietnia 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
Jak działa to nvm niektóre elementy w bootstrapie potrzebują wsparcia jquery.

Podobne pytania

0 głosów
1 odpowiedź 479 wizyt
0 głosów
1 odpowiedź 569 wizyt
pytanie zadane 20 grudnia 2018 w HTML i CSS przez niezalogowany
+1 głos
4 odpowiedzi 4,014 wizyt
pytanie zadane 4 kwietnia 2016 w HTML i CSS przez Mateusz Kozłowski Nowicjusz (130 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...