[前端]分享一个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 ...
随机推荐
- [mongodb-10gen]ubuntu下安装方法
由于自己老是不死心,所以还是继续在UBUNTU下开始我的GOLANG,今天发现服务源很快一下子就把GO的源代码从GoogleProject上给hg回来了,所以今天才查了一下在UBUNTU下安装Mong ...
- C++多线程开发之actor model
最近想把写过的一个多线程程序整理一下,这个程序主要特点是有一系列的互相之间有依赖关系的task.于是在网上找相关类库 1,一类是简单的线程池了,这也是原本俺的做法.之前使用的是手工调度,代码实现的很蛋 ...
- #入魔这些年#零度智控&模型控社区大型征文活动,万元大奖等你拿
玩航模是个好爱好,它能培养严谨的科学态度.超强的DIY动手能力.规范的项目管理习惯.良好的沟通合作技巧.过人的三维空间思维和感知: 你需要的知识储备有力学.空气动力学.电子学.通讯工程.材料学 ...
- 从《BLAME!》说开去——新一代生产级卡通真实感混合的渲染方案
<BLAME!>是Polygon Pictures Inc.(以下简称PPI)创业33周年以来制作的第一部CG剧场电影,故事来自于贰瓶勉的同名漫画作品(中文译名为<探索者>或者 ...
- JavaScript过滤除连续的数字
if (!Array.prototype.forEach) { Array.prototype.forEach = function (callback, thisArg) { var T, k; i ...
- 记录一下,如何配置nodejs nginx的反向代理
本文是在mac下配置nodejs 在nginx下的反向代理 1.安装nodejs,之前就安装了. 2.安装nginx ,我采用的直接源码安装 3.进入 /usr/local/nginx/conf 目录 ...
- selenium实战练习之:粉丝反馈表单的自动化脚本
链接 粉丝反馈表 要求 服务质量5颗星 喜欢的内容选择各种公开课 对交流群的意见需要填写 留下自己正确的联系方式 点击提交 断言 不需要断言,能符合上面的要求成功提交就可以
- ecshop利用.htaccess实现301重定向的方法
实现方法如下(空间必须支持对目录中的.htaccess文件解析) 打开 .htaccess 找到 RewriteEngine on 它的下方添加 RewriteCond %{HTTP_HOST} ^需 ...
- Etl之HiveSql调优(left join where的位置)
一.前言 公司实用Hadoop构建数据仓库,期间不可避免的实用HiveSql,在Etl过程中,速度成了避无可避的问题.本人有过几个数据表关联跑1个小时的经历,你可能觉得无所谓,可是多次Etl就要多个小 ...
- Oracle的model语句入门-转
Model语句是Oracle 10g的新功能之一. 本文通过一些简单的例子帮助理解Model语句的用法,复杂使用场景请参考其他文章. 环境:当然需要Oracle 10g以上,本人是在11g上测试的. ...