{"id":223,"date":"2021-04-01T22:48:59","date_gmt":"2021-04-01T20:48:59","guid":{"rendered":"http:\/\/dziewczynanafroncie.pl\/?p=223"},"modified":"2021-04-01T23:42:17","modified_gmt":"2021-04-01T21:42:17","slug":"dodanie-biblioteki-bootstrap-do-projektu-angular","status":"publish","type":"post","link":"https:\/\/dziewczynanafroncie.pl\/dodanie-biblioteki-bootstrap-do-projektu-angular\/","title":{"rendered":"Dodanie biblioteki Bootstrap do projektu angular"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Aby nasza strona by\u0142a zgodna z og\u00f3lnie przyj\u0119t\u0105 konwencj\u0105 i mog\u0142a by\u0107 dostosowana na r\u00f3\u017cne urz\u0105dzenia, ale tak\u017ce by\u015bmy mogli bardziej si\u0119 skupi\u0107 nad jej rozwojem pod wzgl\u0119dem logiki zamiast standaryzacji wygl\u0105du z pomoc\u0105 przychodzi nam biblioteka bootstrap. <\/p>\n\n\n\n\n\n\n\n<p class=\"wp-block-paragraph\">Biblioteka CSS, rozwijana przez programist\u00f3w Twittera. Zawierj\u0105ca zestaw przydatnych narz\u0119dzi u\u0142atwiaj\u0105cych stworzenie pi\u0119knego interfejsu dla naszego projektu. Bazuje ona g\u0142\u00f3wnie na gotowych rozwi\u0105zaniach HTML oraz CSS. Posiada bardzo wiele zastosowa\u0144 i mo\u017cliwo\u015bci oraz gotowych element\u00f3w takich jak teksty, formularze, przyciski, wykresy, nawigacje i innych komponent\u00f3w wy\u015bwietlanych na stronie. No to tak w skr\u00f3cie, ale zapytasz jak to pod\u0142\u0105czy\u0107. Okazuje si\u0119, \u017ce bardzo prosto :) .<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pierwsz\u0105 rzecz\u0105 kt\u00f3r\u0105 nale\u017cy wykona\u0107 gdy nasz projekt jest ju\u017c postawiony nale\u017cy doda\u0107 bibliotek\u0119 poprzez npm.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">npm install --save bootstrap<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Po pomy\u015blnym zainstalowaniu modu\u0142u noda w naszym pliku package.json w zale\u017cno\u015bciach uka\u017ce si\u0119 poni\u017cszy wpis, w chwili pisania tego postu by\u0142a to akurat wersja 4.3.1. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\u00a0\"dependencies\":\u00a0{\n    \"bootstrap\":\u00a0\"^4.3.1\"\n    ...\n  }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Je\u017celi chcemy opr\u00f3cz styli css korzysta\u0107 tak\u017ce z element\u00f3w javascript dodatkowo w celu prawid\u0142owego ich dzia\u0142ania musimy zainstalowa\u0107 dodatkow\u0105 zale\u017cno\u015b\u0107 w postaci biblioteki jquery z kt\u00f3rej korzysta bootstrap.js. W chwili pisania tego posta b\u0119dzie to wersja jQuery 3.4.1<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">npm install --save jquery<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Zawarto\u015b\u0107 zostanie zainstalowana w folderze node_modules\/bootstrap oraz node_modules\/jquery. Nast\u0119pnym krokiem b\u0119dzie wskazanie Angularowi gdzie ich szuka\u0107. W tym celu musimy wskaza\u0107 \u015bcie\u017ck\u0119 plik\u00f3w *.css oraz *.js zawartym w node_modules w pliku angular.json.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\"styles\": [\n              \"node_modules\/bootstrap\/dist\/css\/bootstrap.min.css\"\n          ],\n\"scripts\": [\n              \"node_modules\/jquery\/dist\/jquery.js\"\n              \"node_modules\/bootstrap\/dist\/js\/bootstrap.min.js\"\n           ]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Aby nasza strona by\u0142a zgodna z og\u00f3lnie przyj\u0119t\u0105 konwencj\u0105 i mog\u0142a by\u0107 dostosowana na r\u00f3\u017cne urz\u0105dzenia, ale tak\u017ce by\u015bmy mogli bardziej si\u0119 skupi\u0107 nad jej rozwojem pod wzgl\u0119dem logiki zamiast standaryzacji wygl\u0105du z pomoc\u0105 przychodzi nam biblioteka bootstrap.<\/p>\n","protected":false},"author":1,"featured_media":224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=223"}],"version-history":[{"count":1,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/223\/revisions\/227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/224"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}