TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Przykłady przycisków Bootstrap

3

Bootstrap to kompletny framework zawierający wszelkiego rodzaju elementy, takie jak przyciski, formularze, panele itp. Łatwo jest dostosować kolor i rozmiar elementów za pomocą szablonów motywów Bootstrap. W tym artykule przedstawimy przykłady różnych typów przycisków Bootstrap 3. Sprawdź najnowszy artykuł dotyczący przycisków Bootstrap 5.

Potrzebujesz następujących rzeczy, aby dodać przyciski Bootstrap na swojej stronie.

  • Bootstrap CSS i JS
  • skrypt jQuery
  • Czcionka niesamowite ikony
  • Niestandardowe style CSS
  • Kod HTML

Uzyskiwanie kodu

Pierwsze trzy komponenty można dodać za pomocą bezpłatnych łączy CDN. Możesz pobrać niestandardowy kod CSS i HTML za pomocą poniższego przycisku. Archiwum zip zawiera dwa pliki – jeden dla CSS i jeden dla HTML. Można pobrać pliki CSS i HTML Użyte w tym artykule tutaj.

Dodawanie kodu na swojej stronie

Na koniec cały kod powinien wyglądać tak, jak pokazano poniżej. Możesz dodać niestandardowy kod CSS w tagach stylu w sekcji nagłówka swojej strony internetowej lub przesłać plik .css i link jako zewnętrzny arkusz stylów. Jeśli Twoja witryna używa już Bootstrap, Font Awesome i jQuery, nie ma potrzeby dodawania linków CDN.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> ADD CUSTOM CSS CODE HERE /* You can also link it as an external stylesheet */ </style> ADD HTML CODE HERE <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Przykłady Prezentacja

Przyciski prezentacji są podzielone na różne grupy:

  • Przyciski z ikonami kół

  • Przyciski rozwijane

  • Przyciski domyślne

  • Przyciski linii

  • Przyciski prostokątne

  • Okrągłe przyciski

  • Zaokrąglone przyciski narożne

  • Płaskie guziki

  • Przyciski gradientowe

  • Przyciski Gradient i Prostokąt

  • Przyciski płaskie i prostokątne

  • Przyciski linii i prostokąta

  • Przyciski kółka i linii

  • Przyciski okręgu i gradientu

  • Przyciski zaokrąglające i liniowe

  • Duże przyciski społecznościowe z ikonami i nazwą sieci

  • Małe przyciski społecznościowe tylko z ikonami

Poniżej kilka przykładów przycisków Bootstrap.

Przykłady przycisków Bootstrap

Okrągłe przyciski z ikonami

Przykłady przycisków Bootstrap

Przyciski udostępniania społecznościowego Bootstrap

Przykłady przycisków Bootstrap

Proste przyciski linii Bootstrap

Przykłady przycisków Bootstrap

Zaokrąglone guziki Bootstrap

Przykłady przycisków Bootstrap

Zaokrąglone kolorowe guziki Bootstrap

Przykłady przycisków Bootstrap

Domyślne przyciski stylu Bootstrap

Jeśli korzystasz z plików CSS i JS Bootstrap w witrynie, które nie korzystają z szablonu Bootstrap, upewnij się, że wszystkie inne elementy są w porządku i nie mają na nie wpływu. W przeciwnym razie może być konieczne wyodrębnienie tylko wymaganego kodu CSS i użycie go w witrynie niezależnie przy użyciu narzędzia do dostosowywania Bootstrap.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów