CSS/Framework
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*CSS framework
~
CSSフレームワークとは、HTMLタグにクラスを適用するかたちで...
-留意点：便利なものにはリスクもあります。以下の点にご留意...
--仕組みがわかれば生産効率は上がりますが、それなりに学習...
--仕様とは異なる構造のものを作るのは逆に大変になる。
--直接的実装に比べ、無駄に重たく、パフォーマンスが劣る場...
--CSSフレームワークは多数あります。学習したことが無駄にな...
-ここでは、''Bootstrap'' を例に、フレームワークの使い方を...
~
#contents2_1
~
**Bootstrap
~
***Download
以下のページで「Download bootstrap」を選んでください。
http://getbootstrap.com/getting-started/#download
解凍すると bootstrap-x.x.x-dist というフォルダができて、
その中にcss、js、fontsの３つのフォルダが見えると思います。
必要なファイルは、以下のものだけです。その他はなくてもOK。
-''css'' / bootstrap-theme.min.css、bootstrap.min.css
-''js'' / bootstrap.min.js
-''fonts'' / （この中のフォントデータはすべて使います。）
このフォルダ内に ''Bootstrapの記述ルールに沿って書かれたH...
~
***BasicTemplate
以下のコードは [[Basic template>http://getbootstrap.com/g...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=ed...
<meta name="viewport" content="width=device-width...
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="styleshee...
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/lib...
<script src="js/bootstrap.min.js"></script>
</body>
</html>
このテンプレートでは「Hello, world!」と表示されるだけです...
~
***Sample #1 [[→ DEMO>https://design.kyusan-u.ac.jp/Samp...
ナビゲーションをヘッダーに固定した形で、レスポンシブにな...
-index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, i...
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<title>Bootstrap Sample</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle col...
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyGa...
</div>
<div class="collapse navbar-collapse" id="SiteNa...
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="password" placeholder="Search...
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Sample Site</h1>
<p>This is a sample page using Bootstrap ・・<...
<p><a class="btn btn-default btn-lg" href="htt...
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Title01</h2>
<p>Lorem ipsum dolor sit amet, ・・</p>
<p><a class="btn btn-primary" href="#" role="b...
</div>
<div class="col-md-4">
<h2>Title02</h2>
<p>Nunc euismod elementum odio.・・</p>
<p><a class="btn btn-primary" href="#" role="b...
</div>
<div class="col-md-4">
<h2>Title03</h2>
<p>Vivamus porta, ligula id pretium commodo, ...
<p><a class="btn btn-primary" href="#" role="b...
</div>
</div>
<hr>
<footer>
<p>© YourName http://example.com</p>
</footer>
</div>
</body>
</html>
~
-style.css
body {
padding-top: 50px; /* fixed navbar 50px */
padding-bottom: 20px;
}
.jumbotron{
background: orange;
}
~
-解説
HTMLの各要素に、Bootstrapのクラスを適用させています。
追加のスタイルシート（style.css）は、サイトのカスタマイズ...
・ナビをページ上部に固定するため、その分だけ body を下げる
・ヘッダー部分(jumbotron)の背景色をORANGEに変更
~
***Sample #2 [[→ DEMO>https://design.kyusan-u.ac.jp/Samp...
シングルページ、３セクションのサンプルです。
-index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, ini...
<title>SinglePage Sample</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" ro...
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data...
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyGall...
</div>
<div class="collapse navbar-collapse" id="SiteNavi...
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#links">Links</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<h1>Sample Page</h1>
<p>This is a sample page using Bootstrap </p>
</div>
</header>
<section id="about">
<div class="container">
<div class="row">
<article class="col-md-8">
<h1>ABOUT</h1>
<p class="lead">Single Page Website Powerd by ...
<p>Lorem ipsum dolor sit amet, consectetur adi...
</article>
<aside class="col-md-4">
<h2 class="lead">bookmarks</h2>
<nav>
<ul>
<li>FineArts & MediaSciences
<li>Photography & ImagingArts
<li>VisualDesign
<li>LivingEnvironmentDesign
<li>SocialDesign
</ul>
</nav>
</aside>
</div>
</div>
</section>
<section id="gallery">
<div class="container">
<div class="row">
<article class="col-md-8">
<h1>GALLERY</h1>
<p class="lead">Sample Image Gallery</p>
<div class="col-md-3">
<img class="thumb" src="images/monalisa.jpg">
<p class="notes">
La Gioconda (1519）<br>
Leonardo da Vinci<br>
30 × 21 inch<br>
</p>
</div>
<div class="col-md-3">
<img class="thumb" src="images/monalisa.jpg">
<p class="notes">
La Gioconda (1519）<br>
Leonardo da Vinci<br>
30 × 21 inch<br>
</p>
</div>
<div class="col-md-3">
以下同様
</div>
</article>
<aside class="col-md-4">
<h2 class="lead">bookmarks</h2>
内容省略
</aside>
</div>
</div>
</section>
<section id="links">
<div class="container">
<div class="row">
<article class="col-md-8">
<h1>LINKS</h1>
<p>内容省略</p>
</article>
<aside class="col-md-4">
<h2 class="lead">bookmarks</h2>
<p>内容省略</p>
</aside>
</div>
</div>
</section>
<hr>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>© YourName http://example.com</p>
</div>
</div>
</div>
</footer>
<script>
$('a').smoothScroll();
</script>
</body>
</html>
~
-style.css
body {
margin-top: 50px;
}
section {
padding-top: 75px;
}
.thumb {
width: 100%;
margin-bottom: 16px;
}
.notes {
width: 100%;
font-size: 10px;
line-height: 150%;
}
~
-解説
--HTMLの各要素に、Bootstrapのクラスを適用させています。
--スムーズスクロールを実現するために、jQueryのプラグイン
jquery.smooth-scroll.min をjsフォルダに追加しています。
--追加のスタイルシート（style.css）は、サイトのカスタマイ...
・ナビをページ上部に固定するため、その分だけ body を下げ...
・ページ内リンクの位置ズレ解消のために、section のパディ...
75px分の余白を作っています。
・画像とキャプションの表示について微調整しています。
~
#hr
以下、基本的なルールについて概説します。
~
***Layout
-レスポンシブ設定
Bootstrap では、4つの画面サイズを前提としています。
--Extra small ：スマートフォン 768px未満 ＞ ''記号：xs''
--Small：タブレット 768～991px ＞ ''記号：sm''
--Medium：中型ディスプレイ 992～1199px ＞ ''記号：md''
--Large：大型ディスプレイ 1200px以上 ＞ ''記号：lg''
-コンテナ
Bootstrap の各要素はコンテナの中に記述するのが前提です。...
<div class="container bg-info">
container
</div>
--class = "container"
固定的コンテナで：左右15pxの余白をもってウインドウ中央に...
--class = "container-fluid"
流動的コンテナ：ウィンドウ幅に応じてスムーズに幅が変動し...
-グリッドシステム
Bootstrap はコンテナを12個のグリッドに分割して、以下のソ...
<div class="container">
<div class="row">
<div class="col-lg-8">column 8</div>
<div class="col-lg-4">column 4</div>
</div>
</div>
~
***Content
タグを適正に使用したHTML文書であれば、bootstrap.cssを読み...
-見出し
普通に＜h1＞〜＜h6＞を用います。
その中で<small>を使うとサブタイトルに最適化されます。
<h1>Title <small>Sub Title</small></h1>
-本文
普通に＜p＞タグを用います。.lead を指定するとリード文に最...
<p class="lead">リード文の記載</p>
<p>本文記事の記載・・・・・・</p>
-本文の配置
以下のようにそれぞれクラスを指定することで最適化されます。
<p class="text-left">左寄せテキスト</p>
<p class="text-center">中央寄せテキスト</p>
<p class="text-right">右寄せテキスト</p>
<p class="text-justify">両端揃えテキスト</p>
<p class="text-nowrap">改行禁止テキスト</p>
-リスト
普通に<ul>と<li>を使いますが、以下のような書き方でクラス...
<ul class="list-unstyled">
<li>home</li>
<li>gallery</li>
<li>links</li>
</ul>
--class = "list-unstyled"：先頭にマークの無いリスト
--class = "list-inline"：横方向に並ぶインラインリスト
-ボタン
--class ="btn" でbootstrapのボタンデザインが適用されます...
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>
--ボタンの大きさは、.btn-lg, .btn-sm, .btn-xs などで指定...
--全幅のブロックボタンは、.btn-block で指定します。
~
***Documents
多数の記事がありますが、以下頻繁に話題となる記事です。
-Layout
--http://v4-alpha.getbootstrap.com/layout/overview/
--http://v4-alpha.getbootstrap.com/layout/grid/
-Content
--https://v4-alpha.getbootstrap.com/content/typography/
--http://v4-alpha.getbootstrap.com/content/images/
-Component
--https://v4-alpha.getbootstrap.com/components/buttons/
--http://v4-alpha.getbootstrap.com/components/card/
--http://v4-alpha.getbootstrap.com/components/carousel/
--http://v4-alpha.getbootstrap.com/components/collapse/
--http://v4-alpha.getbootstrap.com/components/dropdowns/
--http://v4-alpha.getbootstrap.com/components/forms/
--http://v4-alpha.getbootstrap.com/components/jumbotron/
--http://v4-alpha.getbootstrap.com/components/list-group/
--http://v4-alpha.getbootstrap.com/components/navs/
--http://v4-alpha.getbootstrap.com/components/navbar/
--http://v4-alpha.getbootstrap.com/components/pagination/
--http://v4-alpha.getbootstrap.com/components/popovers/
~
***Examples
以下、様々なサンプルが紹介されています。
http://getbootstrap.com/getting-started/#examples
すべてのサンプルを含んだ圧縮ファイルは以下からダウンロー...
https://github.com/twbs/bootstrap/archive/v3.3.7.zip ...
フォルダ内の docs > example と辿ると、その中に20個ほどの...
その他参考
-https://startbootstrap.com/
-https://themewagon.com/
~
~
**様々なフレームワーク
***Google Material Design
Material Design とは、2014年にGoogleが提唱した UI/UX デザ...
-https://material.io/
-https://material.io/develop/web/
-https://material-components.github.io/material-component...
以下、それに基づいて設計されたCSSフレームワークです。
-Material Design Lite：https://getmdl.io/
-Materialize：https://materializecss.com/
-MDB：https://fezvrasta.github.io/bootstrap-material-desi...
-MUI：https://www.muicss.com/
-Material-UI：https://material-ui.com/
以下のページに概要説明とサンプルを掲載しています。
-[[MaterialDesign]]
~
***その他
-Foundation
http://foundation.zurb.com/
-Web Start Kit（Google）
https://developers.google.com/web/starter-kit/
-SemanticUI
http://semantic-ui.com/
-bulma
http://bulma.io/
-SkyBlue CSS
http://stanko.github.io/skyblue/
-Skeleton
http://getskeleton.com/
-Responsive Grid System
http://www.responsivegridsystem.com/
-Pure（Yahoo）
http://purecss.io/
-960 Grid System
http://960.gs/
~
~
~
終了行:
*CSS framework
~
CSSフレームワークとは、HTMLタグにクラスを適用するかたちで...
-留意点：便利なものにはリスクもあります。以下の点にご留意...
--仕組みがわかれば生産効率は上がりますが、それなりに学習...
--仕様とは異なる構造のものを作るのは逆に大変になる。
--直接的実装に比べ、無駄に重たく、パフォーマンスが劣る場...
--CSSフレームワークは多数あります。学習したことが無駄にな...
-ここでは、''Bootstrap'' を例に、フレームワークの使い方を...
~
#contents2_1
~
**Bootstrap
~
***Download
以下のページで「Download bootstrap」を選んでください。
http://getbootstrap.com/getting-started/#download
解凍すると bootstrap-x.x.x-dist というフォルダができて、
その中にcss、js、fontsの３つのフォルダが見えると思います。
必要なファイルは、以下のものだけです。その他はなくてもOK。
-''css'' / bootstrap-theme.min.css、bootstrap.min.css
-''js'' / bootstrap.min.js
-''fonts'' / （この中のフォントデータはすべて使います。）
このフォルダ内に ''Bootstrapの記述ルールに沿って書かれたH...
~
***BasicTemplate
以下のコードは [[Basic template>http://getbootstrap.com/g...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=ed...
<meta name="viewport" content="width=device-width...
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="styleshee...
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/lib...
<script src="js/bootstrap.min.js"></script>
</body>
</html>
このテンプレートでは「Hello, world!」と表示されるだけです...
~
***Sample #1 [[→ DEMO>https://design.kyusan-u.ac.jp/Samp...
ナビゲーションをヘッダーに固定した形で、レスポンシブにな...
-index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, i...
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<title>Bootstrap Sample</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle col...
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyGa...
</div>
<div class="collapse navbar-collapse" id="SiteNa...
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="password" placeholder="Search...
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Sample Site</h1>
<p>This is a sample page using Bootstrap ・・<...
<p><a class="btn btn-default btn-lg" href="htt...
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Title01</h2>
<p>Lorem ipsum dolor sit amet, ・・</p>
<p><a class="btn btn-primary" href="#" role="b...
</div>
<div class="col-md-4">
<h2>Title02</h2>
<p>Nunc euismod elementum odio.・・</p>
<p><a class="btn btn-primary" href="#" role="b...
</div>
<div class="col-md-4">
<h2>Title03</h2>
<p>Vivamus porta, ligula id pretium commodo, ...
<p><a class="btn btn-primary" href="#" role="b...
</div>
</div>
<hr>
<footer>
<p>© YourName http://example.com</p>
</footer>
</div>
</body>
</html>
~
-style.css
body {
padding-top: 50px; /* fixed navbar 50px */
padding-bottom: 20px;
}
.jumbotron{
background: orange;
}
~
-解説
HTMLの各要素に、Bootstrapのクラスを適用させています。
追加のスタイルシート（style.css）は、サイトのカスタマイズ...
・ナビをページ上部に固定するため、その分だけ body を下げる
・ヘッダー部分(jumbotron)の背景色をORANGEに変更
~
***Sample #2 [[→ DEMO>https://design.kyusan-u.ac.jp/Samp...
シングルページ、３セクションのサンプルです。
-index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, ini...
<title>SinglePage Sample</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" ro...
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data...
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyGall...
</div>
<div class="collapse navbar-collapse" id="SiteNavi...
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#links">Links</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<h1>Sample Page</h1>
<p>This is a sample page using Bootstrap </p>
</div>
</header>
<section id="about">
<div class="container">
<div class="row">
<article class="col-md-8">
<h1>ABOUT</h1>
<p class="lead">Single Page Website Powerd by ...
<p>Lorem ipsum dolor sit amet, consectetur adi...
</article>
<aside class="col-md-4">
<h2 class="lead">bookmarks</h2>
<nav>
<ul>
<li>FineArts & MediaSciences
<li>Photography & ImagingArts
<li>VisualDesign
<li>LivingEnvironmentDesign
<li>SocialDesign
</ul>
</nav>
</aside>
</div>
</div>
</section>
<section id="gallery">
<div class="container">
<div class="row">
<article class="col-md-8">
<h1>GALLERY</h1>
<p class="lead">Sample Image Gallery</p>
<div class="col-md-3">
<img class="thumb" src="images/monalisa.jpg">
<p class="notes">
La Gioconda (1519）<br>
Leonardo da Vinci<br>
30 × 21 inch<br>
</p>
</div>
<div class="col-md-3">
<img class="thumb" src="images/monalisa.jpg">
<p class="notes">
La Gioconda (1519）<br>
Leonardo da Vinci<br>
30 × 21 inch<br>
</p>
</div>
<div class="col-md-3">
以下同様
</div>
</article>
<aside class="col-md-4">
<h2 class="lead">bookmarks</h2>
内容省略
</aside>
</div>
</div>
</section>
<section id="links">
<div class="container">
<div class="row">
<article class="col-md-8">
<h1>LINKS</h1>
<p>内容省略</p>
</article>
<aside class="col-md-4">
<h2 class="lead">bookmarks</h2>
<p>内容省略</p>
</aside>
</div>
</div>
</section>
<hr>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>© YourName http://example.com</p>
</div>
</div>
</div>
</footer>
<script>
$('a').smoothScroll();
</script>
</body>
</html>
~
-style.css
body {
margin-top: 50px;
}
section {
padding-top: 75px;
}
.thumb {
width: 100%;
margin-bottom: 16px;
}
.notes {
width: 100%;
font-size: 10px;
line-height: 150%;
}
~
-解説
--HTMLの各要素に、Bootstrapのクラスを適用させています。
--スムーズスクロールを実現するために、jQueryのプラグイン
jquery.smooth-scroll.min をjsフォルダに追加しています。
--追加のスタイルシート（style.css）は、サイトのカスタマイ...
・ナビをページ上部に固定するため、その分だけ body を下げ...
・ページ内リンクの位置ズレ解消のために、section のパディ...
75px分の余白を作っています。
・画像とキャプションの表示について微調整しています。
~
#hr
以下、基本的なルールについて概説します。
~
***Layout
-レスポンシブ設定
Bootstrap では、4つの画面サイズを前提としています。
--Extra small ：スマートフォン 768px未満 ＞ ''記号：xs''
--Small：タブレット 768～991px ＞ ''記号：sm''
--Medium：中型ディスプレイ 992～1199px ＞ ''記号：md''
--Large：大型ディスプレイ 1200px以上 ＞ ''記号：lg''
-コンテナ
Bootstrap の各要素はコンテナの中に記述するのが前提です。...
<div class="container bg-info">
container
</div>
--class = "container"
固定的コンテナで：左右15pxの余白をもってウインドウ中央に...
--class = "container-fluid"
流動的コンテナ：ウィンドウ幅に応じてスムーズに幅が変動し...
-グリッドシステム
Bootstrap はコンテナを12個のグリッドに分割して、以下のソ...
<div class="container">
<div class="row">
<div class="col-lg-8">column 8</div>
<div class="col-lg-4">column 4</div>
</div>
</div>
~
***Content
タグを適正に使用したHTML文書であれば、bootstrap.cssを読み...
-見出し
普通に＜h1＞〜＜h6＞を用います。
その中で<small>を使うとサブタイトルに最適化されます。
<h1>Title <small>Sub Title</small></h1>
-本文
普通に＜p＞タグを用います。.lead を指定するとリード文に最...
<p class="lead">リード文の記載</p>
<p>本文記事の記載・・・・・・</p>
-本文の配置
以下のようにそれぞれクラスを指定することで最適化されます。
<p class="text-left">左寄せテキスト</p>
<p class="text-center">中央寄せテキスト</p>
<p class="text-right">右寄せテキスト</p>
<p class="text-justify">両端揃えテキスト</p>
<p class="text-nowrap">改行禁止テキスト</p>
-リスト
普通に<ul>と<li>を使いますが、以下のような書き方でクラス...
<ul class="list-unstyled">
<li>home</li>
<li>gallery</li>
<li>links</li>
</ul>
--class = "list-unstyled"：先頭にマークの無いリスト
--class = "list-inline"：横方向に並ぶインラインリスト
-ボタン
--class ="btn" でbootstrapのボタンデザインが適用されます...
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>
--ボタンの大きさは、.btn-lg, .btn-sm, .btn-xs などで指定...
--全幅のブロックボタンは、.btn-block で指定します。
~
***Documents
多数の記事がありますが、以下頻繁に話題となる記事です。
-Layout
--http://v4-alpha.getbootstrap.com/layout/overview/
--http://v4-alpha.getbootstrap.com/layout/grid/
-Content
--https://v4-alpha.getbootstrap.com/content/typography/
--http://v4-alpha.getbootstrap.com/content/images/
-Component
--https://v4-alpha.getbootstrap.com/components/buttons/
--http://v4-alpha.getbootstrap.com/components/card/
--http://v4-alpha.getbootstrap.com/components/carousel/
--http://v4-alpha.getbootstrap.com/components/collapse/
--http://v4-alpha.getbootstrap.com/components/dropdowns/
--http://v4-alpha.getbootstrap.com/components/forms/
--http://v4-alpha.getbootstrap.com/components/jumbotron/
--http://v4-alpha.getbootstrap.com/components/list-group/
--http://v4-alpha.getbootstrap.com/components/navs/
--http://v4-alpha.getbootstrap.com/components/navbar/
--http://v4-alpha.getbootstrap.com/components/pagination/
--http://v4-alpha.getbootstrap.com/components/popovers/
~
***Examples
以下、様々なサンプルが紹介されています。
http://getbootstrap.com/getting-started/#examples
すべてのサンプルを含んだ圧縮ファイルは以下からダウンロー...
https://github.com/twbs/bootstrap/archive/v3.3.7.zip ...
フォルダ内の docs > example と辿ると、その中に20個ほどの...
その他参考
-https://startbootstrap.com/
-https://themewagon.com/
~
~
**様々なフレームワーク
***Google Material Design
Material Design とは、2014年にGoogleが提唱した UI/UX デザ...
-https://material.io/
-https://material.io/develop/web/
-https://material-components.github.io/material-component...
以下、それに基づいて設計されたCSSフレームワークです。
-Material Design Lite：https://getmdl.io/
-Materialize：https://materializecss.com/
-MDB：https://fezvrasta.github.io/bootstrap-material-desi...
-MUI：https://www.muicss.com/
-Material-UI：https://material-ui.com/
以下のページに概要説明とサンプルを掲載しています。
-[[MaterialDesign]]
~
***その他
-Foundation
http://foundation.zurb.com/
-Web Start Kit（Google）
https://developers.google.com/web/starter-kit/
-SemanticUI
http://semantic-ui.com/
-bulma
http://bulma.io/
-SkyBlue CSS
http://stanko.github.io/skyblue/
-Skeleton
http://getskeleton.com/
-Responsive Grid System
http://www.responsivegridsystem.com/
-Pure（Yahoo）
http://purecss.io/
-960 Grid System
http://960.gs/
~
~
~
ページ名:
