CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
I am trying to decrease bootstrap 3.0 navbar height which is used with fixed top behavior. Here i am using code. HTML <div class="tnav"> <div class="navbar navbar-fixed-top" role="banner"> <div class="navbar-inner-sm"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggl
こんにちは! @taro_tnk です! ここらで twitter bootstarp の勉強しつつ、 自分のメモとして残しておくよ! 必要なファイルを落としてくる まずは必要なファイルを落とさないことには始まらないので、 以下のサイトから bootstrap と jquery を落としてくるよ。 ・TwitterBoostrap http://twitter.github.com/bootstrap/ ・ jQuery http://jquery.com/ 基本 こちらの公式サイトを見ながら勉強していくよ! まずは以下のような html ファイルを準備します。 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.mi
I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!--
3.基本レイアウト グリッド・システム Twitter Bootstrap が提供するレイアウトには、グリッド・システムが採用されています。 横幅 940px の領域を 12 カラムに分割して、最大 12 カラムで好きなカラム数の組合せでレイアウトします。 カラム数の合計が 12 にさえなっていれば、どんなカラム数の組合せも可能です。 カラムとカラムの間をあけること(オフセット)もできますし、カラム構造をネストさせることもできます。 ちなみに当サイトは、 ・トップページが、ページの最上部に 12 カラムで、その下に 4 カラムを3つというレイアウト ・今、ご覧になっているこのページは、8 カラムと 4 カラムというレイアウト ・オフセットとネストなし になっています。 グリッドレイアウトの実装 では実際に、このグリッドレイアウトを実装してみます。 ページの先頭に 12
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる!Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.3 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ!」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
トレンディ且つナウい Web ページを構築するための CSS フレームワーク(※枠組み)です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という2つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
Bootstrap のモーダル機能ベースの「Bootstrap Lightbox」は、画像をクリックしてオーバーレイで拡大表示させるシンプルなLightbox 系プラグインです。 Colorbox や Fancybox のようにあれもこれも出来るという訳ではなさそうですが、今後使う可能性もあるので簡単に設置方法をまとめました。 Bootstrap Lightbox のダウンロード 以下のページから Bootstrap Lightbox のファイルをダウンロードします。 各ファイルを、<head> 内か </body> の直前に設置します。 <link rel="stylesheet" href="./bootstrap.css"> <link rel="stylesheet" href="./bootstrap-lightbox.css"> <script src="./jquery.mi
Twitter謹製CSSフレームワーク『Bootstrap』を使って固定ナビゲーションを作ってみます。 簡単なカスタマイズのメモです。 Bootstrap, from Twitterとは? Twitter(ツイッター)社が提供しているBootstrap(ブートストラップ)はCSSのフレームワークです。 CSSを読み込むだけで簡単に使えます。 使い方はdiv要素などにclassを指定するだけです。 Bootstrap, from Twitter グローバルナビゲーションを固定にする ページの上部にあるナビゲーションを固定ナビゲーションにします。 スクロールしても同じ場所にあり続けます。 常にページ内の同じ位置にあり続けますのですぐにアクセスできます。 1.基本 body 要素のすぐ下に次のようにコードを書きます。 <body> <div class="navber navbar-fixed-
Customizing Bootstrap the easy way. Made for Bootstrap lovers. Version 1.0.0 What to expect Color picker to conveniently chose and preview colors. See realtime preview as you customize each variable. Extra variables which are not there in the official customization page. What to expect in future Exhaustive coverage of all customizable variables available. Save your customizations. Share your custo
フレームワーク&API 5-01 Twitter Bootstrapを使ったサイト構築の流れ(前編) レスポンシブWebデザインとグリッドレイアウト、そしてメディアクエリに対応したCSSフレームワークであるTwitter Bootstrapについて、CSSメタ言語のLESSとともに解説する。 制作・文/酒井能克(有限会社ブルームーン) BROWSER IE…7over Firefox…3.6over Safari…3.1over Chrome…10over Twitter Bootstrap とは Twitter Bootstrapとは、CSSフレームワークの一つだ。Webサイトを見てTwitterと似たデザインを見かけたら、Twitter Bootstrap が使われていると考えていい。また、Apache License v2.0 というオープンソースのライセンスなので、誰でも自由に使う
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く