SlideShare uma empresa Scribd logo
1 de 9
LESSとBootstrap

ローカル環境の整備
http://incident57.com/less/
Bootstrap の LESS




https://github.com/twitter/bootstrap
開発環境へ
基本的な使い方
<!DOCTYPE html>
<html>
<head>
  <link href="css/bootstrap.min.css"
rel="stylesheet">
</head>
 <body>
  <h1>Hello, world!</h1>
</body>
 </html>
ボタン
<!DOCTYPE html>
<html>
<head>
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, world!</h1>
  <a class="btn btn-success btn-large" href="#">
  <i class="icon-white icon-ok"></i>
  実行する
  </a>
</body>
</html>
LESS
twitter Bootstrap はLESSというCSSメタ言語
(プリプロセッサ)で記述されている。メ
タ言語とは一定の記述で複数箇所に記述さ
れたパーツを解りやすい単語に置き換えた
ものである。例えばRGBカラーの#0000FFを
@blueと命名するという感じだ。カラース
キームを調整する場合、従来ならばCSSのカ
ラー値を逐一編集する必要があった。twitter
Bootstrap ではLESSというCSSメタ言語(プリ
プロセッサ)で記述されているため、一括
で変更することができる。
字ばかりですいません。
http://winless.org/

Mais conteúdo relacionado

Semelhante a XOOPS and Twitter Bootstrap

芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
 
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るWordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Takashi Uemura
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
 

Semelhante a XOOPS and Twitter Bootstrap (20)

芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
WordPress と Bootstrap
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
 
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
 
Css2
Css2Css2
Css2
 
Mustache入門
Mustache入門Mustache入門
Mustache入門
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
Oktopartial Introduction
Oktopartial IntroductionOktopartial Introduction
Oktopartial Introduction
 
HTML/CSS
HTML/CSSHTML/CSS
HTML/CSS
 
Html:css
Html:cssHtml:css
Html:css
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
 
Module02
Module02Module02
Module02
 
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作るBootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
 
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るWordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
 
Css
CssCss
Css
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
 
0614_LiTLeaders_CSS講座
0614_LiTLeaders_CSS講座0614_LiTLeaders_CSS講座
0614_LiTLeaders_CSS講座
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_
 
Web 02
Web 02Web 02
Web 02
 

Mais de Yoshi Sakai

Rhodes mobile Framework
Rhodes mobile FrameworkRhodes mobile Framework
Rhodes mobile Framework
Yoshi Sakai
 
Rhodes mobile Framework (Japanese)
Rhodes mobile Framework (Japanese)Rhodes mobile Framework (Japanese)
Rhodes mobile Framework (Japanese)
Yoshi Sakai
 
Osc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupwareOsc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupware
Yoshi Sakai
 
XOOPS Cube 2.2 Pack 2011
XOOPS Cube 2.2 Pack 2011XOOPS Cube 2.2 Pack 2011
XOOPS Cube 2.2 Pack 2011
Yoshi Sakai
 
Xoops Cube Saturday Lab. 2010/09/25
Xoops Cube Saturday Lab. 2010/09/25Xoops Cube Saturday Lab. 2010/09/25
Xoops Cube Saturday Lab. 2010/09/25
Yoshi Sakai
 

Mais de Yoshi Sakai (18)

いきなりAi tensor flow gpuによる画像分類と生成
いきなりAi tensor flow gpuによる画像分類と生成いきなりAi tensor flow gpuによる画像分類と生成
いきなりAi tensor flow gpuによる画像分類と生成
 
Access で Excel ファイルの操作を行う為のライブラリ設定
Access で Excel ファイルの操作を行う為のライブラリ設定Access で Excel ファイルの操作を行う為のライブラリ設定
Access で Excel ファイルの操作を行う為のライブラリ設定
 
Paypal REST api ( Japanese version )
Paypal REST api ( Japanese version )Paypal REST api ( Japanese version )
Paypal REST api ( Japanese version )
 
Rhodes mobile Framework
Rhodes mobile FrameworkRhodes mobile Framework
Rhodes mobile Framework
 
Rhodes mobile Framework (Japanese)
Rhodes mobile Framework (Japanese)Rhodes mobile Framework (Japanese)
Rhodes mobile Framework (Japanese)
 
Xoopsec
XoopsecXoopsec
Xoopsec
 
Osc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupwareOsc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupware
 
XOOPS EC Distribution
XOOPS EC DistributionXOOPS EC Distribution
XOOPS EC Distribution
 
XOOPS EC on C4SA Paas deployment
XOOPS EC on C4SA Paas deploymentXOOPS EC on C4SA Paas deployment
XOOPS EC on C4SA Paas deployment
 
Xcc2012
Xcc2012Xcc2012
Xcc2012
 
Xoops x
Xoops xXoops x
Xoops x
 
Oss活動指針
Oss活動指針Oss活動指針
Oss活動指針
 
Weeklycms20120218
Weeklycms20120218Weeklycms20120218
Weeklycms20120218
 
XOOPS Cube 2.2 Pack 2011
XOOPS Cube 2.2 Pack 2011XOOPS Cube 2.2 Pack 2011
XOOPS Cube 2.2 Pack 2011
 
XOOPS Securilty flow
XOOPS Securilty flowXOOPS Securilty flow
XOOPS Securilty flow
 
Seminer20110119
Seminer20110119Seminer20110119
Seminer20110119
 
Satlab20101127
Satlab20101127Satlab20101127
Satlab20101127
 
Xoops Cube Saturday Lab. 2010/09/25
Xoops Cube Saturday Lab. 2010/09/25Xoops Cube Saturday Lab. 2010/09/25
Xoops Cube Saturday Lab. 2010/09/25
 

Último

研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
atsushi061452
 
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
 

Último (12)

5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 

XOOPS and Twitter Bootstrap