如果你像我一样:是个前端渣,能看懂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可视化布局的网站的更多相关文章

  1. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  2. 对于bootstrap可视化布局设计可以参考2017.6.2

    http://www.layoutit.cn/v3/index.html  可视化布局链接,拖好控件自动生成代码非常方便 http://www.jq22.com/jquery-info14044  这 ...

  3. 前端框架之bootstrap及相关技术网站

    1.web框架之bootstrap bootstrap来源Twitter,是一个CSS/HTML框架,它是基于HTML,CSS,JavaScript下的,使用简洁,当中提供了很多HTML和CSS 如用 ...

  4. 分享一个免费SSL证书申请网站,给网站开启https协议 | 张戈博客

    这些天,由于公司的业务需求,接触到了ssl证书和https协议.博客前几篇文章也分享了在WEB服务器上安装SSL证书,为网站开启https协议的教程,感兴趣的童鞋可以前往查看相关文章: <Lin ...

  5. 分享一个查找linux命令的网站

    http://man.linuxde.net/ 不用每次都找度娘浪费时间了    

  6. 分享一个bootstrap的上一步,下一步的插件

    效果图: 下载链接: https://www.daimabiji.com/index.php?m=content&c=down&a_k=ae0fI1gZyLT7oao56Pgu-dye ...

  7. 分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

    这张图每位程序员应该都深有感触. 人民心目中的程序员是这样的:坐在电脑面前噼里啪啦敲着键盘,运键如飞. 现实中程序员是这样的:编码5分钟,调试两小时. 今天我要给大家分享一个用WebGL开发的网站,感 ...

  8. 前端入门24-响应式布局(BootStrap)

    声明 本篇内容摘抄自以下两个来源: BootStrap中文网 感谢大佬们的分享. 正文-响应式布局(BootStrap) 这次想来讲讲一个前端开发框架:BootStrap BootStrap 目前已经 ...

  9. bootstrap入门-1.可视化布局

    下载地址:http://v3.bootcss.com/getting-started/#download   HTML模板: <!DOCTYPE html> <html> &l ...

随机推荐

  1. VAG DMA protocol

    Func 0a - RAM Read 0A Func 0a - ROM Read 0A Func 0a - EEPROM Read FD Func 0C xx - EEPROM Write 0A Fu ...

  2. JVM常见的七种垃圾收集器的简单比较

    1.Serial收集器曾经是虚拟机新生代收集的唯一选择,是一个单线程的收集器,在进行收集垃圾时,必须stop the world,它是虚拟机运行在Client模式下的默认新生代收集器. 2.Seria ...

  3. Lotus开发性能优化

    之前也总结过一篇关于性能的文章,地址在http://www.cnblogs.com/carysun/archive/2008/08/09/BasicPerformance.html,今天又看到DW上又 ...

  4. https SSL主流数字证书都有哪些格式?

    主流数字证书都有哪些格式? 一般来说,主流的Web服务软件,通常都基于两种基础密码库:OpenSSL和Java. Tomcat.Weblogic.JBoss等,使用Java提供的密码库.通过Java的 ...

  5. 将w3cplus网站中的文章页面提取并导出为pdf文档

    最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...

  6. oracle中查询某张表都被哪些表参照了

    起因: 系统测试的时候发现如果某条记录已经被引用了,这个时候删除这条记录会引起数据不一致,系统会报错.比如警员信息,在考勤记录表里会引用警员ID,如果考勤记录表中已经存在这个警员ID了,这时从警员表中 ...

  7. Android ImageView src与backgroud

    在XML中添加ImageView时,有两个可以设置图片的地方,一个是android:src,一个是android:background,这两个的区别: src是图片内容,显示在前面的,backgrou ...

  8. 查看android app 线程信息的命令

    参考:https://my.oschina.net/zhiweiofli/blog/138454 ps | grep 'joyodream' 找到 app 的pid: joyodream为包名的一部分 ...

  9. SQLSERVER吞噬内存解决记录

    现在手上有一个不大不小的系统,运行了一段时间,因为是24*7不断运行,所以内存逐渐增高,慢慢的会飙到95%以上,然后不得不重启电脑,因为用的是云,怕虚拟机重启down掉起不来,重启操作还只能在凌晨4. ...

  10. HTTP协议学习

    面试过程中又一个常见的问题,http协议,因为做服务器开发如果用http协议的话,现在各种开源软件都封装好了,python中只需要简单的继承定义好的类,重写get或者post等方法,几行代码就可以搭建 ...