[前端]分享一个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 页面了

时间: 2024-11-10 01:32:53

[前端]分享一个Bootstrap可视化布局的网站的相关文章

分享一个数据可视化框架

今天在B站上看了不少数据可视化的视频,就是那种用柱形图显示动态排名的视频,又恰好看到一个up主的教学视频. up炒鸡良心,不仅做好了教学视频,连源码也给出来了,这里我拿来做一下分享 up主-见齐-数据可视化教学 GitHub源码 原文地址:https://www.cnblogs.com/wkfvawl/p/10269163.html

分享一个Cisco IOS的下载网站

大家都知道思科的IOS下载是需要权限的,普通注册个账户还不行,下面分享个网站,上面有分享各个版本的IOS下载,自己在初接触 Cisco Catalyst 3560G-24TS Switch 的时候找到的: http://sfree.ws/

如何快速开发一个漂亮的网站?包括前端的设计,css布局等

如何快速开发一个漂亮的网站?包括前端的设计,css布局等 网站开发看起来简单,但是做起来很乱,对于个人来说尤其如此.比如,需要ps,css,html,js,java等知识,有什么好的办法,可以快速的开发一个网站的前端? 如今有很多快速开发平台:图形化可视化操作,所见即所得:通过拖拉即可完成表单.流程.报表页面的设计:用户通过编写JS文件,调用封装的单据的保存.查询.删除等方法,即可完成页面的功能设计: 平台工具设计的所有的页面发布后,将生成HTML格式的源码文件,WEB系统采用HTML伪静态技术

bootstrap入门-1.可视化布局

下载地址:http://v3.bootcss.com/getting-started/#download   HTML模板: <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--

分享一个免费的在线Youtube视频在线下载网站(52Youtube.com),下载技术视频方便很多

分享一个 免费的在线Youtube视频在线下载网站,下载技术视频方便很多. 网址是 www.52youtube.com ,受限的Youtube视频也能下(年龄,地域限制等),比较不错. 

分享一个很酷很炫的html5特效网站源码

原创整理不易,转载请注明出处:分享一个很酷很炫的html5特效网站源码 代码下载地址:http://www.zuidaima.com/share/1784027301841920.htm 在线演示:http://demo.zuidaima.com/html/1784027301841920/index.html 分享一个很酷很炫的html5特效网站源码

分享一个从国外网站看到的socket程序,程序并不强悍,但能从代码中看到老外是怎么写代码的,咱可以取长补短

原文:分享一个从国外网站看到的socket程序,程序并不强悍,但能从代码中看到老外是怎么写代码的,咱可以取长补短 源代码下载地址:http://www.zuidaima.com/share/1550463702764544.htm package com.zuidaima.xs; /**************************************************************** * Version : 1.0 * Date : 02/03/2007 * Autho

bootstrap栅格布局-v客学院知识分享

今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义class为container.目的一是为了在响应式的布局上给宽度约束,二是提供padding以至于不让内容贴住浏览器的边缘. Class为row的盒子是指行的容器,bootstrap把一行分成了12等分,下面讲解下col-xx-是怎么使用的吧. Bootstrap栅格布局中css中有四个类,分别是col

分享一个免费接收短信验证码的网站

PS:给大家分享一个免费接收短信验证码的网站:https://www.becmd.com/ 现在我给大家说这个网站的作用,当我们需要用自己手机号在一些网站或平台 APP注册账号的时候,你考虑过自己的手机号就被一些不法分子利用,经常性 的会给你手机号发送一些垃圾信息和经常给你打推销广告,这个网站上就提供 两个用于接收短信的手机号本人亲自测试过,我也经常用这个网站提供的手机 注册一些账号,这样以来就会避免自己的手机号泄露,造成不必要的麻烦. 原文地址:https://www.cnblogs.com/