Bootstrap で横並びラジオボタンを作ってその値を JavaScript から取得する方法 - tmlife
地味にこれやってる良い感じの情報がなかったので メモがてら作ってみました . デモ こちらデモになります. ラジオボタンが表示され押すとそれに対応した文字列がコンソールに表示されるのがわかると思います. [runstant] ソースコード html ラジオボタンを構成する部分です <div id='mode' class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" autocomplete="off" value="left"> Left </label> <label class="btn btn-primary"> <input type="radio" autocomplete="off" value="middle"> Middle </
Webアプリをあっという間にカッコよく！ BootstrapによるレスポンシブWebレイアウト
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
ClockPicker - 時間入力を簡単にするBootstrapライブラリ
Bootstrapの良いところとして、十分に普及したこともあって色々な人たちがUIコンポーネントを作成しているというのがあります。標準で提供されるHTMLコンポーネントだけでなく、よりリッチな入力インタフェースが実現できます。 ということで今回はClockPickerの紹介です。カレンダー指定によって日付入力は分かりやすくなりましたが、ClockPickerによってさらに時間入力を分かりやすくできます。 ClockPickerの使い方 ClockPickerは日付同様に専用のフォーマットである時刻入力を数字を入力することなく簡単にできるようにします。細かな時間入力には向かないかも知れませんが、スケジュールなど5分単位の入力の場合は便利そうです。PCはもちろん、スマートフォンで活躍しそうです。コールバックなども備えていますのでシステムとの連携も容易です。 ClockPickerはHTML5/
Web開発のためのツール集の最新版「Bootstrap 3.3.0」リリース、「Bootstrap 4」も近日登場
前バージョンリリース以降に受けた、28のコントリビューターからの700を超えるコミットを元に、「Bootstrap 3.3.0」では、全般的なバグフィックスや、アクセシビリティの向上、ドキュメントの更新などを行っている。 おもな変更点は以下の通り より簡単なカスタマイズを可能にする変数の追加 わずかな変更の際のプログレスバー表示を削除 すべてのtranslate3dインスタンスの削除（パフォーマンスは向上したものの、クロスブラウザでのバグを含んでいるため） 近年のブラウザがサポートしているカルーセル表示のパフォーマンスを向上するtransformの追加 Normalize.cssとH5BPを最新のものに更新 ナビゲーションやパネル、ツールチップ、ボタンなどのアクセシビリティを向上 JavaScriptとドキュメントにおける不具合の解消 「Bootstrap 3.3.0」のリリースにともない
『パーフェクト Ruby on Rails』を読んだ - きにきじ
『パーフェクト Ruby on Rails』（すがわらまさのり, 前島真一, 近藤宇智朗, 橋立友宏）を読みました。「Rails 開発に慣れてきたかな」くらいの人にちょうどいい内容だったと思います。それくらいレベルの人が少し上を目指したり、より Rails らしい設計や開発の仕方を学んだりするのにいい書籍だと思いました。Ruby 2 や Rails 4 向けの説明になっているので、新しめの情報を得たいような場合にもお薦めです。逆に、最新の Ruby や Rails でバリバリ開発しているような人には既知のことばかりで物足りないんじゃないかなという印象です。 全体的に興味はあったのですが、購入の決め手となったのは第9章「より実践的なモデルの使い方」です。どう設計するか、どうリファクタリングするかの1つの指針として読んでみたいと思いました。実際に読んだ感想としては、学びも多く、読んでよかったと
Bootstrap/BootswatchをRails 4.1に導入！
もはやエンジニアがWebサービスを立ち上げる時になくてはならない、『Twitter Bootstrap』や、そのBootstrapのテーマ『Bootswatch』。僕もほぼ欠かさず使っています。 今回は以前書いた情報がちょっと古くなっていたので、忘備録を兼ねて書き直しです。 🎂 (1) Bootstrap CDNを使う方法これが一番簡単です。基本的には、『Bootstrap CDN』に書いてあるコードをheaderに貼り付けるだけです。バージョンアップとともにURLが変わるので、最新は本家のサイトからコピーしてきてください。 一応イメージが湧くようにコードを書いておきます。Bootstrap/Bootswatch/Font-Awesomeを使えるようにします。app/view/layouts/application.hamlの場合はこちら。 %link{:href=>"//netdna.
Ruby on RailsにてBootstrap3のサンプルページを作成する | DevelopersIO
はじめに サンプルアプリ等を作成する際、デザインに悩むことは多いかと思います。 (特にデザインセンスに乏しい私のようなプログラマは・・・) このような時に、Bootstrapは強い味方となります。(今更感は強いですが・・・) またBootstrapにはデザインのサンプルが用意されているので、このサンプルをベースとしてアプリを作っていけばデザインについて悩むことを減らすことができそうです。 今回はRuby on Rails 4 にBootstrap3を適用し、サンプルにある「Starter template」と同じページを作る 手順について纏めてみたいと思います。 作業手順 以下に、今回の作業手順を書いていきます。 1.ページ作成 まずはRuby on Railsにて、今回表示するページを作成します。 コントローラ、ビューの作成 今回表示する画面のコントローラは「welcome」、ビューは「
「その便利そうなやつ、何使ってるんですか？」的ツール百選 (のうち10個くらい) DIST#4 LT発表資料 - Qiita
DIST.4 「Life is Short」 のLT発表資料です。 紹介するツール一覧 (基本、Macです) デザイナー、ディレクター、エンジニア問わず、誰でも使えるやつ エンジニアむけ いちおう下記、分類してますが、紹介する順番はいい感じのやつ順です。 誰でも使えるやつ Alfred : ランチャー Kiritori : 画像付箋化 ClipMenu : クリップボード拡張 Skypeログ整形ツール Table→マークダウン MacでWindow切り替え(⌘+F1) Fluid (Mac) : Webサイトをアプリ化 Push Bullet : なんでもpush通知 エンジニアむけ CodeRunner (Mac) : なんでもコード走らせる Google Apps Script : GoogleスプレッドシートとかでJS Edge Inspect : スマホ画面同期 JenkinsをC
New GitHub Issues functionality for smarter searching, filtering and managing
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
Bootstrap 3 学習ノート - Qiita
(2014-06-09 ... 18) Bootstrap 3の学習記録ノートです。 できるだけ手を抜かず隅々まできちんと調査し、コードはほぼ全て実際に試して確認しました。 元々公開を意図したものではありませんが、ここまで詳細に調べた資料はそうはないと思いますので最低限の体裁を整えて公開します。みなさんのお役に立てば幸いです。 なおHTML部分はほぼ全てjadeで記述しています。jadeを知らないと理解できないノートになってしまっていますが、生のHTMLではとてもこのスピードでは学習できません。どうかご了承下さい。 なお「ここは違うのでは」「こうした方がよいのでは」などという点がありましたらGitHubのissuesかpull requestなどでお教え頂けるとありがたいです(6/19記)。 (Qiita用に追加) Qiitaコメントでのご指摘も歓迎します。 その後しばらくしてバージョンが
simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その１） | Oh My Enter!
エンジニアであれば、みな自分流の開発流儀をお持ちだと思います。PHPでWebアプリを開発する際はこのフレームワークを使うだとか、Railsアプリの場合はこのgemを使用するだとか・・・。私がRailsアプリを作成する際の鉄板といえば、simple_form＋twiter bootstrapを使用することです。simple_formは、入力フォームを簡単に作成するお手伝いをしてくれるView用のgem、twitter bootstrapは（説明するまでもないかもしれませんが）Twitterが公開しているcssフレームワークです。デザインが苦手なエンジニアにでも、それなりに見栄えの良い画面が簡単に作れるので、非常に重宝しています。 simple_form: https://github.com/plataformatec/simple_form twitter bootstrap: http:
iOSのON/OFFボタンなスイッチがBootstrapで作れる「Bootstrap switch」:phpspot開発日誌
Bootstrap switch - by Mattia Larentis and Peter Stein iOSのON/OFFボタンなスイッチがBootstrapで作れる「Bootstrap switch」 次のような美しいスイッチがBootstrapなサイトで実装できます またひとつ、Bootstrapを使う理由が増えました。 関連エントリ Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapベースのフラットUI実装フレームワーク「Furatto」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Twitter BootStra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブートストラップスターターテンプレート
bootstrapgeek.biz
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
Bootstrapで文字や表などをカッコよく表示しよう
mgzl.jp
How to Build a Functional Login Form with PHP + Twitter Bootstrap
PHPとBOOTSTRAPでレスポンシブデザインな掲示板を作ってみた。 | TipsBox
新着記事
