Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ
Bootstrap 5のリリースがいよいよ近づいてきたようです。 Bootstrap 5では、jQueryは削除され、IE10のサポート終了が予定されており、注目すべき新機能を紹介します。 Bootstrap 5 release date and what's new about it by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5がリリースされる日 Bootstrap 5で注目の新機能 jQueryの削除 😱 IE10のサポート終了 📺 SVGのカスタムアイコン 🚀 JekyllからHugoへ切り替え 🔝 JavaScriptとCSSのアップデート はじめに Bootstrapがリリースされてから8年が経ち、現在では世界で最も人気のあるCSSフレームワークとなり
【Bootstrap製】90ページ超えの無料HTML5／CSS3テンプレート素材 Titan
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
Bootsnapについて
Bootsnapに調べたのでメモ。なお、確認した際のバージョンは1.0.0です。 Shopifyが出しているBootsnapというgemがあります。説明に書いてある通り、巨大なRuby / Railsのアプリを高速化する為のgemらしいです。 何をやってくれるかというと、Ruby, Active Support、YAMLのメソッドの呼び出しの最適化、及び、キャッシュをしてくれる、というものらしいです。 なお、1.0.0の時点でサポートしているプラットフォームはMacOSとLinuxだけです。Windowsは未対応。 また、Rubyは2.3.0以上のみサポートしています。 使い方Gemfileにgem 'bootsnap'を追加し、下記設定をrequire 'bundler/setup'の後に定義すればOKです。 require 'bootsnap' Bootsnap.setup( cach
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー
デザイナーやコーダーがいなくても、BootstrapベースのかっこいいWebページが驚くほど簡単に作成できてしまう -Assembly | コリス
デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。 サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。 Assembly Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料（$17）です。 $17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。 まずは、Assemblyでどんなページができるか見てみましょう。 縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落として
総まとめ: Bootstrapの無料で高品質なテーマファイルがダウンロードできるサイト
ランディングページ、プロダクトページ、スモールビジネスなどの商用、ポートフォリオ、ギャラリー、ブログなどの個人で利用できるBootstrapをベースにしたサイトが作成できる無料のテーマ・テンプレートがダウンロードできるサイトを紹介します。 コンテンツのコンポーネント、ナビゲーション、サイドバーやフッタのウィジェットもあり、カスタマイズする際の参考にもなると思います。
Sassの!defaultフラグの使い方と使われ方
Sassを書く時には変数を多用することと思います。それら変数は自分で定義して自分で使うので、同じプロジェクト内で再定義する必要はあまりありません。しかし他人や自分の作ったSassファイルを流用する場合、その中で使われている変数の値を最適化する必要が出てきます。もしその変数がハード・コーディングされているだけだとしたらどうでしょうか？ その場合変数を直接書き換えることになるでしょう。こういったSassファイルの再利用における問題を解決するためにSassには!defaultというフラグが用意されています。 Less & Sass Advent Calendar 2011もついに18日目ですね。ゴールまであと少しです。 まずはSassリファレンスの!defaultを扱っている部分を読んでみましょう。参考にざっと以下に訳してみました。 変数の値を指定する時、!defaultというフラグを付けておく
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
rails4 bootstrap3 で Glyphicons が 表示されない際の対応 - 技術メモ
rails4 の bootstrap3 の Glyphicons を使用すると production 環境で 404 not found となり表示できない場合の対応。 Glyphicons の *ett, *svg, *ttf, *woff が assets.precompile の対象外となっていることで not found となるようなので、 config/application.rb で以下の設定を追加すると precompile されるようになり表示できます。 #config/application.rb module ProjectName class Application < Rails::Application # vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.* を precompile の対象に含
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
Ruby + Heroku + Highchartsで食べたリンゴを月別にグラフ化してみた - メモ的な思考的な
以前、リンゴ全体の食べた割合をグラフ化してみました。 Ruby + Heroku + Highchartsで食べたリンゴの割合をグラフ化してみた - メモ的な思考的な ただ、これではどの時期に何のリンゴを食べたのか、つまり旬のリンゴは何なのかが分かりづらい状態でした。 そのため、今回は月別のグラフを追加してみることにしました*1。 ■デモ りんごたべた～ ■ソースコード thinkAmi/ringo-tabetter · GitHub ■2013/3/31時点 シナノゴールドばかり食べていたせいで、旬のリンゴがよく分かりません... 8月あたりからツガルが始まり、9月と10月頃はトキや秋映を食べていたような気がします。 Twitter始めたのが遅かったので、トキ・秋映が反映されていないのが悲しいなぁ。一ヶ月間くらい、それらを食べていた記憶がある。 2013-03-06 06:58:50 v
BootstrapのSassを使ってGlyphiconsを表示させる方法
これ、以前解決方法を見つけたのにもう一度やろうとしたら方法がわからなくて苦労したのでメモ。 自分のテーマは、_sにBootstrap３のSassを組み合わせて使っているんですが、そのままの設定だとGlyphiconsのフォントが表示できません。 そんなときは、 assets/stylesheets/bootstrap/_variables.scss を開き、もともとある$icon-font-pathをコメントアウトしてから、下記のようにパスを書いてあげればOKです。 //$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default; $icon-font-path: "assets/fonts/bootstrap/" !default; いやぁ、やっぱり苦労して
twitter typeaheadはいろいろ改良されていた - Qiita
Bootstrap内にもauto complete機能としてtypeaheadがあるが、日本語の扱いに難があるみたい。 Bootstrap Typeaheadの日本語入力対応 | PLUS ARKの技術メモ: [Twitter Bootstrap]typeaheadでの日本語入力問題への対策 だが、Bootstrap内とは別にtwitter制作のtypeaheadライブラリがあり、これを使用してみると日本語問題はないっぽい。しかも、機能も強化されている。 twitter/typeahead.js typeahead.js – examples そこで、いくつかサンプルを。 なお、この説明に使用しているtypeahead.jsのバージョンは0.9.3になります。 2014年2月5日現在、バージョンは0.10.0となっており、設定が違っているみたいです（コメントありがとうございました）なので、
RailsアプリでCSSが更新されない…
Railsアプリを開発していて，時に app/assets/stylesheets/layout.css.scss を書き換えて，ページを更新したときに，「あれっ，スタイルが更新されていないよ〜 (T-T)」というような状況が出る場合があります． 最初からずーっとdevelopment環境で作業していれば，app/assets/stylesheets 配下のスタイルファイルはページが読み込まれるたびに全て読み込む設定にデフォルトでなっているので，常に更新結果が反映されます．でも，ページアクセスの度にこれら複数のファイルが読み込まれるので，本番環境（production）環境では，これらスタイルファイル（css.scss）を結合して1つの application.css として読み込まれる様に，次のようなコマンドで，事前にコンパイルしておくのです． $ bundle exec rake as
simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その３） | Oh My Enter!
前回はsimple_formを使ったカスタムインプットの作成方法を紹介しました。今回はそのカスタム・インプットとbootstrapの『Typeahead』を組み合わせた便利なインプットを作成したいと思います。 Typeaheadとは Typeaheadとは、Twitter Bootstrapが提供するJavascriptのひとつで、オートコンプリート付きのテキストフィールドを簡単に作成することができるjQueryプラグインです。 個人的には、BootstrapのJavascriptの中で、一番使える機能だと思っています。bootstrap-rails.gemを導入していれば、この便利な機能があなたのRailsアプリですぐに使用できます。さっそく使ってみましょう。 どこに適用するかというと・・・Bookを登録する際に『Author』という項目を入力しますね。 同一の著者が複数の本を執筆するの
RailsのForm内のbuttonでsubmit以外のことをさせたい（link_to的なこと） - Qiita
やりたいこと RailsのForm内にbuttonを置いて、csv fileをdownloadさせたい（例です） はまったこと link_toだと見た目をボタンに変更するCSSを書く必要がある（Bootstrapとか使えない環境なので手軽でなさそうだった） Form内にbutton_toを配置すると、そのFormのsubmitになってしまう 解決法 Form内にbutton_tag（typeはbutton）を配置し、onclickでurlを変更する （もっと良い方法があれば教えてください） 試行3を参照ください。 試行1（link_toを使って、見た目だけボタンにする） リンクの形であれば次の感じで実現できるので、後は見た目をbuttonに変更すれば良さそうです。
Twitter Bootstrap + Rails 3.2.3 の使い方を知るためにスパイクしました - bekkou68 の日記
はじめに プログラマでも簡単にそれっぽいデザインができるという Twitter Bootstrap を試しました。Rails と組み合わせてスパイクしました。Grid を試してみたり、table や form にデザインをあてたりしました。スクラッチから Rails + Twitter Bootstrap を立ち上げたいときに参考になると思います。 ソースコードはこちらです。 https://github.com/bekkou68/bootstrap_bootcamp （追記2012年10月20日：英語版を書きました） 環境 以下がそろってるとします。 Rails 3.2.3 Ruby 1.9.3 MySQL 5.1.54 Twitter Bootstrap の layout を生成する まずは、Rails と Twitter Bootstrap を組み合わせて画面で確認できるところまでや
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapはこう使う
Bootstrapでカッコいいナビゲーションバーを表示しよう
