【adminLTE】管理画面として使うときのテンプレートひな形としてまとめておく - とりあえずphpとか
はじめに bootstrap製の管理画面テンプレート。実際に使ってみたけどこれは便利 自分が仕事で使う場合は、以下ぐらいがあればとりあえずok ・画面左のメニュー ・一覧画面 ・詳細画面 ダウンロード cd ~/src/ wget https://almsaeedstudio.com/download/AdminLTE-master unzip ./AdminLTE-master cp -frp ./AdminLTE-master /Path/To/Documentroot/AdminLTE 実装 ベースとなるhtmlを準備 不要な部分の削除とcssとjsへのパスを合わせる 以下が全画面共通のhtmlで★の部分を画面ごとに実装してゆく ベースhtml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=
こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS - Qiita
人気のUI作成フレームワークBootstrap 4では手軽にレスポンシブWebデザインを実現することができます。また、定義されているスタイルを学ぶことでレスポンシブなレイアウトを作る上でのCSSの勉強にもなります。本エントリーでは入門記事の一環として、Bootstrap 4でのレスポンシブWebデザインの基本について解説しつつ、定義されているCSSコードの意味にまで踏み込みます。 Bootstrap 4のブレークポイントと区間 レスポンシブなWebコンテンツではデバイス幅によってレイアウトが変わっていくのですが、「どの画面幅でレイアウトが変わるのか」という基準になるのが「ブレークポイント」です。Bootstrap 4では4つのブレークポイント(0pxを含めると5つ)が存在し、それぞれのブレークポイントの間には名前がついています。4つのブレークポイントと5つの区間（grid tier）の名前
Bootstrap使い方メモ２（Components） - Qiita
│ sample..html │ ├─css │ bootstrap.min.css │ └─fonts glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <span class="glyphicon glyphicon-search"></sp
Bootstrapのfileアップロードフォームがダサいから装飾してみた | vdeep
こんにちは、okutani(@okutani_t)です。Bootstrapデフォルトのinput fileはなんだかダサいです。なぜもっとBootstrap感をダサなかったのか……！ ということでBootstrapっぽく変えてみました。プラグインとか何も使わないので、気軽に試せるかと思います。参考にしてください。 スポンサーリンク Bootstrapのfileフォームを装飾する まず最初にデフォルトのfileアップロードフォームを確認してみましょう。 下記HTMLコードで確認できます。 <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">● 〇〇MBまでの画像をアップロ
BootstrapをLESSで使う方法
LESSとはCSSプリプロセッサーの１つで、似たようなものにSASSがあります。CSSプリプロセッサを一言で説明すると、CSSをもっと便利に使えるようになるもの。 例えば変数を使ったり、よく書くコードをテンプレート化（Mixin）しておいたり、ネストを使ってセレクタを何度も書く手間を省いたりなどなど。簡単な使い方を以下の記事にまとめているので詳細はそちらをご覧ください。 SASSの簡単な使い方・書き方 LESSの書き方・使い方 そんなCSSプリプロセッサですが、BootstrapではLESSが使われています（SASS版もあります）。Bootstrapの主な使い方としては、フレームワークとして読み込んで、HTMLタグにclass名をつける方法だと思いますが、LESSで使うことも可能。 以下にBootstrapをLESSで記述する方法を紹介します。 Bootstrapのソースファイルをダウンロ
lessを使ってBootstrapのデザインをカスタマイズ (1/5)
最近よく見かけるシングルページを作るデザイン塾。第2回では、ページの大まかなデザインを作成し、Bootstrapを使ってナビゲーションバーを実装しました。今回はlessファイルをカスタマイズして、オリジナルのデザインに近づけていきましょう。 index.htmlの<ul class="nav navbar-nav">内のリンクを書き換えます。検索フォームやドロップダウンメニューは今回使いませんので削除してOKです。 ■変更前ソースコード（index.htmlの一部、緑色部分を変更） <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="na
Web制作時に備えておきたい便利なチートシートのまとめ -Bootstrap, WordPress, CSS3, Git, SublimeTextなど
BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシート Bootstrap 3, Foundation 5のチーシート CSSの各フレームワークの比較 WordPressのチートシート iOS, Androidのデザイン用のチートシート jQueryのチートシート HTML5, CSS3のチートシート ファビコンのチートシート 検索エンジン最適化2015年版のチートシート Chromeのデベロッパーツールのチートシート SublimeText, Emmetのチー
Webアプリをあっという間にカッコよく！ BootstrapによるレスポンシブWebレイアウト
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝 | hijiriworld Web
Posted on: 2012/06/22 レスポンシブウェブデザインに対応したCSSフレームワーク「Bootstrap」の肝 Bootstrapの概要 Bootstrap とは、Twitter 社が提供する CSS フレームワークです。 実体は CSS と JavaScript で、決められたルールに従ってコーディングするだけで、いま流行りのいろいろな UI を作ることができます。 Bootstrap では LESS を採用しており、スタイルをカスタマイズして CSS をコンパイルすることができます。 LESS についてはこちら。 実際には、コンパイルされた CSS を読み込んで利用することになるので、LESS の仕組みを意識する必要はありません。 もちろん、コンパイルされた CSS を編集することもできます。 Bootstrap をはじめて使う時は、まずは一式ダウンロードして、いろいろ
LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利
css3プロパティ 準備ができたところで早速使ってみましょう。 最初はCSS3で追加された「border-radius」で角丸にしてみます。 たとえば「id="box1"」でマークアップした「div」があります。 html <div id="box1"></div> 通常のcssでしたら次のようになりますよね。 css #box1 { width: 200px; height: 200px; background: #999; /* 角丸 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Bootstrapのmixins.lessをインポートすれば次のように記述することができます。 less @import "mixins.less"; #box1 { width: 200px; he
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はじめに | Bootstrap 非公式日本語版@wivern.com
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP