Skip to content
master
Go to file
Code
This branch is 81 commits ahead, 122 commits behind windyakin:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Rin

Build Status by Travis CI Build status by AppVeyor devDependency Status The MIT License npm

http://rinhoshizo.la/

Rin

"Rin" は "Honoka" を元にした日本語も美しく表示できるBootstrapテーマです。

About "Rin"

通常のBootstrapでは,日本語のフォント指定や文字サイズは最適とはいえません。"Rin"や"Honoka"はそんなBootstrapをベースに,日本語表示に適したフォント指定や,文字サイズに関するコードを追記したBootstrapテーマの一つです。

Live Demo

Getting Started

Download

Releasesから最新版をダウンロードしてください。

npm

Node.js のパッケージ管理システムである、 npm からダウンロードすることができます。webpack など、npmを利用したmodule bundlerでご利用ください。

npm install --save bootstrap-rin

パッケージ名が 「bootstrap-rin」 であることに注意してください。

Bower

Bowerからインストールすることができます。

最新版をインストールするには以下のコマンドを実行してください。

bower install --save-dev $(node -e "$(curl -fsSL https://cdn.honokak.osaka/last.js)" raryosu Rin)

もしcURLが入っていない環境の場合には、

bower install --save-dev Rin#(version)

(version)にはバージョン番号を指定します(ex. Rin#3.3.6-3)。Rinの最新バージョン番号はReleasesから確認してください。

バージョン番号を指定しなかった場合,Bowerの仕様上「Honoka」がインストールされます。

また,django-bower等のラッパーを利用する場合は,以下のような指定を行うことでRinを利用することができます。

Rin=git://github.com/raryosu/Rin#(version)

Usage

Rinは単なるBootstrapテーマにしか過ぎないため,基本的な使い方は本家Bootstrapとほとんど変わりません。よって以下に書くことは本家Bootstrapからの引用,もしくはその一部を変更したものです。用意されたCSSクラスやコンポーネントなど,より詳細な使い方のドキュメントは本家Bootstrapの各種リファレンスページをご覧になることを推奨します。

Package

配布しているzipファイルの内容物は以下のとおりです。bootstrap.min.*といったように,ファイル名にminがつくファイルは,改行やインデント・スペーシングをなくした(minifyされた)コードで,ユーザがウェブページを読み込む際の転送量を少なくすることができます。通常はこのbootstrap.min.*を使うことをおすすめします。

honoka/
├─ bootstrap.html
├─ css/
│   ├─ bootstrap.css
│   └─ bootstrap.min.css
├─ fonts/
│   ├─ glyphicons-halflings-regular.eot
│   ├─ glyphicons-halflings-regular.svg
│   ├─ glyphicons-halflings-regular.ttf
│   ├─ glyphicons-halflings-regular.woff
│   └─ glyphicons-halflings-regular.woff2
└─ js/
		 ├─ bootstrap.js
		 └─ bootstrap.min.js

Basic Template

Bootstrapをつかってウェブページを作成する際に基本となるHTML部分は以下のようになります。CSSやJavaScriptのファイルパスは環境に合わせて変更する必要があります。

<!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, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Do you hate "YuGothic"?

もしあなたが日本語フォントに游ゴシックを指定したくない場合,その要素に対して.no-thank-yu(※youではなくyu)を指定することで游ゴシックの指定はされなくなり,Windowsであればメイリオ,Mac OS Xであればヒラギノ角ゴを優先的に使用するようになります。

例えばページ全体に対して游ゴシックを用いたくない場合は,<body>に対して.no-thank-yuを指定(<body class="no-thank-yu">)することで,ページ全体で游ゴシックは使用されなくなります。

Build

ビルドの方法については Wiki をご覧ください。

License

MIT License

Author of "Honoka"

Editor of "Rin"

You can’t perform that action at this time.