トップ  > メモ一覧  > カテゴリ「bootstorap」の絞り込み結果 : 12件

12件中 1 〜 10 表示  1 | 2  次の2件> 最後»

No.4431【引用】色を変えたい!


色を変えたい!

このサイトから、好きな色を探してみては?
http://bootswatch.com/

Twitter BootstrapではLESSを採用しており、自分で好きな色を決めてコンパイルすることも可能ですが、ちょっと面倒ですよね。
このサイトで、細かく色を決めるのはどうでしょうか?
http://stylebootstrap.info/
公式でも、カスタマイズしたcssをダウンロードすることができます。
http://twitter.github.com/bootstrap/download.html

引用元

更新:2012/04/28 00:50 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4415 ページナビゲーションを表示する

bs:ページナビゲーションを表示する

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<h1>ページナビゲーションを表示する</h1>
<div style="margin-top:40px;">

    <div class="pagination">
        <ul>
            <li><a href="">前へ</a></li>
            <li><a href="">1</a></li>
            <li class="active"><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li class="disabled"><a href="">...</a></li>
            <li><a href="">次へ</a></li>
        </ul>
    </div>

</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>



更新:2012/04/15 23:09 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4414 プログレスバーを表示する

bs:プログレスバーを表示する

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<h1>プログレスバーを表示する</h1>

<div style="margin-top:40px;">

    <h4>40%</h4>
    <div class="progress">
        <div style="width:40%;" class="bar"></div>
    </div>

    <h4>バリエーション</h4>
    <div class="progress progress-info">
        <div style="width:40%;" class="bar"></div>
    </div>
    <div class="progress progress-danger progress-striped">
        <div style="width:40%;" class="bar"></div>
    </div>
    <div class="progress progress-danger progress-striped active">
        <div style="width:40%;" class="bar"></div>
    </div>

</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>




更新:2012/04/15 23:00 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4413 ミニラベルを表示する

bs:ミニラベルを表示する

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<h1>ミニラベルを表示する</h1>

<div style="margin-top:40px;">

    <p><span class="label">NOTICE</span> 何かを更新しました!</p>
    <p><span class="label label-info">NOTICE</span> 何かを更新しました!</p>
    <p><span class="label label-important">NOTICE</span> 何かを更新しました!</p>

</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>





更新:2012/04/15 22:52 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4412 アラートメッセージ

bs: アラートメッセージ

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<div style="margin-top:40px;">
    <h3>バリエーション</h3>
    <div class="alert">更新しました</div>
    <div class="alert alert-error">更新しました</div>
    <div class="alert alert-success">更新しました</div>
    <div class="alert alert-info">更新しました</div>
</div>

<div style="margin-top:40px;">
    <h3>「x」付き</h3>
    <p>x を押すとメッセージが消える</p>
    <div class="alert alert-error">
        <a class="close" data-dismiss="alert">x</a>
        更新しました
    </div>
</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>




更新:2012/04/15 22:45 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4411 タブメニュー

bs:タブメニュー

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<div style="margin-top:20px;">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li><a href="#menu1" data-toggle="tab">Menu1</a></li>
            <li><a href="#menu2" data-toggle="tab">Menu2</a></li>
            <li><a href="#menu3" data-toggle="tab">Menu3</a></li>
        </ul>
        <div class="tab-content">
            <div id="menu1" class="tab-pane active">M1</div>
            <div id="menu2" class="tab-pane">M2</div>
            <div id="menu3" class="tab-pane">M3</div>
        </div>
    </div>
</div>

<div style="margin-top:40px;">
    <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
            <li><a href="#menu4" data-toggle="tab">Menu4</a></li>
            <li><a href="#menu5" data-toggle="tab">Menu5</a></li>
            <li><a href="#menu6" data-toggle="tab">Menu6</a></li>
        </ul>
        <div class="tab-content">
            <div id="menu4" class="tab-pane active">M4</div>
            <div id="menu5" class="tab-pane">M5</div>
            <div id="menu6" class="tab-pane">M6</div>
        </div>
    </div>
</div>

<div style="margin-top:40px;">
    <div class="tabbable tabs-below">
        <div class="tab-content">
            <div id="menu7" class="tab-pane active">M7</div>
            <div id="menu8" class="tab-pane">M8</div>
            <div id="menu9" class="tab-pane">M9</div>
        </div>
        <ul class="nav nav-tabs">
            <li><a href="#menu7" data-toggle="tab">Menu7</a></li>
            <li><a href="#menu8" data-toggle="tab">Menu8</a></li>
            <li><a href="#menu9" data-toggle="tab">Menu9</a></li>
        </ul>
    </div>
</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>





更新:2012/04/15 22:36 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4410 ボタン


<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<div style="margin-top:20px;">
    <h3>ボタン(普通・サイズ)</h3>
    <span class="btn">OK!</span>
    <span class="btn btn-small">OK!</span>
    <span class="btn btn-large">OK!</span>
</div>
<div style="margin-top:20px;">
    <h3>ボタン(バリエーション)</h3>
    <span class="btn btn-primary">OK!</span>
    <span class="btn btn-info">OK!</span>
    <span class="btn btn-success">OK!</span>
    <span class="btn btn-warning">OK!</span>
    <span class="btn btn-danger">OK!</span>
</div>

<div style="margin-top:40px;">
    <h3>アイコン付きボタン</h3>
    <span class="btn"><i class="icon-search"></i>search</span>
</div>

<div style="margin-top:20px;">
    <h3>ボタングループ</h3>
    <div class="btn-group">
        <button class="btn">Option 1</button>
        <button class="btn">Option 2</button>
        <button class="btn"><i class="icon-search"></i>Option 3</button>
    </div>
</div>

<div style="margin-top:20px;">
    <h3>ドロップダウン付き</h3>
    <div class="btn-group">
        <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></a>
        <ul class="dropdown-menu">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li class="divider"></li>
                <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>




更新:2012/04/15 22:22 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4409 パンくずリスト

パンくずリスト

<ul class="breadcrumb">
  <li><a href="#">home</a> <span class="divider">&gt;</span></li>
  <li><a href="#">メンバー</a> <span class="divider">&gt;</span></li>
  <li ></li>                                    
  <li class="active">profile</li>               
</ul> 





更新:2012/04/14 23:19 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4408 form バリエーション


<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<div style="margin-top:20px;">
<form action="" class="form-horizontal">
    <div class="control-group">
        <label class="control-label">名前</label>
        <div class="controls">
        <input name="name" type="text">
        <input value="送信" type="submit" class=btn>
        </div>
    </div>
</form>
</div>

<div style="margin-top:40px;">
<form action="" class="form-horizontal">
    <div class="control-group">
        <label class="control-label">名前</label>
        <div class="controls">
        <input name="name" type="text" class="span3">
        </div>
    </div>
    <div class="control-group error">
        <label class="control-label">email</label>
        <div class="controls">
        <input name="name" type="text" class="span4"> <span class="help-inline">形式が正しくありません</span>
        </div>
    </div>
    <div class="control-group warning">
        <label class="control-label">email</label>
        <div class="controls">
        <input name="name" type="text" class="span4"> <span class="help-inline">形式が正しくありません</span>
        </div>
    </div>
    <div class="control-group success">
        <label class="control-label">email</label>
        <div class="controls">
        <input name="name" type="text" class="span4"> <span class="help-inline">形式が正しくありません</span>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
        <input value="送信" type="submit" class=btn>
        </div>
    </div>
</form>
</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>





更新:2012/04/14 23:07 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4407 form 基本


<form action="">
<label for="name">名前</label>
<input name="name" type="text">
<input value="送信" type="submit" class=btn>
</form>




更新:2012/04/14 22:27 カテゴリ: HTML・CSS  > bootstorap ▲トップ
12件中 1 〜 10 表示  1 | 2  次の2件> 最後»

FuelPHP

Mac

フロントエンド開発

web開発

プロマネ

マネタイズ

プレゼン

webサービス運用

webサービス

Linux

サーバ管理

MySQL

ソース・開発

svn・git

PHP

HTML・CSS

JavaScript

ツール, ライブラリ

ビジネス

テンプレート

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0