Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Twitter Bootstrap:前端框架利器

w3cplus
November 01, 2012

Twitter Bootstrap:前端框架利器

Web前端开发者每天都与HTML、CSS、JavaScript打交道,然而不少人都是周而复始地写模板、样式和交互效果,并没有想过如何将这些重复的工作整合在一起。Twitter推出Bootstrap能够帮助Web前端开发者摆脱这种重复劳动。

w3cplus

November 01, 2012
Tweet

More Decks by w3cplus

Other Decks in Technology

Transcript

  1. 114 Technology ᢶᵥ Twitter Bootstrap˖ മ܋઀ॐ૧ഗ ࿔ / ଘ࿀ࣀ Webമ܋ਸ݀ኁ௅ཀۼᇑHTMLǃ

    CSSǃJavaScriptٶ঍ڢˈ ඗ܸփณටۼ๟ዜܸް๔ںႀఇӱǃ ᄣ๕ࢅ঍ ࢻၳࡕˈ ժுᆶၙࡗසࢆॽኄၵዘްڦ߾ፕኝࢇሞᅃഐDŽTwitterླྀ؜ڦBootstrapీࠕӻዺWebമ܋ਸ݀ኁ ӦྃኄዖዘްહۯDŽ Bootstrapڦ૦๏ ˝˿ःࠪܬఽᄉᭉයˈ ௉యᄉTwitterґቪࢹር࣍ڙ धԦᎩቢௐі˪᧓ၸ˿੝థᒬࣁཿ৘ᄉґቪंDŽ ᤴ ੆˿Ꭹቢ፤એڇᬱǃ ੰࡘবʿुǃ धԦ੆ఴᰳኍ᫇ ᮤDŽ ൤ௐBootStrapᜁଡʼ˿௅ርDŽ Twitter᜵යґቪ ࢹር࣍߸КΙ᭤ᤇʶӬʶಳ౵ᤈᛠґቪधԦDŽ Twitterڙ2011ࣱ8త࠱Фधຸˈ ࣲڙ2012ࣱ2త3௅ Ԧ࣊˿2.0ྟDŽڙGitHubʼˈ ᤇ˓ᮉᄫࣂథ઴ᡓ᣾ 2ʹͮСซᏧ֖4000˓ѫஂDŽ Bootstrapᄉ᝹᝟Ꮷǃ ᗂՏґቪࢹር࣍Mark Ottoᤇಧз᥊˖ “Bootstrap ௦ੇ֖Jacob Thorntonᎃзᄉʶ˓ґቪࢹХ኷ˈ ᄫᄉ௦˝˿ࣞү᝹᝟֖࣍WebґቪधԦ̠տঋ ᤳథ஌ڠѸतʶ˓ፆౝኤӬǃবᑞ͕ᓡǃᮅ᭦ዴ ᒰᄉWebःၸDŽ߱΍ၸ˿ణளᄉเ᜾٧੾శˈԺ ̾ଡΘዴᒰᄉᎩᮅଅྟழय̾ԢᛪӬǃ૊ᨍǃᛪ ಪǃᎩಪಔಪӐǃ࠭ᓇኍឰܲЊገDŽ”Bootstrap ᄉЮᎵಧयፘ੽˿Mark Ottoኤผ̜˟ᄉ᝹᝟᮲ ಪˈ͉ʹधԦڃ᫲ᦏᑞ΍ၸ߱ଡΘᄉHTMLഴ ౛ǃCSSಧय֖jQueryጷ͇౎࣊Ꮇ੊Ꮷ᧗तʶ˓ ܰ᜹໠̜ᄉᮅ᭦ःၸDŽ BootStrap 2ڦႎ༬Ⴀ BootStrap 2ڙԓథྱবᄉ۲ᆨʼᅋ᧗இᤈ˿ၸਖ਼ ᄉͳᰍ֖̓̈বˈ ඊݟளܘҪᄉ޴ͳࡘᇧҩᑞˈ ᤟ၸ̅ఄᑞ੣఺ʼܲ᧾ࡕ࣪᜺ಪᄉֽःय࣊ࡌˈ Բܰளܘ˿12൛jQueryଢ͇ˈԺ̾໗ᡛWebᮅ᭦ ࣡ၸᄉၸਖ਼ͳᰍ֖̓̈ҩᑞDŽ BootStrap 2ڦሏᆩ Bootstrapڦ࿔ॲ঳ࠓ ឳᏧԺ̾ᄯଋ̯GitHubʽᣑҁBootstrapຸᆉˈ ఴ ڠᝌԌՐԺ̾ᄹҁᤇಧᄉᄫेፆౝ˖ docsǃimgǃ jquery-ui-bootstrapǃjs֖lessDŽФ˖ణ˝᧗᜵ᄉ௦ “docs”ʽᄉCSSಧय஠͇ˈ “less”˖ᄉᎃដ஠ ͇֖“js”ʽᄉjQueryଢ͇DŽ BootstrapڦҾጎ С̅ݟʹःၸଡԨѢ౎ᄉ஠͇ܷᒰథˏ൥˖ ኃʶ ௦ݟʹ߶ᜈBootstrapᄉ۲ఴಧयˈ ኃ̃௦ݟʹុၸ BootstrapᄉjQueryଢ͇ˈ ੇ͂ᯪЎ౎ᄹಧयᄉ߶ᜈDŽ ಧयᄉ߶ᜈథܲሗழกˈ ڎ1ࡘᇧᄉ௦ʶሗ࣡ၸᄉ ុၸಧयழก“link”DŽ ᤇ᧖థˏ˓С᪃ཁˈФ˖“bootstrap.css”௦ Bootstrap˖ᄉ۲ఴಧय஠͇ˈ Ե᜵΍ၸBootstrap ࡂॸᮋុၸᤇ˓஠͇DŽᏪ“bootstrap-responsive. css”ѶԺ̾಩૵;ᄉྕݝ౎ᤤસˈ ݟ౦ਆᝧᮉᄫ Хథֽःय࣊ࡌᄉ஌౦ˈ ࡂॸᮋ᜵ុၸᤇ˓ಧय ஠͇ˈ Ꮺ˄ុၸॸᮋᥕ९ЎՐᮊࣿˈ “bootstrap- responsive.css”ॸᮋஉᎵڙ“bootstrap.css”˧ ՐˈՠѶΦʿХథֽःय࣊ࡌҩᑞDŽᏪణՐᄉ “style.css”௦ᮉᄫ˖ᄉᒬ߿˦ಧयˈၸ౎᜷ᄥ Bootstrap˖ᄉʶ᳭̎ᝢ᝹Ꮅˈ Φ̅धԦᏧ߿҃DŽ “CSS”ಧय߶ᜈ߸ՐˈࡂԺ̾ᤈЙ“js”ᄉុ ഴ%RRWVWUDSṭᕅ䈹⭞ᯯᕅ
  2. 115 Technology ᢶᵥ ၸˈழกॡኤӬˈԵᭉઁਆ᜵ᄉjQueryଢ͇૊ཱ ˀʼʶ൥ᄰͪᄉழयҪЙҁ̼ᆉ˖DŽ Bootstrap 2ڦఇ੷ BootStrap 2ᄉഴڰ̯ܷᄉழ᭦Ժ̾ѫ˝࣊ࡌಳ ౵ǃ

    ᮅ᭦ଅྟǃ ۲ఴጷ͇ǃjQueryଢ͇̾ԢԪ᧙ᎃ ដᄉLessі˓ᦉѫDŽˀኃ1ྟᄰඊˈ Bootstrap 2ܘ Ҫ˿ܲ˓ளഴڰˈ ඊݟ࣊ࡌಳ౵˖ᄉ“ֽःय࣊ ࡌ”ˈ ᮅ᭦ଅྟ˖ᄉ“ICON”ˈ ۲ఴጷ͇˖ᄉ“ᤈ ऎ్”ˈ ᏪjQueryଢ͇̯̾ґᄉ5˓஌౦ܘҪҁ12 ˓ˈ߸КԺ̾໗ᡛᮉᄫ࣡ၸᄉ̓̈஌౦DŽʽ᭦౎ ኤӬ˿ᝌʶʽBootstrap 2˖ՉഴڰᄉҩᑞDŽ ᄻ௬քਆ ࣊ࡌڙඇ˓ᮉᄫ˖ᦏॸʿԺ࠵ˈBootstrapڙ 960gsᄉ۲ᆨʼੰࡘ˿ʶݒ͕ሑᄉGrids࣊ࡌˈ Ꮺڙ“ֽःय࣊ࡌ”˖థఝुܷᄉҩᑞˈᑞᝧ Ꭹಪ࣊ࡌ᤟ःՉሗ᝹ܫDŽ΍ၸ˶ᄰॆኤӬˈԵ ᭉ᜵૊ཱHTMLഴ౛ःၸˈࡂᑞᣏౚڠౝत; ੝ᭉᄉ࣊ࡌ஌౦DŽ൤ܰˈஇԪഴ౛˖ᄉዜՏˈࡂ ᑞࠃဗʿՎᄉ࣊ࡌ᮲ಪDŽඊݟ࣡᜸ᄉ“ڌ߿࣊ ࡌ”ˈ Եᭉ᜵ڙHTML˖ຊҪ“container”ዜՏ˗ Ꮺ᜵ࠃဗ“ึͳ࣊ࡌ”ˈԵᭉ᜵ڙHTML˖ຊҪ “container-fluid”ዜՏDŽBootstrapᤆ˝धԦᏧ᝹ ᝟˿“Responsive”ˈ ̽࣊ࡌಳ౵ఝ˝ѢᓣDŽध ԦᏧԺ̾ڙ൤۲ᆨʼᤈᛠ͉ʹಧयᄉ᜷ᄥˈ ̯Ꮺ ࠃဗူਆ˖ᄉֽःय᝹᝟DŽ ᄻ௬ಇӲ ᮅ᭦ଅྟᄉݝڭᄯଋॕֵֽ̖᮲ಪˈឬᄯᄆཁ ࡂ௦ݝʿݝᄹDŽڙBootstrap˖ˈ ᮅ᭦ᄉଅྟᦏ௦ ̯КࡌᄉഏএʼѢԦˈ߿҃˿˞ͳ஠ఴǃൿᖿ஠ ఴǃुុ஠ఴǃಕᮤǃCode᮲ಪǃ૊ᨍǃᛪӬǃ ᛪಪኍಪयDŽᏪBootstrap 2˖ԠຊҪ˿і˓ள̜ ཁDŽФʶ௦“Code”΍ၸ˿“Google Prettify”ଢ ͇ˈܘु˿̼ᆉᄉ᫝ឳͳᰍ˗Ф̃ڙ“૊ᨍ”˖ ܘҪ˿ጷՋǃ ʽડǃ ڎಕኍ஌౦ˈ ݟڎ2੝ᇧDŽ ኃʻࡂ௦“Icon”ᄉ΍ၸˈ Bootstrapڙ“Icon”ᦉ ѫ᧓ၸ˿“Sprites”੾శˈ˝ܷࠑэܫ˿ʼᄇሗ ࣡ၸᄉ“Icon”ڎಕःၸDŽ ឬᡐIconˈᤇ᧖థॸ᜵ڙՓឳᏧ଍ᕚʶ˓̯ BootStrapੰࡘѢ౎ᄉFont AwesomeᮉᄫDŽ߱௦ Dave GandyڙBootstrapᄉ۲ᆨʼੰࡘѢ౎ᄉʶ˓ Icon˞ᮤˈణܷᄉྱཁڙ̅ˈஞݒڎಕ˖෤థᤁ ၸ͉ʹڎྞDŽܷࠑԺᑞ͗᜿३݈যˈ ෤థڎྞݟ ʹ҃ͺIcon˛ᬱ᥊௦᤯᣾ጥCSSᎃзᄉ՘˛௦ᄉˈ Font Awesomeᮉᄫ˖˞᜵ᤁၸ˿CSS3ᄉ“@font- face”֖“͡Њገ”ʶᡐࠃဗDŽ ᜵΍ၸFont Awesomeˈ ᯪЎᭉ᜵ڙనҫ٧ʼ߶ᜈ “fontawesome-webfont”ߙͳˈ ଋᅋڙಧय˖᤯ ᣾“@font-face”౎ըၸᤇ̎ߙͳ˖ Х ܫ ˿ ʼ ᭦ ᄉ ్ ͇ Րˈࡂ Ե ᜵ ಧ य ˖ ុ ၸ “FontAwesome”ߙͳˈ ࣲڙ“͡ዜЊገ”˖΍ၸ ࠪःᄉ“ߙቿᎃᆉ”˖ ᤇಧʶ౎ˈࡂʿ᧓ၸ͉ʹڎྞࠃဗIcon஌౦ˈʶ ᡐ౎ᄹʶ˓஌౦ڎաDŽ एԨፇॲ ۲ఴጷ͇௦Bootstrap 2ᄉዴӧ˧ʶˈ ᧖᭦ᦏ௦ध ԦᏧࣰௐᭉ᜵ᄉ̓̈ጷ͇DŽඊݟ“Ꭹቢ࠭ᓇ”ǃ “Tabs”ǃ “ࢹХ్”ǃ “᭦Ӊࡗ”ǃ “ѫᮅಜ”ǃ “ଡᇧಕኣ”ǃ “ֵ̖ࡘᇧ”ǃ “ଡᇧζোڰ”֖ ഴ%RRWVUDSѣⲺ᤿䫤ṭᕅ
  3. 116 Technology ᢶᵥ “ᤈऎ్”ኍDŽ ᤇ̎ጷ͇ᦏᦠథ“jQuery”ଢ͇ˈ ᤁ ၸ߱͂Ժܷ̾ࣧऎଡᰳၸਖ਼ᄉ̓̈ͳᰍˈ ΍ֵ̖ʿ вᥦ˥մ౛௃խलҦDŽ ឬ˿ᤇ˥ܲሗጷ͇ˈ

    Хͳឞ ݟʹ΍ၸ˛ʽ᭦ੇ̾࣡᜸ᄉ“Tabs”ጷ͇˝Βˈ Փ ܷࠑࡘᇧ΍ၸழกDŽ ᜵ਆ΍ၸBootStrap۲ఴጷ͇ˈॸᮋ໗ᡛʻཁ˖ ኃʶˈణ۲ఴᄉHTMLፆౝ᜵ࠪՁ˗ኃ̃ˈᭉ᜵ Bootstrap˖ᄉ“jQuery”ଢ͇ଡΘᄰःҩᑞ˗ ኃʻˈ ڙᮉᄫ˖ࠪःᄉ “Tabs”Њገʼըၸ “Tabs”ҩᑞDŽ 1. HTML Markup 2. ុၸjQueryଢ͇ <script src="js/bootstrap-tab.js"></script> 3. धը“Tab”ҩᑞ ࠪ̅Ф̴ጷ͇ˈ ΍ၸழกᄰᤂˈ ڙ൤ʿϡᠻᤗDŽ jQuery֭ॲ Bootstrap˖ᄉjQueryଢ͇˞᜵ၸ౎ࣞүधԦᏧࠃ ဗˀၸਖ਼̓̈ᄉҩᑞˈ ڙኃ1ྟ˖ˈ Bootstrapࡂ˝ ܷࠑଡΘ˿6ሗ࣡᜸ᄉଢ͇DŽ ڑ؜઀˄Modals˅˖ ڙJavaScriptഴ౛۲ᆨʼᒬ߿ ˦ᄉʶ൛ึጲۋǃ༦าব౜ुᄉीѢᗛ౛஌౦ᄉ ଢ͇˗ ူઙ઀˄Dropdowns˅˖Bootstrap˖ʶ൛ᣏࢻࠃ ၸᄉଢ͇ˈԺᑞࣞү;҃ͺХథʽડҩᑞˈ ඊݟ ʽડᖜӬǃ ʽડ૊ᨍǃ ʽડࢹХ్ኍ஌౦˗ ࡐۯཉ˄Scrollspy˅˖ࠃဗ໓Ү్ͮᎵᄉ஌౦ˈ ඊݟڙ࠭ᓇ˖థܲ˓ಕኣˈ ၸਖ਼ཁѣФ˖ʶ˓ಕ ኣˈ ໓Ү్͗ᒬࣁҮ߿ͮҁ࠭ᓇ˖ಕኣࠪःᄉ஠ ఴͮᎵ˗ Tabs˖ ᤇ˓ଢ͇ᑞܴঋᤳࠃဗఴڠЮࠓᄉᣀ૰ˈ ҮখѬ૰ಕኣࠪःᄉఴڠЮࠓ˗ ༵๖߾ਏ˄Tooltips˅˖௦ʶ൛͕ሑᄉjQueryଢ ͇ˈ ௃ᭉҪᣑ͉ʹڎྞˈ᧓ၸCSS3ள੾శˈҮখ ௬ᇧ“data-attributes”ߚϱᄉಕᮤζো˗ ༵๖௬ӱ˄Popover˅ ˖ ڙTooltipsᄉଢ͇ʼੰࡘˈ ၸ౎௬ᇧʶ̎ԮҪЮࠓᄉଡᇧ஌౦ˈ ൤ଢ͇ᭉ᜵ ᦠՋTooltipsʶᡐ΍ၸDŽ Bootstrap 2ڙґ᭦6ሗଢ͇ᄉ۲ᆨʼԠளܘҪ˿6 ሗjQueryଢ͇˖ য়Ԓ႑တ˄Alert˅ ˖ ၸ౎С᫆᝜ઐζোڰ˗ Ӏ౧˄Button˅˖ၸ౎ଌ҃૊ᨍᄉ࿃খ੊ఝܲጷ ͇ҩᑞˈ ඊݟ“ܬᤤಳ”ǃ “Ӭᤤ૊ᨍ”̾Ԣ“ᣑ Й࿃খ్”ኍ˗ ๮ޅൗ˄Collapse˅˖ʶ൛ᣏࢻࠃၸᄉ੣᮲၀ଢ ͇ˈ Ժ̾ၸ౎҃ͺઈԮ᭦౛੊ᖜӬኍ஌౦˗ ࣙڨೌ˄Carouse˅ ˖ ࠃဗڎྞ୦உҩᑞᄉଢ͇˗ ցඇ࿔Ԩ˄Typeahead˅˖Ժ̾᝭Ͱ஠ఴಳᣤЙ ᄉ஠ఴˈ ʽ൒ᣤЙௐԺ̾ᒬҮᛩК˗ ۯࣃၳࡕ˄Transitions˅˖BootStrap΍ၸᤇ˓ଢ ͇ˈ ˝ʶ̎Ү஌౦ܘҪ˿᣾ນবˈ΍Үႆ஌౦ఝ ጹᒍǃ ၶҮDŽ ʼ᭦ኤӬ̭ፀ˿Bootstrap 2˖ᄉjQueryଢ͇ˈᒯ ̅ݟʹ΍ၸˈᤆᭉ᜵಩૵Bootstrap੝ଡΘᄉ஠ ುˈ̾ԢՉଢ͇ᄉԟஜˈХͳ᫇ᮤХͳѫౡDŽځ ˝ԵథЌѫ˿ᝌˈ ੥ᑞ༦าᤁၸDŽ ՎଉՊᅳLess Less௦ʶ˓ҮখCSSឥᝒಳ౵ˈ۲̅ᒬࣁᄉJSल ୲੊Ꮷనҫ٧ቪࠪ͛ፑᄉCSSᤈᛠ˿Үখᄉੰ ࡘˈ΍३LessХథఝुܷᄉҩᑞ֖༦าবDŽ۲ ̅Lessˈੇ͂ᎃᣣCSSࡂԺ̾Ϸ΍ၸᎃርឥᝒʶ ಧˈ߿˦Ԫ᧙ǃࢥЙܥ௙ǃຈՋഴयǃᤁኪኍDŽ Bootstrap˖థʶݒᎃᣣݝᄉLessಳ౵ˈ धԦᏧԺ ̾࠱Фःၸҁᒬࣁᄉᮉᄫˈ˶Ժ̾᤯᣾less.jsǃ Less.app੊Node.jsኍழก౎ᣀដLess஠͇DŽLess ஠͇ʶெᎃដˈBootstrapಳ౵ࡂ̨ӉդCSSಧ यˈᤇ਒։ᅋ෤థܲͷᄉڎྞǃFlash˧ዜЊገDŽ Lessݝܪ௦ѽ̅ᎃзˈͭᎤཁ௦Ե᤟Ջၸ̅धԦ ʶ̎ኤผᄉCSSಧयDŽˠ˓ኤӬᄉΒߔˈݟ౦;
  4. 117 Technology ᢶᵥ ਆ˝ܲ˓ಧय᝹ᎵՎʶ˓ᮧᓣˈ Ժ̾ᤇಧзDŽ @color: #FFFFFF; h1 { color:

    @color; } #sub{ color: @color; } ᎃដՐᄉCSSݟʽ੝ᇧ˖ h1 { color: #ffffff; } #sub{ color: #ffffff; } ̾ʼ̼ᆉԵ௦ణኤᄉLessःၸᇧᔴDŽᬓ˿Ԫ᧙ˈ ᤆԺ̾ڙCSS˖ᤈᛠஜߥᤁኪǃ͛ԟǃ஠͇ᄰ̈ लၸǃ᜺ѶࢥݒኍDŽԺ̾ਆ៵ˈ ᤇሗᎃзCSSᄉழ य͗˝ґቪधԦࣛ౎ܷܲᄉஇԪDŽ௃᝶௦̯༦า বǃੰࡘবᤆ௦Ժ፤એবʼˈLessᦏᝧCSSधԦ ஌ညథ˿ܷࣧଡӣDŽ BootstrapڦjQuery UI BootstrapᄉjQuery UIФࠃ௦̯ಳ౵˖ᛡၶѢ౎ ᄉʶ˓jQuery UI˞ᮤˈ ԩҁTwitterᮉᄫᄉըԦˈ Addy Osmani˶ڙBootstrapᄉ۲ᆨʼஞူѢʶ˓ jQuery UI Bootstrap˞ᮤDŽ jQuery UI Bootstrapᬓ˿ӉդBootstrapՉ˓ழ᭦ ҩᑞ˧ܰˈᤆڙФ۲ᆨʼᛩЌ˿̾ʽྱব˖Үখ ຊҪTabsǃ ௅యᔴډᤤસጷ͇ǃ ᒬ߿˦஠͇ᣑЙ ಳǃ ໎Үڰǃ ௅యଌ͇DŽ BootStrap 2ӄ૩ ᤯᣾ґ᭦ᄉ̭ፀˈ ;Ժᑞࣂፂͳ͗ҁBootstrapᄉु ܷˈ ͭᑞՠᤁၸҁၶ̖ᮉᄫ˖ˈ ԺᑞᤆߚథႠ᫇DŽ ᄫґ΍ၸBootstrapᄉᗂՏ಴ΒథNASA֖MSNBC ᄉBreaking NewsDŽ൤ܰॡܲCMS˶ڙᤁၸ Bootstrapಳ౵ˈඊݟܷࠑཿ৘ᄉWordPressǃ DrupalኍDŽݟ౦;ᤆਆ˿ᝌఝܲBootstrap಴Βˈ Ժ̾ԟᏥWrapbootstrap.comDŽ BootStrap 2ڦᆫ๞ࢅඍۅ ݟ̬ᄉBootstrapࣂӉહ˿іӠ˓ጷ͇ˈ ඇ˓ጷ͇ ᦏᒬཨڠፆՋ˿᝹᝟ˀधԦˈ Хథ߸ஞᄉࠃΒ஠ ುˈ߿˦˿ᄽൣᄉጷ͇֖ഴ౛DŽ௃᝶ܪڙʹሗ੾ శපࣰᄉधԦᏧˈ ˶௃᝶ܪڙג˓ࢹͺึር˖ˈ ᦏԺ̾΍ၸBootstrapঋᤳǃழΦڠౝतधԦᏧ؝ ൓ᄉःၸDŽ ᬱᑞԺ᠛ᄉ௦ˈBootstrapΙேఴᅋ“ࣲᛠध Ԧ”ǃ “ͺ˝ֵ̖ᄉ᮲ಪૈӮ”֖“ᤀՋ੝థᄉ੾ ᑞපࣰ”ᄉԓѶࣞүधԦᏧᝌфࠃᬄ᫇ᮤˈ ʿற ߸ؒᒬࣁˈխलఝ̠ܲᤤસBootstrapःၸ̅ᒬࣁ ᄉᮉᄫ˖DŽ ཨᏪ԰̠̇“ʹྫྷᄰၶᄰА”ˈథݝࡂథڭˈ Bootstrap˶௦ʶಧDŽࠪ̅ڙڍЮᄉधԦᏧ౎ឬˈ ణԺঢᄉࡂ௦IEЩࠓ᫇ᮤDŽ ᄫґBootstrapࠪIE6 ҁIE8ᄉஂ૆ᦏʿԣݝDŽԲʶ˓Ꭴཁ௦ˈ᧓ၸ Bootstrapᄉഴ౛ˈ Ꭹቢፆౝௐ࣡͗௬३ᒦᐸDŽ൤ ܰˈ᜷ᄥʶ̎ಧयௐ͗ᤴ੆̼ᆉжͷDŽͭˀФ̴ ґቪಳ౵ᄰඊˈ ੇ˓̠᜿३BootstrapᄉᎤཁ̨൤ Ꮺ̾ˈ ᒯ̅Ф̴ழ᭦࣎భథ఺͗ˀܷࠑʶᡐଉᝦ ֖ߥ˷DŽ ጺ঳ Bootstrap௦ʶݒґቪधԦѽ٧DŽ߱Ժ̾ࣞүੇ ͂ҪᤳᮉᄫधԦˈ ᝧੇ͂ᢵܪڙʶ˓߸ܫᄉጆፑ ˖ˈ઴థʶᒰᄉ᝹᝟֖ࠃဗழกDŽʿᭉ᜵ڙܰ᜹ ʼᔈ᠟᣾ܲௐᫍˈ΍धԦᏧᑞ࠱ዴҦᬶ˖̅ఝ᧗ ᜵ᄉҩᑞDŽ Bootstrap࠱இԪੇ͂ᄉՋͺழयˀधԦᤈርˈ ͉ ʹ̠ᦏԺ̾۲̅BootstrapतበԺੰࡘᄉґቪࢹХ Ӊˈ ੊Ꮷڙ߱ᄉ۲ᆨʼըҮ࡚̅ᒬࣁᄉಳ౵DŽ 㖇੃ཝ╖θⴤࢃב㚂ӄр⎭ឋૂ㖇㔒〇ᢶ㿼㿿 䇴䇗䜞θԄӁ:HEࢃㄥૂᢁᵰ⑮ᡅᐛ֒θሯ:HE ࢃㄥȽ〱ࣞㄥȽࢃㄥṼᷬᣧᴿ⎉৐ު䏙ȾѠӰ ঐᇘφZZZZFSOXVFRPȾ ሴඪՊड˖୔᱀ၖ˄[email protected]˅ ᔌՕ঄