Bootstrap3 フッターをページの下部に固定する方法（スティッキーフッター） - tkymtk's blog
2014/07/11: 最後に追記しました。 ことはじめ Bootstrap3でfooterのCSSを設定したかったので、調べたら Sticky footer という方法があった。 しかし、Stackoverflowや既存のサイトを見ると、どうもおかしい。 そこで、Bootstrap3の公式サイトからちゃんとコードを取ってきた。 CSS /* フッターを下部へ固定 -------------------------------------------------- */ html, body { height: 100%; /* html と body 要素はパディングやマージンを持てません。*/ } /* フッターを下部へ押しやるための、コンテンツのラッパー */ #wrap { min-height: 100%; height: auto; /* フッターの高さ分だけ、ネガティブインデ
Thymeleaf 3.0を使用した入力フォームのサンプル - Qiita
概要 2015年に投稿したThymeleafを使用した入力フォームのサンプルコードという記事の改定版です。 Spring Bootが標準サポートするテンプレートエンジンのThymeleafを使用した入力フォームのサンプルコードになります。 ソースコードはrubytomato/demo-bootstrap4-thymeleaf-spring2にあります。 環境 Windows 10 professional Java 1.8.0_162 Thymeleaf 3.0.9 Spring Boot 2.0.1 Bootstrap 4.1 参考 Tutorial: Using Thymeleaf Tutorial: Thymeleaf + Spring Thymeleaf - GitHub Introduction Bootstrap Components Utilities サンプルコード 入力画
Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順） アクセシビリティ （英: Accessibility） Accessibility Plu
開坑1200年、国の重要文化的景観である兵庫県生野銀山が面白い【前編】。 | ホームページ制作 大阪【インフォメーションメディアデザイン株式会社】
【Adobe XD】ホバーアニメーションの応用編～パララックス風の動きを再現してみよう～ 前回の記事では、Adobe XDの「ホバーステート機能」を使った画像のホバーアニメーションの作り方をご紹介しました。今回の記事では、･･･ View More
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
jQuery UI と BootstrapのTooltipの競合を回避して共存させて両方使う - Qiita
よく使いそうで忘れそうなので個人メモ。 タイトルの通り。jQueryUIとBootstrapのTooltip関数は名前が同じなので競合する。実際の動作は対象へのホバーでツールチップが表示される、というもので、使い方は同じだけれど、その設定や挙動は結構違う。 Bootstrapはhtml要素自体にパラメータを設定したりできるのでjsファイルを用意する必要がなかったりして、その分では便利だけれど、ajaxでデータを持ってきて表示させたりする時に不便。htmlコードも扱えるけれど、複雑なコードを書こうとすると面倒くさい。title=''に基本全部書き込む必要があるので、例えば、 これはあからさまだけれど、画像のsrcが表に出てきちゃう。divとかリスト要素のネストとかを複雑に入れ込もうとすると、その中の"'に全部気を配るのは大変だし、非生産的このうえないわけで。 もちろん、BootstrapのT
Bootstrap 4でDatetimePickerを使いたい
はじめに Delphi + ActiveXで作られた既存Webアプリケーションの仕様違い版を新規作成することになり、この際なので、ASP.NET + Bootstrap 4 で作成することにしました。 表入力形式や一覧表示にはスプレッドシートの「Handsontable」を使うとして、カレンダー入力は当初「Pikaday.js」を考えていましたが、画面設計に時間入力があり「DatetimePicker.js」ならカレンダー入力と時間入力の2つの機能を満たせるため、こちらに変更しました。 時間入力は、既存Webアプリケーションを踏襲した古い画面デザインで時間コンボボックスと分コンボボックスで入力する設計になっていたため、DatetimePickerの時間入力を使った今風なWebデザインに変更することにしました。 【2021/05/12追記】 2021年5月6日にBootstrap 5が正式リ
Honoka
Primary Secondary Success Info Warning Danger Link Primary Secondary Success Info Warning Danger Link Primary Secondary Success Info Warning Danger
Bootstrap Studio - The Revolutionary Web Design Tool
A powerful desktop app for creating responsive websites using the Bootstrap framework. Run Browser Demo Bootstrap Studio is a powerful desktop app for designing and prototyping websites. It comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. The app is built on top of the hugely popular Bootstrap framework, and exports clean and semantic
lessがわからない人のBootstrap簡単カスタマイズ方法 - Qiita
はじめに デザインに手をかけず、とりあえずアプリを動かすためにBootstrapを使っています。 デフォルトのまま使えるかと思ったら、やっぱりちょこちょこ調整したくなったのでメモ。 2つのやり方 場合によって次のやり方を使い分けています。使い分けは後述します。 CSSを上書きする カスタマイズ用のcssファイルを作ってbootstrapのCSSより後から読み込みます。 <!-- Bootstrap --> <link href="/xxx/public/bootstrap-3.0.3-dist/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- カスタマイズ用CSS --> <link rel="stylesheet" media="screen" href="/xxx/public/stylesheets/bootstrap-custom
Customize and download · Bootstrap
Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version. Requires IE9+ or latest Safari, Chrome, or Firefox. Have an existing configuration? Upload your config.json to import it. Upload Don't have one? That's okay—just start customizing the fields below. Toggle all Less files Choose which Less files to compile into your custom build of Bootstrap. Not sure
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap · 世界で最も人気のあるフロントエンドのコンポーネントライブラリ
GitHub - bassjobsen/Bootstrap-3-Typeahead: The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4
bootstrap-ie8
GitHub - Serhioromano/bootstrap-calendar: Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.
Twitter Bootstrap jQuery Calendar component
Honoka - 日本語も美しく表示できるBootstrapテーマ
Honoka - 日本語も美しく表示できるBootstrapテーマ
Free Bootstrap Admin Template - AdminLTE.IO
HTML Snippets for Twitter Boostrap framework : Bootsnipp.com