Bootstrap 3 グリッドレイアウトã®å…¥ã‚Œåã®æ£ã—ã„書ãæ–¹ - @kyanny's blog
.row > .col- > .row > .col- ã¨ã„ã†é †ç•ªã§ãƒã‚¹ãƒˆã™ã‚‹ã“ã¨ã€‚ .row > .col- > .col- ã®ã‚ˆã†ã«é€”ä¸ã® .row を抜ã‹ã™ã¨å·¦å³ã® padding ãŒç´¯ç©ã•ã‚Œã¦ã—ã¾ã„ã€ç¸¦ä½ç½®ã®æƒãˆãŒãšã‚Œã‚‹ã€‚ ãªãœ .row を挟むã¨ç¸¦ä½ç½®ãŒãšã‚Œãªã„ã®ã‹ã¨ã„ã†ã¨ã€ .row ãŒå·¦å³ã® margin ã‚’ -15px ã—ã¦ã„ã‚‹ã‹ã‚‰ã€ .col- ãŒå·¦å³ã® padding ã‚’ 15px ã™ã‚‹ã®ã¨æ‰“ã¡æ¶ˆã—åˆã£ã¦ 0 ã«ãªã‚‹ãŸã‚。
Webデザインã®çŸ¥è˜ãŒãªãã¦ã‚‚OKï¼Bootstrapã®ä½¿ã„æ–¹ã€å…¥é–€è€…å‘ã‘】| TechAcademyマガジン
目次 本記事ã§ã¯ã€Bootstrapã®åŸºç¤Žã‚’ãŠã•ãˆãŸä¸Šã§ã€ã‚ˆã使ã†ã€ã‚°ãƒªãƒƒãƒ‰ã‚·ã‚¹ãƒ†ãƒ ã€ãƒ†ãƒ¼ãƒ–ルã€ãƒœã‚¿ãƒ³ã€ãƒ•ã‚©ãƒ¼ãƒ ã®å…·ä½“çš„ãªä½¿ã„æ–¹ã‚’é †ç•ªã«ç´¹ä»‹ã—ã¾ã™ã€‚ Bootstrapã¨ã¯ Bootstrapを使ã†æº–å‚™ グリッドシステムã®ä½¿ã„æ–¹ テーブルã®ä½¿ã„æ–¹ ボタンã®ä½¿ã„æ–¹ フォームã®ä½¿ã„æ–¹ Bootstrapã¨ã¯ Bootstrapã¯Twitter社ãŒé–‹ç™ºã—ãŸCSSã®ã€Œãƒ•ãƒ¬ãƒ¼ãƒ ワークã€ã§ã™ã€‚通常CSSを書ãå ´åˆã€å…¨ã¦ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’自分ã§ä½œã£ã¦ã„ãå¿…è¦ãŒã‚ã‚Šã¾ã™ãŒã€ã“ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワークã«ã¯ã‚ˆã使ã‚れるスタイルãŒã‚らã‹ã˜ã‚定義ã—ã¦ã‚ã‚‹ã®ã§ã€ãƒ«ãƒ¼ãƒ«ã«æ²¿ã£ã¦åˆ©ç”¨ã™ã‚‹ã ã‘ã§æ•´ã£ãŸãƒ‡ã‚¶ã‚¤ãƒ³ã®ãƒšãƒ¼ã‚¸ã‚’作æˆã§ãã¾ã™ã€‚ ã‚‚ã¨ã‚‚ã¨Twitter社内ã§ä½œã‚‰ã‚ŒãŸã‚‚ã®ã§ã€ä»¥å‰ã¯ã€ŒTwitter Bootstrapã€ã¨å‘¼ã°ã‚Œã¦ã„ã¾ã—ãŸãŒã€ç¾åœ¨ã§ã¯ã€ŒBootstrapã€ã®ã¿ã§å‘¼ã°ã‚Œã‚‹ã‚ˆã†ã«ãªã£ã¦ã„ã¾ã™ã€‚ Bootstrapを使ã†ãƒ¡ãƒª
Bs3doc：グリッドシステム| Greenapple-room
Bootstrap3ã‹ã‚‰ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–デザイン（å¯å¤‰ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆï¼‰ãŒãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã«ãªã‚Šã‚¯ãƒ©ã‚¹è¨å®šãŒå¤‰æ›´ã•ã‚Œã¦ã„ã¾ã™ã€‚ Bootstrap2ã‹ã‚‰Bootstrap3ã«å¤‰æ›´ã™ã‚‹å ´åˆã¯æ³¨æ„ã—ã¦ä¸‹ã•ã„。 基本的ãªè€ƒãˆæ–¹ã¯å¤‰ã‚ã£ã¦ãŠã‚‰ãšä»¥ä¸‹ã®é€šã‚Šã¨ãªã‚Šã¾ã™ã€‚ containerã§è¡¨ç¤ºæž ã‚’è¨å®š rowã§å‰²ä»˜æž ã‚’è¨å®š col-**-**ã§ã‚«ãƒ©ãƒ æ•°ã‚’è¨å®šï¼ˆã‚«ãƒ©ãƒ æ•°ã®åˆè¨ˆã¯12ã§ä»¥å‰ã¨åŒã˜ã§ã™ï¼‰ 表示デãƒã‚¤ã‚¹ï¼ˆã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã‚µã‚¤ã‚ºï¼‰ã«ã‚ˆã‚Šãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå¤‰ã‚ã£ã¦ãã¾ã™ã€‚ 基本的ã«PCã§ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã—表示確èªã‚’è¡Œã†ã¨æ€ã„ã¾ã™ãŒã€æœ€ä½Žã§ã‚‚ブラウザã®ãƒªã‚µã‚¤ã‚ºã‚’è¡Œã„å„表示デãƒã‚¤ã‚¹ã‚µã‚¤ã‚ºã®è¡¨ç¤ºç¢ºèªã‚’ã—ã¦ä¸‹ã•ã„。 グリッドシステムã®è¨å®š å¯å¤‰ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã§è¡¨ç¤ºã™ã‚‹ カラムを入れåã«ã™ã‚‹ オフセットカラムã®æŒ‡å®š カラムã®è¡¨ç¤ºé †ã‚’指定
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}