Jak zdjąć korbę w rowerze

Korba rowerowa jest o tyle niewdzięcznym elementem, że osobom bez doświadczenia dość trudno ją zdjąć z suportu. Można zastosować metodę jak opisałem tutaj, ale lepiej posłużyć się specjalnym kluczem/ściągaczem upraszczającym cały proces.

Opisany ściągacz wygląda tak:

Składa się z 2 części:

  1. części wkręcanej w gwint wewnątrz korby
  2. śruby wypychającej oś suportu z korby

Czytaj dalej

Pierwszy krok do spokoju ducha

Nie, nie będzie o medytacji i innych takich. Wystarczy wyłączyć automatyczną synchronizację poczty w telefonie. Na prawdę. Dzień jest spokojniejszy, a co ma być zrobione i tak będzie zrobione.

Szybki kurs Twitter Bootstrap, lekcja numer 6

Od poprzedniego odcinka przyspieszonego kursu Twitter Bootstrap minęło sporo czasu. Nic to, nadrabiamy zaległości i w dzisiejszym odcinku będzie o przyciskach.

W Bootstrapie przyciski tworzymy dodając klasę CSS btn do tagów <a> i <button>. Przykładowo kod HTML

<button class="btn">Przycisk</button>

Wygeneruje coś takiego:
Oprócz klasy btn mamy jeszcze do dyspozycji jej modyfikatory (dodajemy do elementu klasę btn i jej modyfikator):

Szybko, prosto, łatwo i przyjemnie. A w następnym odcinku będzie o ikonach. A może nie… zobaczymy…

Szybki kurs Twitter Bootstrap, lekcja numer 5

W dzisiejszym odcinku 2 nowe elementy naszej strony:

  • belka górna z formularzem logowania,
  • paginator na dole strony.
Belkę umieszczamy przed główną sekcją <div class=”container”> w sposób następujący:
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
   <div class="container">
	<a class="brand" href="">Twitter Bootstrap</a>
    <form class="navbar-form pull-right">
     <input type="text" name="login" class="input-medium" placeholder="email" />
	 <input type="password" name="password" class="input-medium" placeholder="hasło" />
     <button type="submit" class="btn btn-primary">Zaloguj</button>
	</form>
   </div>
  </div>
 </div>

Sprawę formularzy i przycisków na razie tylko sygnalizuję, więcej na ten temat za jakiś czas.

Paginację umieszczamy jako osobny wiersz siatki:

<div class="row">
   <div class="span12">
    <div class="pagination pull-right">
     <ul>
      <li><a href="#">&laquo;</a></li>
      <li><a href="#">1</a></li>
      <li class="active"><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">&raquo;</a></li>
     </ul>
    </div>
   </div>
  </div>

W efekcie uzyskamy coś takiego:

Cały plik z tą częścią kursu można pobrać tutaj.

Szybki kurs Twitter Bootstrap, lekcja numer 4

Szybki kurs Twitter Bootstrap przyspiesza. W dzisiejszym odcinku dodamy do naszej strony stopkę z dwoma kolumnami (<footer>), a lewą kolumnę otoczymy ramką (klasa CSS well). To będzie nasze menu nawigacyjne.

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Tutorial Lesson 3</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
 <div class="container">
  <header>
   <h1>Tytuł strony</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
   do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
   enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
   ut aliquip ex ea commodo consequat.</p>
  </header>
  <div class="row">
   <div class="span3">
   <div class="well">
    <h2>Kolumna lewa</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
   </div>
   <div class="span9">
    <h2>Kolumna prawa</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
  </div>
  <hr />
  <footer>
   <div class="row">
    <div class="span6">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat.</p>
	</div>
	<div class="span6">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat.</p>
	</div>
   </div>
  </footer>
 </div>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

Zauważcie, że szerokość prawej kolumny została zmniejszona z 9 do 8 jednostek (span9 -> span8). Jest to efektem dodania ramki (well) do lewej kolumny. Dodatkowe ozdobniki zajęły jedną jednostkę szerokości. Efekt naszej pracy powinien wyglądać mniej więcej tak:

Niby mało, ale zauważcie jak mało kodu HTML/CSS trzeba było do tej pory napisać. Tyle co kot napłakał.

Szybki kurs Twitter Bootstrap, lekcja numer 3

Tytuł strony już mamy. Czas dołożyć wiersz (div z klasą row) z dwoma kolumnami o szerokości 3 (span3) i 9 jednostek (span9).

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Tutorial Lesson 3</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
 <div class="container">
  <header>
   <h1>Tytuł strony</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in
     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
     culpa qui officia deserunt mollit anim id est laborum.</p>
  </header>

  <div class="row">
   <div class="span3">
    <h2>Kolumna lewa</h2>
     <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="span9">
     <h2>Kolumna prawa</h2>
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
       reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
       culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
   </div>
  </div>

  <script type="text/javascript"
   src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

Szybki kurs Twitter Bootstrap, lekcja numer 2

Wczoraj było o instalacji Bootstrap, dziś do naszej strony dodamy głównego diva z zawartością i nagłówek. Główny div wykorzystuje klasę CSS ‚container’, a nagłówek jest zawarty w tagu <header> (nie mylić z <head>).

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Tutorial Lesson 1</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
	<div class="container">
		<header>
			<h1>Tytuł strony</h1>
			<p>I jakiś tekst poniżej</p>
		</header>
	</div>

	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>