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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

158 点作者 eflowers将近 11 年前

20 条评论

lowmagnet将近 11 年前
Offset appears to be &#x27;sticky&#x27; in that sm-offset-0 is possible by dragging the left most cell offset bar to the right then drag the whole thing left.<p>Really nice visualization; I&#x27;ll use this if anyone needs an explanation&#x2F;sandbox on my team!
评论 #8044819 未加载
评论 #8044759 未加载
radicality将近 11 年前
This is great! I can&#x27;t figure out how to nest containers though, is this supported?
评论 #8043817 未加载
评论 #8043768 未加载
评论 #8043899 未加载
评论 #8043820 未加载
评论 #8043776 未加载
评论 #8043795 未加载
lominming将近 11 年前
Really nicely done. I do not really see it in my workflow much because typing is faster than dragging around for me now and I am pretty familiar with grid concepts, but this will be very useful to explain the concepts to people. Very impressed with the dragging and snapping.<p>Suggestions: There are some bugs. Sometimes I cannot drag to create an offset, sometimes I can. Also, sometimes I can only resize the col from the right. Would be nice to support containers (fluid and non-fluid) and we can better visualize how it impact the behavior in relation to the width of the device. Also, I think you can easily support Zurb Foundation grid too.
eflowers将近 11 年前
For anyone still reading - I fixed the save&#x2F;preview feature, its really cool.<p>Example: <a href="http://shoelace.io/#2aed04bc819c4c7da28a" rel="nofollow">http:&#x2F;&#x2F;shoelace.io&#x2F;#2aed04bc819c4c7da28a</a>
ohitsdom将近 11 年前
I had this exact idea (but didn&#x27;t think I had the skill to pull it off), how cool for people afraid of code. Well done!
coderzach将近 11 年前
This is great! It&#x27;s always so hard to explain how bootstrap css and html work to non-technical people.
S4M将近 11 年前
This is pretty awesome!<p>One suggestion: would it be possible to add old browsers as well? I am working on an app that doesn&#x27;t render well on older versions of Firefox. I&#x27;ll use Shoelace all the time for the front end part if I can use it to spot rendering problems with all kind of browsers.
tianshuo将近 11 年前
The site is broken for China, since the prettify js code is hosted on Google Code.
评论 #8045838 未加载
评论 #8045718 未加载
benbristow将近 11 年前
This... is awesome. Such a time saver and very nicely designed too!
manug102将近 11 年前
After messing around with this, is there any reason to use any of the other sizes besides xs? With xs it seems like every device is covered, from the phone up to the large desktop.
评论 #8043949 未加载
评论 #8044739 未加载
kanakiyajay将近 11 年前
Good Work !<p>Had made something similar before : <a href="http://jaykanakiya.com/bootstrap-grid-builder/" rel="nofollow">http:&#x2F;&#x2F;jaykanakiya.com&#x2F;bootstrap-grid-builder&#x2F;</a>
seivan将近 11 年前
This was really useful, thank you! I&#x27;ve always had a hard time visualising the grids. Is there anyway I can add text, images and buttons? Mostly for testing layouts.
评论 #8043809 未加载
jetro223将近 11 年前
That&#x27;s great. Before clicking the link I thought &quot;who the hell needs this&quot;? But after trying it out for ~20 seconds... great - I&#x27;ll use it.
评论 #8044578 未加载
jxm262将近 11 年前
This is awesome! I&#x27;ll definitely start using this. I&#x27;ve seen JetStrap before for building the full UI. But this is great for alot of my uses.
larme将近 11 年前
Can you change the column type from lg to others like xs?
评论 #8043787 未加载
schmidtc将近 11 年前
Thank you! I&#x27;ve been trying to get my head around responsive grids for a while and after using this for 2 minutes I finally &quot;get it&quot;.
bitroliest将近 11 年前
As a backend engineer, this is fantastic. Thank you!
ldec将近 11 年前
This is awesome. love it. Thankyou Erik and Shaun.
评论 #8043195 未加载
yellowapple将近 11 年前
Quick nitpick: all the links on the bottom (with the exception of the &quot;Code by Shawn&quot; link) appear to be non-operational.
评论 #8044588 未加载
punkmouse将近 11 年前
Hey, quick note, the &quot;About Shoelace&quot; link in the bottom doesn&#x27;t work for me (Safari 7, OS X). Cheers, good stuff.