Bootstrap のファイル選択を custom-file-input できれいにする - A Memorandum
はじめに テンプレート デフォルトの ファイル インプット カスタム・ファイル・インプット bs-custom-file-input を使う ラベルの変更 取消ボタン 取消イベントのマルチブラウザ化 まとめ はじめに Bootstrap の Forms コンポーネントは、デフォルトだと file input だけ統一感がなく残念な感じです。 custom-file-input を使って以下のような file input を作る手順を見ていきます。 なお、ここでは Bootstrap 4 を使います。 テンプレート 以下のような html を出発点とします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
Bootstrap TouchSpin
A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys. <input id="demo1" type="text" value="55" name="demo1"> <script> $("input[name='demo1']").TouchSpin({ min: 0, max: 100, step: 0.1, decimals: 2, boostat: 5, maxboostedstep: 10, postfix: '%' }); </script> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="
CSS - Bootstrap 3 徹底解説！
例えば、コンテンツを、メインとサイドバーに分ける場合、以下のようになります。 （あくまでも、style属性は、見やすくするために指定しています） <div class="container"> <div class="row"> <div class="col-md-9" style="border: 1px solid #009000">メインコンテンツです。</div> <div class="col-md-3" style="border: 1px solid #009000">サイドバーです。</div> </div> </div> デモページ(css-01.html) スマートフォンとパソコンでレイアウトを変える col-md-*だけだと、スマートフォンで表示すると、上下の表示になってしまいます。 パソコンとスマホの両方で、横にコンテンツを並べたい、といった場合上のコード以外に
Rails4でサイト構築をする – Bootstrap導入編｜TechRacho by BPS株式会社
[Rails4でサイト構築をする] - Rails環境構築編 - Scaffold利用編 - Bootstrap導入編 - WYSIWYG導入編 - CSV出力機能編 - スクレイピング機能編(nokogiri) - 非同期処理導入編(delayed_job) - デプロイ環境構築編(capistrano3) 上記を毎週1つずつ出す予定 Ogawaです。今回はBootstrapを使ってデザインを付けてみたいと思います。 ※タイトルにRailsと入っていますが、RailsでしかBootstrapが使えないということは全くありません。 Bootstrapを使う前にまず、対応ブラウザの確認は必ず行ってください。 Bootstrapの利点と欠点 Bootstrapを使う前にBootstrapにどのような利点や欠点があるのか考えてみたいと思います。 ・そもそもBootstrapはHTMLやCSSなど
Bootstrap3 LESSのカスタマイズ -カスタマイズ編 | ajike switch
前回の、Bootstrap3 LESSのカスタマイズ -環境設定編で、Grunt環境構築などの準備をしましたが、今回はカスタマイズする方法について解説します。 Grunt起動 １．ターミナルを開きbootstrapフォルダまで移動 まずは、ターミナルなりコマンドプロンプトを起動して、ダウンロード・解凍したbootstrapの置き場所まで移動してください。 以前、やさしいSassとCompassの導入方法（Windows、Mac）でもコマンドの簡単な使い方を説明しましたが、慣れていない人は、cd␣を入力した後に移動したいフォルダをコマンド画面にドラッグ＆ドロップ＆Enterで楽に移動できます。 ※␣は半角スペースです ２．Grunt実行のコマンド入力 その後、 grunt watch を入力するだけで、Gruntの監視がはじまります。 Waiting… となれば成功です。 編集ファイルを保存
Gruntの導入から説明するBootstrap3 LESSのカスタマイズ - 環境設定編 | ajike switch
はじめてBootstrap LESSをがっつりカスタマイズしたので、今回はその覚え書きです。 Bootstrap3 Lessを使用するにあたり、Gruntを導入したほうが俄然便利なため、今回はGruntの導入から説明いたします。 Botstrap LESSでカスタマイズする理由 前もって言ってしまうと、基本的なカスタマイズは公式サイトのカスタマイズページで十分すぎるくらい出来てしまいます（以前見た時よりも、ものすごく項目数が充実しているような気が…）。 そのため、わざわざLESSを使い、さらには環境を整えてやる必要があるかと言われれば、使用目的によっては不要かもしれないですね。 ただ、LESSでのカスタマイズだと公式サイト以上の編集が容易にスピーディーにでき、もしも途中で大幅な仕様変更があった場合でも柔軟に対応できます。 また、構造把握や管理がしっかりできるので、今後もBootstrapを
Bootstrap3でlessファイルをカスタマイズ、コンパイルする - Qiita
1. 目的 はじめてBootstrapを使ってWEBページをつくってみようとしました。 CSSをカスタマイズのためにはコンパイルが必要ということに気づく lessって何？ コンパイルできて、カスタマイズできる環境にまで ←ここまで 環境は、MacOSX 10.9.5 2. Bootstrapを使う準備 公式サイトからソースコードのダウンロード。 ディレクトリ構造は以下のとおり。 /User/hogehoge/ bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/ 前もってコンパイルされたCSSがはいっています。 Getting StartedにあるBasicテンプレートをindex.htmlとしてコピーして /User/hogeh
Rails4でBootstrap3を導入 -- blog.10rane.com
※ Bootstrapをより簡単に導入する(sass版)記事 もあるので、そちらも参照してみてください。 twitter-bootstrap-railsというGemを使って、Rails4にBootstrap3を導入します。 $ rails -v Rails 4.1.1 $ ruby -v ruby 2.1.0p0 サンプルアプリの用意 まずはbootstrap3という名前のサンプルアプリを生成し、次に確認用のページを生成します。 $ rails new bootstrap3 $ cd bootstrap3 $ rails g scaffold Book title:string price:integer $ rake db:migrate $ rails server Gemfileの設定 Bootstrapのcssがlessで書かれているので、Railsでもlessが扱えるようにし、さ
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapのファイルをアップロードするボタンを標準デザインのボタンにする - Qiita
Making button go full-width?
Bootstrap Form Inputs (more)
Input group · Bootstrap Material Design
GitHub - Eonasdan/tempus-dominus: A powerful Date/time picker widget.
Bootstrap Table Examples
Bootstrap3日本語リファレンス
全部はいらないよね？bootstrap-sassをカスタマイズして使う方法 - Qiita