[前端]分享一个Bootstrap可视化布局的网站
如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒!
当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的!
http://www.runoob.com/try/bootstrap/layoutit/
这是可以放到web中的元素,需要解释下的就是——布局系统,就是布局,就是你把一行分为几个块,然后在每个块中再放元素。
这就是所谓的布局,参考:网格系统——http://www.runoob.com/bootstrap/bootstrap-grid-system.html

可以选择最左边的不同设备图标,查看这个页面在不同设备上的效果。
然后下载,可以把你设计好的样式的代码下载你的本地。


这样下载下来的代码,可以直接放到html,需要注意的是,cdn可以转成本地的源,或者换一个,我觉得他提供的有点卡!
然后就是根据你的需要在进行修改,挖坑填数据(因为我用的是模版引擎动态生成的html)。
你可以通过这个网站,可视化的把你的web页面的框架搭建好,之后你只需要调节一些细节。
这个时候懂一些bootstrap知识,会让你事半功倍!bootstarp入门知识:
在看下面的资料之前,我在这里唠叨一下:
1.不要把所有章节都看一遍再动手构建你的页面
2.大致知道bootstrap都提供那些东西
3.要有耐心,一点点弄
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
就这样,你也可以独自完成一个web 页面了
[前端]分享一个Bootstrap可视化布局的网站的更多相关文章
- Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...
- 对于bootstrap可视化布局设计可以参考2017.6.2
http://www.layoutit.cn/v3/index.html 可视化布局链接,拖好控件自动生成代码非常方便 http://www.jq22.com/jquery-info14044 这 ...
- 前端框架之bootstrap及相关技术网站
1.web框架之bootstrap bootstrap来源Twitter,是一个CSS/HTML框架,它是基于HTML,CSS,JavaScript下的,使用简洁,当中提供了很多HTML和CSS 如用 ...
- 分享一个免费SSL证书申请网站,给网站开启https协议 | 张戈博客
这些天,由于公司的业务需求,接触到了ssl证书和https协议.博客前几篇文章也分享了在WEB服务器上安装SSL证书,为网站开启https协议的教程,感兴趣的童鞋可以前往查看相关文章: <Lin ...
- 分享一个查找linux命令的网站
http://man.linuxde.net/ 不用每次都找度娘浪费时间了
- 分享一个bootstrap的上一步,下一步的插件
效果图: 下载链接: https://www.daimabiji.com/index.php?m=content&c=down&a_k=ae0fI1gZyLT7oao56Pgu-dye ...
- 分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型
这张图每位程序员应该都深有感触. 人民心目中的程序员是这样的:坐在电脑面前噼里啪啦敲着键盘,运键如飞. 现实中程序员是这样的:编码5分钟,调试两小时. 今天我要给大家分享一个用WebGL开发的网站,感 ...
- 前端入门24-响应式布局(BootStrap)
声明 本篇内容摘抄自以下两个来源: BootStrap中文网 感谢大佬们的分享. 正文-响应式布局(BootStrap) 这次想来讲讲一个前端开发框架:BootStrap BootStrap 目前已经 ...
- bootstrap入门-1.可视化布局
下载地址:http://v3.bootcss.com/getting-started/#download HTML模板: <!DOCTYPE html> <html> &l ...
随机推荐
- 取消 virtualStore 注册表[启用和禁止 UAC虚拟化]
近日发现,在win2008R2 x64下运行的服务器程序,其注册表读取路径为: [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\SZDomain\itvc1] 但是经 ...
- Python 实现有道翻译命令行版
一.个人需求 由于一直用Linux系统,对于词典的支持特别不好,对于我这英语渣渣的人来说,当看英文文档就一直卡壳,之前用惯了有道词典,感觉很不错,虽然有网页版的但是对于全站英文的网页来说并不支持.索性 ...
- 【地图API】收货地址详解2
上次讲解的方法是: 在地图中心点添加一个标注,每次拖动地图就获取地图中心点,再把标注的位置设置为地图中心点.可参考教程:http://www.cnblogs.com/milkmap/p/6126424 ...
- RPM -U 升级机制探索
今天被RPM升级机制狠狠的阴了一把,差点没过来,趁着热乎赶紧记录下来,已被后用. RPM包有升级机制(Upgrade), 使用-U 参数.这点我之前略有耳闻,知道的并不详细. 先说说案例:半年前我们r ...
- IOS 7 UI 的适配
官方问题答案:https://developer.apple.com/library/ios/qa/qa1797/_index.html 官方建议: https://developer.apple.c ...
- Linux内核同步方法
1.原子操作,是其它同步方法的基础. 2.自旋锁,线程试图获取一个已经被别人持有的自旋锁,当前线程处于忙等待,占用cpu资源. 3.读写自旋锁,根据通用性和针对性的特点,普通自旋锁在特定场景下的表现会 ...
- python字符串格式化方法 format函数的使用
python从2.6开始支持format,新的更加容易读懂的字符串格式化方法, 从原来的% 模式变成新的可读性更强的 花括号声明{}.用于渲染前的参数引用声明, 花括号里可以用数字代表引用参数的序 ...
- 文件系统管理 之 Linux 创建文件系统及挂载文件系统流程详解
阅读此文,必须具备知识点:<Linux 查看磁盘分区.文件系统.使用情况的命令和相关工具介绍><实例解说 fdisk 使用方法><合理规划您的硬盘分区><Fe ...
- OpenResty(nginx)操作mysql的初步应用
OpenResty (也称为 ngx_openresty)是一个全功能的 Web 应用服务器,它打包了标准的 Nginx 核心,很多的常用的第三方模块,以及它们的大多数依赖项. OpenResty ...
- How to get the Current Controller Name, Action, or ID in ASP.NET MVC
public static class HtmlRequestHelper { public static string Id(this HtmlHelper htmlHelper) { var ro ...