{"id":3256,"date":"2017-08-08T00:24:40","date_gmt":"2017-08-07T21:24:40","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/twitter-bootstrap-components\/"},"modified":"2020-04-08T21:36:48","modified_gmt":"2020-04-08T18:36:48","slug":"twitter-bootstrap-components","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/twitter-bootstrap-components\/","title":{"rendered":"Twitter bootstrap components"},"content":{"rendered":"

[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”3.22″][et_pb_fullwidth_header title=”Twitter bootstrap components” content_max_width=”none” _builder_version=”3.16″ button_one_letter_spacing_hover=”0″ button_two_letter_spacing_hover=”0″ button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”on” button_one_letter_spacing__hover=”0″ button_two_letter_spacing__hover_enabled=”on” button_two_letter_spacing__hover=”0″ button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”0px|||”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=”Home” hide_currentbreadcrumb=”off” _builder_version=”4.4.2″ custom_padding=”0px|||” hover_enabled=”0″ fontsbreadcrumbs_font_size_tablet=”51″ fontsbreadcrumbs_line_height_tablet=”2″ fontsseperator_font_size_tablet=”51″ fontsseperator_line_height_tablet=”2″ fontsbreadcrumblinks_font_size_tablet=”51″ fontsbreadcrumblinks_line_height_tablet=”2″][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]In this lesson we’ll take a look at bootstrap components. Components are pieces of ready to use code. They have got their own classes and take developers ability to build nice interfaces. You can create your own components. If you didn’t see last two lessons, I recommend your to watch it before you watch this lesson.
\n[\/et_pb_text][et_pb_video src=”https:\/\/www.youtube.com\/watch?v=2w2n2S9WLfE” _builder_version=”3.0.47″][\/et_pb_video][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n

    \n
  1. \u041e\u0431\u0437\u043e\u0440 twitter bootstrap<\/a><\/li>\n
  2. Twitter bootstrap. CSS<\/a><\/li>\n<\/ol>\n

    [\/et_pb_text][et_pb_comments _builder_version=”4.4.2″ custom_margin=”30px||||false|false” hover_enabled=”0″][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

    In this lesson we’ll take a look at bootstrap components. Components are pieces of ready to use code. They have got their own classes and take developers ability to build nice interfaces. You can create your own components. If you didn’t see last two lessons, I recommend your to watch it before you watch this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b css \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 twitter bootstrap.\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b - \u044d\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0435 \"\u043a\u0443\u0441\u043a\u0438\" \u043a\u043e\u0434\u0430 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u043a \u043d\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u0430\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b - \u0432\u0441\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0448\u0435\u0439 \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u0435\u0439. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0434\u0432\u0430 \u0443\u0440\u043e\u043a\u0430, \u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0443\u0440\u043e\u043a:\r\n\r\n

      \r\n
    1. \u041e\u0431\u0437\u043e\u0440 twitter bootstrap<\/a><\/li>\r\n
    2. Twitter bootstrap. CSS<\/a><\/li>\r\n<\/ol>\r\n\r\nhttps:\/\/www.youtube.com\/watch?v=2w2n2S9WLfE","_et_gb_content_width":"","footnotes":""},"categories":[257,219],"tags":[267,259,265,299],"class_list":["post-3256","post","type-post","status-publish","format-standard","hentry","category-html-css","category-tutorials","tag-bootstrap-en","tag-css-en","tag-framework-en","tag--en"],"yoast_head":"\nTwitter bootstrap components - Kamil Abzalov's blog<\/title>\n<meta name=\"description\" content=\"Standard set of components in bootstrap is powerful tool for creating nice responsive interface\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twitter bootstrap components - Kamil Abzalov's blog\" \/>\n<meta property=\"og:description\" content=\"Standard set of components in bootstrap is powerful tool for creating nice responsive interface\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-07T21:24:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-08T18:36:48+00:00\" \/>\n<meta name=\"author\" content=\"Kamil' Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Twitter bootstrap components\" \/>\n<meta name=\"twitter:description\" content=\"Standard set of components in bootstrap is powerful tool for creating nice responsive interface\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil' Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"Twitter bootstrap components\",\"datePublished\":\"2017-08-07T21:24:40+00:00\",\"dateModified\":\"2020-04-08T18:36:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/\"},\"wordCount\":404,\"commentCount\":0,\"keywords\":[\"bootstrap\",\"css\",\"framework\",\"\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\"],\"articleSection\":[\"HTML and CSS\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/\",\"name\":\"Twitter bootstrap components - Kamil Abzalov's blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-08-07T21:24:40+00:00\",\"dateModified\":\"2020-04-08T18:36:48+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"Standard set of components in bootstrap is powerful tool for creating nice responsive interface\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/components-twitter-bootstrap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Twitter bootstrap components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Twitter bootstrap components - Kamil Abzalov's blog","description":"Standard set of components in bootstrap is powerful tool for creating nice responsive interface","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"Twitter bootstrap components - Kamil Abzalov's blog","og_description":"Standard set of components in bootstrap is powerful tool for creating nice responsive interface","og_url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-08-07T21:24:40+00:00","article_modified_time":"2020-04-08T18:36:48+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"Twitter bootstrap components","twitter_description":"Standard set of components in bootstrap is powerful tool for creating nice responsive interface","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"Twitter bootstrap components","datePublished":"2017-08-07T21:24:40+00:00","dateModified":"2020-04-08T18:36:48+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/"},"wordCount":404,"commentCount":0,"keywords":["bootstrap","css","framework","\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a"],"articleSection":["HTML and CSS","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/","url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/","name":"Twitter bootstrap components - Kamil Abzalov's blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-08-07T21:24:40+00:00","dateModified":"2020-04-08T18:36:48+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"Standard set of components in bootstrap is powerful tool for creating nice responsive interface","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/components-twitter-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"Twitter bootstrap components"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=3256"}],"version-history":[{"count":7,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3256\/revisions"}],"predecessor-version":[{"id":31789,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3256\/revisions\/31789"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=3256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=3256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=3256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}