CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
HTML Snippets for Twitter Boostrap framework : Bootsnipp.com
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="page-header"> <h1 id="timeline">Timeline</h1>
Bootstrapテンプレートを使っている人向けなモックアップツール6選 (2016/05) - Qiita
動かないモックアップ及びワイヤフレームを描く際に今までは「紙とペン」もしくはBalsamiq Mockupsを使っていましたが、「どうせなら描いたモックがHTMLになればいいのに」と欲を出して、Bootstrapテンプレートをベースにモックアップを作れるツールを探してみました。 手軽な物からリッチな物順にまとめてみています。 Bootsnipp ざっくり言うと、Bootstrapで作っているサイトのパーツ・レイアウト作る用のサービスです Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。 Form Builder, Button Builderなど、いろいろな種類のパーツビルダーからレイアウトが作れます。 また、他のユーザが作成したレイアウト(スニペット)を閲覧、HTMLやCSSを取得することが出来ます。 サービス全体のデザイン用ではな
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で最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル 以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling
Laravel 5.4で Vue.js開発環境を手軽に作る
こんにちは。宇都宮です。 最近はアシアル社内でもLaravelを使うことが増えてきました。また、フロントエンドも、ReactやVue.jsを使ったプロジェクトをちらほら見かけるようになってきました。 今回は、Laravelのインストール方法と、フロントエンド開発環境のセットアップ、簡単なVueコンポーネントの作り方を解説します。 Laravelとフロントエンド Laravelでは、5.3から、Vue.jsが標準のJavaScriptフレームワークになりました。 さらに、5.4では、フロントエンドのビルドツールが、gulpベースのElixirから、WebpackベースのMixに変わりました。 Laravelをインストールすれば、Web APIはLaravelで作って、SPA(Single Page Application)をVue.jsで組む、といったことが簡単にできるようになっています。
Selectize
Easy to use and customizeSelectize Includes default styles as well as packaged LESS and SCSS sources available for all Bootstrap versions. Smart Ranking / Multi-Property Searching & SortingWant to search an item's title <em>and</em> description? No problem. You can even override the scoring function used for sorting if you want to get crazy.
Bootstrap TouchSpin
A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys. <input id="demo1" type="text" value="55" name="demo1"> <script> $("input[name='demo1']").TouchSpin({ min: 0, max: 100, step: 0.1, decimals: 2, boostat: 5, maxboostedstep: 10, postfix: '%' }); </script> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="
— Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework
Bootbox provides three functions, alert(), confirm(), and prompt(), whose aim is to mimic their native JavaScript equivalents. Here's the simplest possible example: bootbox.alert('Hello world!'); Run example <!-- set up the modal to start hidden and fade in and out --> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <!-- dialog body --> <div class="moda
Bootstrap Slide In Menu | ENTEREAL/エンタリアル
JavaScript jQueryとBootstrapを読み込んだ後、bootstrapSlideInMenu-1.0.0.min.jsを読み込んでください。 <script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" charset="UTF-8" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> <script type="text/javascript" charset="UTF-8" src="bo
php-contact-form - 商用フリーのPHPお問い合わせフォーム
INTRO PHPによるお問い合わせフォームです。フロントエンドにBootstrap、Font Awesomeを使用しています。画面遷移なしの入力チェック、自動返信メール機能があります。商用フリー、カスタマイズ自由です。 Usage contact/pcf_lib/init.phpでHOME_URLを設定します。（13〜16行目） // *** 「myphp/github-php-contact-form/contact/」を環境に合わせて必ず変更してください！！！ // http://(またはhttps://)からホストまでを取得 $site_url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . '/'; define('HOME_URL', $site_url . 'myp
Bootstrap ベースのシンプルでカスタマイズ性の高い WordPress テーマ Habakiri が公式ディレクトリに掲載されました。
Habakiri Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。 公式サイトを見る 先日、WordPress の公式テーマディレクトリにテーマ Habakiri が掲載されました。以前掲載された Kotetsu に続き2つ目のテーマ掲載となります。 お使いの WordPress の管理画面にログインし、テーマインストール画面で「Habakiri」と検索すればすぐにインストールできます。このサイトも Habakiri を親テーマとして使っているので、だいたいの雰囲気はわかるかなと思います。 Habakiri の特徴 WordPress テーマ Habakiri には次のような特徴があります。 Boot
Bootstrap Enhancement · Dropdowns
Dropdown Menus Enhancement Enhancing functionality of dropdown menus. Overview Added the following improvements: Support sub-menus Support for radio and checkboxes Positioning of menus Bullet for menus To start using the improvements you need to include a modified dropdown-enhancement.js and dropdown-enhancement.css file. Important dropdown-enhancement.css only have enhancement rules and depends e
Redirecting to https://getdatepicker.com/
Redirecting to https://getdatepicker.com/4/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://lobianijs.com/site/lobipanel
Twitter Bootstrap jQuery Calendar component
GitHub - zabuto/calendar: This library is a jQuery plugin that lets you add a month calendar to your web page.
bootstrap-wysihtml5
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
Twitter Bootstrap jQuery Calendar component