Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
Capybaraで不定期にElementNotFound（特にCircleCIで） - リア充爆発日記
何事もall or nothingにしたがる人は置いといて、ぼくはせっせと効果的な範囲でテストを書いていきたいと思っていますが、そんなぼくの心を知らずしてか、Capybaraは不定期に以下のようなエラーを吐く。何故か特にCircleCIで。 Capybara::ElementNotFound: Unable to find css "#some_selector" Bootsrapを使っているときに顕著なんだけど、cssのtransitionなどのエフェクトが完了するまえにCapybaraが先走ってしまうことがあるので不定期に起こってしまう、というシナリオ。 であれば、テストのときはエフェクト切ればいいじゃない。 http://stackoverflow.com/questions/14488836/capybara-2-having-trouble-interacting-with-bo
CSS GridがBootstrapよりレイアウト作成に向いている理由（翻訳）
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Why CSS Grid is better than Bootstrap for creating layouts 原文公開日: 2017/12/03 著者: Per Harald Borgen CSS GridはWebレイアウト作成の新しい手法です。ブラウザでネイティブに動作するまともなレイアウトシステムが登場したのはこれが初めてです。 CSS Gridのメリットは、かの有名なBootstrapと比較することでいっそう際立ちます。以前ならJavaScriptを導入しなければ到底不可能だったレイアウトを作れるようになっただけではなく、コードのわかりやすさやメンテのしやすさも向上します。 本記事でその理由を解説します。 筆者は現在無料のCSS Grid上級編講座の準備も進めており、12月中に立ち上げを予定しています。 今のうちに講
ブラウザー上でいきなり使える！Pingendoでプロトタイピングの常識が変わる
プロトタイピングツールが花盛り。アプリをインストールしなくてもブラウザー上ですぐに使えるツール「Pingendo」がおもしろそうです。 知ってのとおりプロトタイピングはとても有効な手法ですが、一歩間違えると多くの時間を取れらてしまいます。プロトタイピングのアプローチには、大きく2つあります。 1. Invision／MarvelApp／Adobe XDなどのツールを使う これらのビジュアルプロトタイピングツールは、最低限の手間で安定したプロトタイプを作成できる、素晴らしいツールです。外部からレイアウトをインポートして、画面遷移や挙動をUIコンポーネントに追加していきます。 しかし、もし少しでも標準と異なるUIをつくろうとすると、できることは限られてきます。 2. HTMLでプロトタイプを作る このアプローチは柔軟性があり、完全に思いどおりのデザインが可能です。しかし時間がかかる上に、普段使
Bootstrap Sass でグリッドカラム数を24に変更する方法 - よつば手帖
Bootstrap Sass のグリッドカラムを変更するのはとっても簡単 ちょっと前にBootstrapのSass版が出ましたね。今まで非公式のを使ってたのでありがたい限り。 Bootstrapのグリッドシステムは12カラムなんですけど、「もう少し細かく調整出来たら良いな」と思う事も出て来ました。 パーセンテージのレイアウトしなきゃいけないかなーって思ってたらものすごく簡単に出来ました。Sassの素晴らしさを再確認。 bootstrap/_variables.scss の中の下記の数字を12から24に変えるだけでした。 $grid-columns:12 !default; ※36カラムの指定も可能です。 Bootstrapはカスタマイズして使ってます。 CSSフレームワークのBootstrapを使ってはいますが、正直グリッドシステム以外はそこまでお世話になってなかったりもします。 行間とか
【CSS】印刷するとリンクの後ろにURLが勝手に表示される at softelメモ
問題 あるWebページを印刷すると、リンクの後ろにURLが表示されました。 ぜんぜん見た目どおりでなくて、ちょっと困るのですが。。。 答え 以下のようなCSSが組み込まれていると、a要素でhref属性がある場合、印刷時に、要素の後ろにリンク先が挿入されます。 @media print { /* 省略 */ a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* 省略 */ } 最近の Twitter Bootstrap などがそうなっているようです。 どうしても困る場合は、CSSの該当部分を削除してしまえばよいです。
【Bootstrap】スマートフォンの時だけ改行する／表示する方法
概要 ▶ スマートフォンの時だけ表示・隠すことは難しくありません。そう、Bootstrapならね。classを付けるだけですが、Bootstrap 3.2から微妙に変わっているので注意です。 レスポンシブwebデザインとは、ひとつのHTMLソースから、スマートフォンやPCなど複数のデバイスへ対応することですが、レスポンシブwebデザインのウェブサイトを作る上で、非常に強い味方になってくれるのがフレームワークのBootstrap（Twitter Bootstrap）です。 このBootstrapがあれば、誰でもすぐにレスポンシブwebデザインのサイトを作ることができます。 さて、その強力なBootstrapで今回はTipsを紹介。 Tipsは「スマートフォン表示の時だけ改行する」「スマートフォン表示の時だけ○○を表示する」というもの。 それでは実例を見ながら説明しましょう。 ●実例「スマート
最速MVCフレームワークMithril.jsの速度の秘密 - Qiita
Mithril 0.2が本日リリースされました。ちょっとURLが変わったり( http://mithril.js.org/ )、API名が一部(m.moduleがm.mount)変わっていたり、コンポーネント機能がコーディング規約レベルから、専用のサポートAPIが追加されたりしていますが、0.1系と大した差はなさそうです。 某node.js会長とはいろいろ社内で話をしたりしたのですが、各種ベンチマークでもトップクラス、平均的には最速のクライアントサイドMVCフレームワークという称号を持ちながら、国内ではまだまだ知られていないMithril。レンダリング速度は仮想DOMの代名詞となったReact.jsの5倍以上(ベンチマークによります)です。 ↓ホームページから転載 ちなみにこちらのベンチマークで計測すると、MithrilはReact.jsの10倍以上速い結果になるのですが、これはちょっと計
LayoutIt! - Interface Builder for CSS Grid and Bootstrap
LayoutIt! helps you make your frontend coding easier without needing to be an expert in JavaScript, HTML5 or CSS3 Bootstrap Builder Drag-and-drop the same Bootstrap components to your own design. Easy to integrate with any programming language, you just download the HTML and start coding the design into it. Grid Generator Start creating your own CSS Grid Layouts simply and easily with this magic t
Bootstrap Studio
Presenting Bootstrap Studio, a revolutionary tool that developers and designers use to create beautiful interfaces using the Bootstrap Framework. Learn more What is it? Bootstrap Studio is a desktop application which you can use to build beautiful interfaces and websites by only using drag & drop. It comes with a large collection of components like charts, maps, data tables, forms, menus, lists,
Ladda for Bootstrap 3 UI
Usage: Include the CSS and Javascript for Spin.js and Ladda effect: <link rel="stylesheet" href="dist/ladda-themeless.min.css"> <script src="dist/spin.min.js"></script> <script src="dist/ladda.min.js"></script> Then to produce a button with the Ladda effect: <button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button> Or using "a" tag:
Bootstrap3移行ガイド
PST（米国太平洋時間）2013/8/19にBootstrap3.0.0が正式に公開されました。これまでのBootstrap2.xから3.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap3の使い方を2.xからの変更箇所を交えて解説しています。 解説は最終版（v3.4.1）に対応しています。 ※2019/7/24をもってBootstrap3のサポートは終了したと発表がありました。 ※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。 ※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下さい。 Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークにな
5 Useful Sass Mixins in Bootstrap — SitePoint
As many of you are likely aware, Bootstrap is a powerful toolkit for front-end developers. It allows us to produce clean, responsive sites that work across multiple devices. If you are using Bootstrap for serious development there’s a good chance you are using its Less or Sass implementations. In keeping with that, below I’ll describe 5 Bootstrap mixins that I think you should try. They are built
Ruby on Rails + Bootstrap3 + simple_form チュートリアル | Oh My Enter!
Twitter Bootstrap 3がリリースされてから結構日が経ちますが、twitter-bootstrap-railsはブランチ版で、simple_formはRC版でそれぞれ対応できているようです。導入するにあたって、ちょっとハマる箇所もあったので、簡単にチュートリアルにまとめておきたいと思います。 環境 Mac OS X 10.8 Ruby 2.1 Ruby on Rails 4.1 twitter-bootstrap-rails 3.1.1 (2014/6/21時点ではbranch) simple_form 3.1.0.rc セットアップ Gemfileに必要なgemを記述します。ポイントはtwitter-bootstrap-railsとsimple_formです。各々最新安定版ではまだ対応していないので(2014/6/21現在)、以下のようにバージョン指定が必要です。 📄Ge
Bootstrap3をIE8で使う時に注意すること - Blog.おにぎりたまごうぃんなー
3からIE6が切られたのは知っていたので、IE8なんて楽勝じゃん！と思っていましたが IE8がまだいい子だという私の認識は完全に間違っていました。— スズキユキ (@s12bt) October 21, 2013 DOCTYPEをhtml5にして、jquery呼んで、bootstrapのcssとjs呼んで、動くじゃんと。Chromeでひと通り作ったあとにIEでの動作検証したら全然動かなかった。きぃぃぃ。 そして、IEが悪いわけじゃなくて、ドキュメントをちゃんと読んでなかった私が悪かったんです。。。 同じ過ちを起こさないためにメモ。 Bootstrap3のサポートブラウザは以下。 Supported browsers Specifically, we support the latest versions of the following: Chrome (Mac, Windows, iOS
bootstrap 2.3.2 から bootstrap 3.1.1 への移行 - @znz blog
Rails 3.2.17 を使っている rails アプリで bootstrap 2.3.2 から bootstrap 3.1.1 に移行している途中なのですが、 どういうところに対処が必要だったのか、 メモをまとめてみました。 Gemfile 変更 bootstrap 2 系のときは twitter-bootstrap-rails gem を使っていたのですが、 bootstrap 3 系対応がリリースされていないこともあって、 bootstrap 側から公式にリリースされている bootstrap-sass gem に移行しました。 bootstrap-sass は rails_admin gem で使われていて、 バージョンが rails_admin によって制限されてしまうので、 公式の less の gem があれば良かったのですが、 見つけられなかったので、 自分しか使っていな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free Bootstrap Admin Template - AdminLTE.IO
Honoka - 日本語も美しく表示できるBootstrapテーマ
http://vdeep.net/wp-content/uploads/2015/08/bootstrap-flatui.png
商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ
