Bootstrap

このタグでブログを書く

言葉の解説

ネットで話題

Bootstrap

(ウェブ)

【ぶーとすとらっぷ】

ウェブサイトやWebアプリケーションを作成のための、フロントエンドのフレームワークを提供するオープンソースプロジェクト。Twitter社にて開発。

概要

バニラ状態のCSSに加えてLessとSassをサポート。スマートフォンからデスクトップまで1つのフレームワークで対応できる。また100種類以上のフラットデザインに特化したソフトウェアツール集を活用できる。

例：Redirecting…

略歴

2010年、Twitter社にてMark OttoとJacob Thorntonにより作成され、「Twitter Blueprint」として知られていた。2011年8月19日に一般公開。2012年9月末までに両者がTwitterを退社したため、独立したプロジェクトとなり「Twitter Bootstrap」から現在の名称になった*1。

2014年3月現在の最新バージョンは「v3.1.1.」。

ウェブサイト

Bootstrap · The most popular HTML, CSS, and JS library in the world.（公式トップ）
Redirecting…（CSSレファレンス）
Redirecting…（コンポーネントレファレンス）
Redirecting…（JavaScriptリファレンス）

ダウンロード

Redirecting…

ダウンロードコンテンツ

コンパイル済み

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

ソースコード

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

対応ブラウザ

	Chrome	Firefox	IE	Opera	Safari
Android	○	×	N/A	×	N/A
iOS	○	N/A	N/A	×	○
Mac OS X	○	○	N/A	○	○
Windows	○	○	○	○	×

*1:Redirecting…

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

fanta_orange_grapeの（日記というより）記事のつもり•5ヶ月前

【英語】Geminiに、「bootstrap」の意味を表現するイラストを描いてもらった

悪くない依頼したのは、 "英単語の「bootstrap」の意味を説明する、フラットで楽しくファンタジーでシンプルな感じのイラストを作成して。" ちょっと、語源は複雑な感じなので、別途、調べよう。

#英語

ネットで話題

2233ブックマーク Components · Twitter Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2

getbootstrap.com

1508ブックマークうわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。

medium.com

1136ブックマークとほほのBootstrap 3入門 - とほほのWWW入門とほほのBootstrap 3入門トップ Bootstrap 3入門はじめにこのページは「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap とは Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript...

www.tohoho-web.com

1036ブックマーク Flat UI - Free Bootstrap Framework and Theme Checkboxes Unchecked Checked Disabled unchecked Disabled checked Radio Buttons Radio is off Radio is on Disabled radio is off Disabled radio is on

designmodo.github.io

1030ブックマーク Bootstrapの使い方超入門 (1/4) - ＠IT

atmarkit.itmedia.co.jp

947ブックマークこれからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸

replication.hatenablog.com

914ブックマーク Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイトをリリースしました

blog.inouetakuya.info

863ブックマーク Twitter BootstrapでさくさくWeb開発 : アシアルブログ

blog.asial.co.jp

859ブックマーク Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ

blog.ku-suke.jp

関連ブログ

もふもふ技術部•1年前

Rails7 に Bootstrap を導入する

以前Rails7でTailwind CSSの導入をしましたが、今回はBootstrapを導入してみます。 esbuildを使用します。プロジェクト作成時に導入する場合 1. rails new mofmof -j esbuild --css bootstrap でプロジェクトを作成する 2. 以下を package.json に追加する "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/ass…

#Rails#esbuild#Bootstrap

備忘録 as vet.•2年前

Rで柔軟にロジスティック回帰（MLE,lasso, ridge)のBias-corrected estimationを行う関数を自作してみた

Rで予測モデルの内的妥当性検証を行うためのパッケージはいくつか有るが、自分がほしい解析を一括で扱ってくれるいい感じのパッケージがなくて困っていた。特に、c-statistics, calibration slope, calibration interceptのbias-corrected estimationを最尤推定法だけでなくshrinkage estimation (lasso, ridge)で評価できるパッケージは存在しない。そこで、既存のパッケージと組み合わせていい感じのBias-corredted estimatonをしてくれる関数を自作してみた。使用したパッケージは pa…

#R#予測モデル#臨床予測モデル#内的妥当性検証#Bootstrap

普通のシステムエンジニアの備忘録•2年前

【トレーニング】Bootstrap5を使いこなす

FlaskでCRUDや認証まわりがチョットできるようになった。といってもサンプルのコピペだけどね。で、Geminiとの連携やOpenCV使っての画像連携をやろうと思ってた。しかし、あまりにも画面が寂しい・・・。少しはオシャレな画面じゃないと、いかにも業務アプリっぽい。 AS400みたいな黒と緑文字の画面ほどでは無いにしろ、気分が乗らないアプリ作っても、つまらないのでBootstrapを学んで、おしゃれさん画面を作れるようにすることを、次の目標にする。まずはFlaskで作ったサンプルアプリをベースに化粧してみる。

#Bootstrap#Flask#エンジニア

備忘録 as vet.•2年前

Rで予測モデルの性能評価(Cross ValidationとBootstrapの比較)

予測モデルの性能を評価するときは、データの過学習(Overfitting）を考慮する必要がある。モデル構築で使用したデータに過剰に最適化され、新規データの予測性能が低下する問題が生じるため。過学習は予測性能を過剰に見積もるバイアスの原因なので、さまざまな方法で過学習の程度を評価し、バイアスを補正した形で予測性能を見る必要がある。その方法として代表的にはCross Validation(CV)とBootstrapがある。 CV CVでは、まずデータをモデル構築用のデータと、性能検証用のデータに分割する。モデル構築用データを元に作成した予測モデルを使い、モデル構築には使用しなかった性能検証…

#R#Bootstrap#予測モデル

ITエンジニアぽむのブログ•2年前

【入門者必見】Vue.jsがこんなに便利だったとは！？

いつもブログへご訪問いただきありがとうございます。「【入門者必見】Vue.jsがこんなに便利だったとは！？」について WordPressの記事を書きました。ご興味のある方は下記リンクまで是非アクセスください！ iteng-pom.com

#Vue.js#Options API#Bootstrap#サンプルコード

ダッシュで奪取•2年前

【CSS】Bootstrapでテーブルの列幅を指定したい

環境 [email protected] やりたいこと自分で列幅を指定したいやったこと th 要素に style="width: xx%" を設定する <table class="table table-bordered"> <thead> <tr> <th scope="col">No.</th> <th scope="col">なまえ</th> <th scope="col">ぶんるい</th> <th scope="col" style="width: 5%">HP</th> <th scope="col" style="width: 5%">こうげき</th> <th scope="c…

#CSS#Bootstrap

学生向けプログラミング入門 | 無料•2年前

Ruby on Rails | Youtubeの動画埋め込み

↓↓クリックして頂けると励みになります。ランキング参加中プログラミング Ruby on RailsのビューにYouTubeの動画を埋め込むには、まずフィールドに共有URLのコードを保存する必要があります。コントローラの記述です。 private def set_report @report = Report.find(params[:id]) end ビューに入力用フォームを作成します。 <div class="container"> <div class="mb-4 mt-4 mr-4"> <label for="exampleFormControlInput1" class="form-…

#Ruby on Rails#YouTube動画埋め込み#Bootstrap

学生向けプログラミング入門 | 無料•2年前

Ruby on Rails | deviceの活用

↓↓クリックして頂けると励みになります。ランキング参加中プログラミング Ruby on Railsでログインを実装する時、「device」を活用すると素早く実装することができます。 deviseはユーザーの登録、ログイン、ログアウト、パスワードリセットなどの認証機能があり、Gメールの設定をすることで、セキュリティが向上します。バージョン4.8をGemFileに記述します。 Rails7.0を使用するときはバージョン4.9にしてください。 gem 'devise', '~> 4.8', '>= 4.8.1' バンドルします。コマンド bundle デバイスをインストールします。コマンド r…

#Ruby on Rails#device#Bootstrap

学生向けプログラミング入門 | 無料•2年前

Bootstrap | ナビゲーションバーの活用

Ruby on Rails6でBootstrap5.3を使ってみます。まずはyarnでBootstrap5.3.2をインストールします。コマンド yarn add [email protected] popper.jsをインストールします。コマンド yarn add @popperjs/core 「package.json」ファイルを確認します。 { "name": "AmateurReportWorld", "private": true, "dependencies": { "@popperjs/core": "^2.11.8", "@rails/actioncable": "^6.0.…

#Bootstrap#ナビゲーションバー