TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Bootstrap 3 Tips and Tricks

207 点作者 scotchio大约 11 年前

15 条评论

nkozyra大约 11 年前
I have a hard time qualifying most of these as &quot;tricks,&quot; which would imply some hidden or barely-utilized feature.<p>Most of these are quite explicitly described in the documentation (img-responsive, nested columns, responsive grids, container-fluid are all very upfront in the documentation).<p>And on a UX note, I cannot see any advantage to the animated, slightly expanding prettyprint code boxes. I don&#x27;t think this is a valuable piece of UI.
评论 #7715674 未加载
评论 #7715572 未加载
评论 #7715798 未加载
评论 #7715677 未加载
评论 #7716768 未加载
duncans大约 11 年前
&quot;hover dropdowns&quot; - Nope.<p><a href="http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/" rel="nofollow">http:&#x2F;&#x2F;uxmovement.com&#x2F;navigation&#x2F;why-hover-menus-do-users-mo...</a>
MBCook大约 11 年前
Went to the site on my iPhone, started reading, then got pushed into the iTunes Store to a free slot app by some scummy ad.<p>Closed page. Didn&#x27;t read.
评论 #7717159 未加载
subpixel大约 11 年前
May I politely suggest that the twirling-on-scroll social icons are a bit over the top? All that motion makes them something I instinctively want to avoid.
评论 #7716779 未加载
noir_lord大约 11 年前
I like the tips but nosying around the rest of the site some of your other content is absolutely lovely.<p>The chrome all-stars series is absolutely fantastic, I&#x27;m primarily a Firefox user (I&#x27;ve always preferred Firebug to Chrome Dev Tools) but I&#x27;m starting to realise that in a lot of ways chromes dev tools are much <i>deeper</i> than firebugs.<p>Cheers :).
评论 #7715661 未加载
err4nt大约 11 年前
Heres an actual Bootstrap trick: Display placeholder text as tooltip content for focused, non-empty form inputs.<p>Have you ever entered information into a form that used placeholder text to tell you what to write, and you already started typing so that text disappeared but forget what you&#x27;re supposed to be writing? The only way to view that placeholder text is by clearing the input field, right? Well if you have Bootstrap included already we can do some magic!<p><pre><code> &#x2F;&#x2F; Display placeholder=&quot;&quot; text as tooltip for :focused, non-empty inputs $(&#x27;form input&#x27;).blur(function() { var inputVal = $(this).val(), titleText = $(this).attr(&#x27;placeholder&#x27;); if ( inputVal != &#x27;&#x27; ) { $(this).tooltip({ title: titleText, trigger: &#x27;focus&#x27;, container: &#x27;form&#x27; }); } });</code></pre>
psteinweber大约 11 年前
Opened link, learned about .container-fluid within the first 30 seconds, life: changed. Thanks, very useful stuff!
genofon大约 11 年前
cached: <a href="http://webcache.googleusercontent.com/search?q=cache%3Ascotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&amp;oq=cache%3Ascotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&amp;aqs=chrome..69i57j69i58j69i60.2600j0j7&amp;sourceid=chrome&amp;es_sm=93&amp;ie=UTF-8" rel="nofollow">http:&#x2F;&#x2F;webcache.googleusercontent.com&#x2F;search?q=cache%3Ascotc...</a>
marcosdumay大约 11 年前
&gt; It will stack like this on large devices (desktop):<p>&gt; And it will stack like this on small devices (tablets&#x2F;phones, 768px and below):<p>Isn&#x27;t that the default behaviour of inline HTML elements?<p>Honestly, most of the time I don&#x27;t know what I gain by using Bootstrap, and would be very pleased if they distributted a Bootstrap-lite that only changed the default presentation of elements without all those containers, effects, and optional styles.
评论 #7716257 未加载
arb99大约 11 年前
site is down for me, but mirror here <a href="http://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A%2F%2Fscotch.io%2Fbar-talk%2Fbootstrap-3-tips-and-tricks-you-might-not-know&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:en-US:official&amp;client=firefox-a&amp;channel=sb" rel="nofollow">http:&#x2F;&#x2F;webcache.googleusercontent.com&#x2F;search?q=cache%3Ahttp%...</a>
评论 #7715520 未加载
trumbitta2大约 11 年前
Shameless plug: <a href="http://www.williamghelfi.com/bootstrap-in-practice" rel="nofollow">http:&#x2F;&#x2F;www.williamghelfi.com&#x2F;bootstrap-in-practice</a><p>But I&#x27;m linking it only because in that page I offer my own tips and tricks via an email mini-course.<p><i>Beginners</i> have found it useful.
sologoub大约 11 年前
Cool write-up!<p>One thing though, the hover menu doesn&#x27;t really work with my Nexus 7, as it sends me straight to reddit. Hover in general assumes a mouse and doesn&#x27;t work on mobile, which I&#x27;m guessing is why it was not included out of the box.
wnevets大约 11 年前
Where are the tricks? Most of them are lifted from the docs.
elsherbini大约 11 年前
17 upvotes, and I&#x27;ve seen 4 come in while the site was down.
评论 #7715563 未加载
评论 #7716344 未加载
azoapes大约 11 年前
Aaaaaaaand it&#x27;s down.