JQueriy スムーススクロールと Bootstrap との共存
JQuery でページ内リンクなどの場面でスムーススクロールを実現しようとする場合は、一般的には以下のようなコードを書きます。 $(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); しかし、冒頭の a[href^=”#”] のクリックイベントが、Bootstrap での一部書式とバッティングして
よくあるページトップへボタンからbootstrapのtabを無効化されたお話
先日bootstrapのtabを実装していたのですが、tab部分がまったく動かなくなるバグに直面しました。 調べてみるとこの画面の右下にもある「ページトップへボタン」の挙動が原因であることがわかりました。 いざ直面すると結構厄介な罠だったので、備忘の意味も含めて文書に残しておきます。 bootstrapのtabってなあに？ ↓↓bootstrapのtabはこんなかんじの画面の要素です。↓↓ ※この例では、例えば9月分のタブをクリックすると9月分のデータが下の方に表示されるようなイメージです。 各タブのナビゲーション部分にはアンカー1)aタグでhref=”#hoge”のように設定するブツが設定されています。 ナビゲーション部分をクリックすると、アンカーとして設定されている要素をタブの中身として表示するような作りになっています。 この表示を切り替える処理は、bootstrapのtab.jsにて
Bootstrap3で印刷時にレイアウトが崩れる対策
入れてみましたが特に変化は無く…さらに調べてみると作り方によってはそのままでは駄目らしい。 ちなみに適用するときは、 .col-sm-1, .col-sm-2 の部分を適宜 .col-md-1, .col-md-2, というふうに自分が使ってるクラスに合わせる必要あり。 つまり、足りていなかったわけか・・。 というか、よくよく見れば公開されているcssは “small” layout って書いてありますね。 なので全部入りfix cssを作りました。 @media print { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-l
BootStrapに標準装備されてるのについつい再実装しがちな機能とかまとめ。 - NOT SO BAD
(photo credit: Nathan O'Nions via photopin cc) 最近あらためてBootstrapにはまってます。 Bootstrapでサイト作ってる時に標準の機能を知らんくて わざわざ同じ機能を自分でcss書いたりしてることが多かったので、 よく再実装しがちな機能をまとめメモ。 3.0でフラットデザインになって、いわゆるbootstrap臭もだいぶ薄れた気がするけどどうなんやろ。。 3.0つかったサイトが増えたらまた臭ってきそうな気もするけど。 ドキュメント 知らずに再実装しちゃう系の便利機能はCSSのHelper Classesとかに多い。 ので最初にひととおりドキュメント見とくのはいいですね。 当たり前やろって話やけど。。 Bootstrap「Helper Classes」 text-align 単純に中央揃えとか左揃えとかだけを指定するために
Bootstrap 3 responsive columns of same height · Minimit
Vertical alignment on Bootstrap 3 columns with equal heightThe Solution The MarkupYou have to add the classes .container-xs-height and .row-xs-height to the container and the row, and also add .col-xs-height to the columns. <div class="container container-xs-height"> <div class="row row-xs-height"> <div class="col-xs-6 col-xs-height"></div> <div class="col-xs-3 col-xs-height col-top"></div> <div c
ラクするWeb制作「CSSフレームワークなにソレ？」な初心者へおすすめ7個
注：今回の記事は初心者向け、Web制作を効率化＆スピードアップしてくれる「便利なHTML／CSSフレームワーク」の紹介です。 CSSフレームワークとは？ 2021年のおすすめCSSフレームワーク7個 CSSフレームワークの選び方 上の3点をお伝えしていきます。 それなのに、なぜ、カレーの画像で始まるの？ その理由は、「CSSフレームワークって何？」を知ると理解できます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 💬 𝕏（twitter）はよくフリーランスの人たちにフォローされてるようです。 Follow @websae2012 CSSフレームワークって何？ CSSフレームワークは、言い方を変
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flat UI - Free Bootstrap Framework and Theme
Bs3 Document