Wstępne pytanie o Bootstrap

pytanie zadane 23 kwietnia 2017 w HTML i CSS przez MTB Użytkownik (690 p.)

Cześć, nie mam jeszcze doświadczeń z korzystaniem z bootstrapa, z tego co wiem to jest przydatny przy RWD. Nurtuje mnie jedno - skoro ma on wbudowane klasy w css, to czy to znaczy że trzeba się trzymać tylko tych klas, czy można w obrębie bootstrapa tworzyć swoje klasy i czy taka jest generalnie konwencja?

2 odpowiedzi

odpowiedź 24 kwietnia 2017 przez mordimer Mądrala (5,720 p.)

bootstrap ma budowę modułowa poszególne moduły możesz dowolnie modyfikować dodawać/usuwać/zmieniać itd ... możesz również z powodzeniem dodawać swoje style na końcu styli css tego frameworka a nawet tworzyć całe swoje moduły ... robisz co chcesz twórcy nie ograniczają cię w żaden sposób :] ... problem bedzię tylko w sytuacji gdy bedziesz nadpisywać nie świadomie style klas juz istniejących na to trzeba tylko uważać pozdrawiam :]

komentarz 24 kwietnia 2017 przez MTB Użytkownik (690 p.)

Ok, to jeśli po ściągnięciu bootstrapa mam w folderze css w sumie 8 różnych plików bootstrapa to część z nich mogę usunąć ? Mogę np. zostawić sam bootstrap.css (i czy to dobry pomysł:) ?

komentarz 24 kwietnia 2017 przez mordimer Mądrala (5,720 p.)

tak zauważ co tam masz ...

bootstrap.css czyli style bootstapa w wersji "eleganckiej"

bootstrap.min.css w wersji zminimalizowanej mniej zajmującej

bootstrap-theme.css i bootstrap-theme.css są to pozostałości z bootstapa 2

a reszta to mapy

nawet jak masz główny szablon z dokumentacji :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

to wygląda on tak ... a masz w nim bootstrap.min.css tylko dlatego że mniej zajmują i jak zrobisz stronę to będą one się szybciej wczytywać poprostu ... na produkcji możesz używać bootstrap.css bo poprostu są czytelniejsze ... a jak chcesz się zagłębić w moduły tego frameworka pobierz link wejdz w less/bootstrap.less i tam masz zainportowane wszystkie moduły obecne również w tym folderze całość jest poprostu przekonwetowana na czysty css do pliku bootstrap,css i bootstrap.min,css ... możesz modyfikować lub usuwać moduły jeżeli ci są nie potrzebne. To co finalnie zostanie możesz znów przekonwertować na czysty css przy użyciu np gulpa lub link ... ja np jak dopisuje jakieś style less do bootstrapa to tworzę w katalogu less np plik custom.less inportuje je w na końcu pliku bootstrap.less w ten sposób:

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

//custom style
@import "custom.less";

i robię co mi się podoba :] ... oczywiście przy każdym zapisie tak jak napisałem przy użyciu gulpa lub link konwetuje je na czysty css do pliku bootstrap,css czy tam bootstrap.min,css.

komentarz 25 kwietnia 2017 przez MTB Użytkownik (690 p.)

Dzięki za wyczerpującą odpowiedź

odpowiedź 23 kwietnia 2017 przez jpacanowski VIP (101,940 p.)

Możesz tworzyć również własne klasy - najlepiej tworząc osobny plik CSS, np. custom.css. Bootstrap daje tobie po prostu taki zestaw pomocniczy gotowych klas. Nie tylko tworzysz nowe własne klasy, ale też możesz modyfikować właściwości tych już gotowych.

komentarz 30 kwietnia 2017 przez MMM4CI3J Użytkownik (500 p.)

Czy jest możliwe aby niektóre klasy nie dały się edytować?

W skrócie mam diva ,,help" i chciałbym w nim ustawić własne style. Padding działa ale kolor czcionki jest niezmienny nawet po dodaniu ,,!important". Co mogę zrobić?

komentarz 15 maja 2017 przez mordimer Mądrala (5,720 p.)

ty je nie edytujesz tylko nadpisujesz raczej ale powinny się zmieniać ... rozumiem że dodajesz style po stylach bootstrapa i nie używasz czasem stylów inlinowych w tym divie? jeżeli tak to pokaż ten kod tu np https://jsfiddle.net/