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

news/2024/5/20 15:47:52/文章来源:https://blog.csdn.net/weixin_30532759/article/details/95633318

如果你像我一样:是个前端渣,能看懂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 页面了

 

转载于:https://www.cnblogs.com/xueweihan/p/5003492.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_831735.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity3D 在官方网站 下载资源 路径存储问题

第一步打开 官网 https://store.unity3d.com/account/users 或者 在unity3D软件中,单击 window 再单机 asset store 即可进入商店,在商店中可以找到免费的学习案例,如:Unity Sample UI,在搜索栏中输入Unity Sample …

你必须知道的,常用的机器学习相关网站!!!

很多人因为人工智能的大火,转变了职业规划或研究方向,开始了学习相关领域的知识之路,虽说人工智能领域应用很广泛,涉及到的知识的也很广泛,但机器学习作为基础知识是每个人必须要了解的知识。 机器学习的相关资料相信…

网站接入短信平台验证流程

以网站注册用户为例 前端页面,此处用到volicity前端验证,暂时不做深入 <form action"$!webPath/register_finish.htm" method"post" name"theForm" id"theForm"><table width"900" border"0" cellpaddin…

不知名网站编程(一)

不知名网站编程记录&#xff08;一&#xff09; function place(a) {c.fillStyle "red";c.fillRect(a,0,20,20);c.fillStyle "green";c.fillRect(a20,20,20,20);c.fillStyle "blue";c.fillRect(a40,40,20,20); }var a 0; while(a<200) {…

不知名网站编程(二)

不知名网站编程记录&#xff08;二&#xff09; var a 0; var b 0; while(b<6) {c.fillStyle "blue";c.fillRect(12*a,12*a,240-24*a,240-24*a);a 1;c.fillStyle "orange";c.fillRect(12*a,12*a,240-24*a,240-24*a);a 1;b 1; }var a 0; var b …

不知名网站编程(三)

不知名网站编程记录&#xff08;三&#xff09; var a 0; var b 0; do { c.fillStyle rgb(0,0,a);c.fillRect(b,b,20,20);a a 60;b b 20; }while(b<80);var a 0; var b 0; do {c.fillStyle rgb(255-1.2*a,255-0.6*a,a);c.fillRect(b,b,200-2*b,200-2*b);a a 6…

不知名网站编程(四)

不知名网站编程记录&#xff08;四&#xff09; var a 0; var b 0; do {c.fillStyle rgb(128a,0,128-a);c.fillRect(b,b,200-2*b,200-2*b);a a 32;b b 20; }while(b<80);var a 0; var b 100; do {c.fillStyle rgb(255-a,0,0);c.fillRect(0,0,b,b);a a 63;b b …

基于jsp技术的校园二手交易网站

【项目介绍】基于jsp的校园二手商品交易网站系统使用jsp技术进行开发&#xff0c;项目主要实现了一整套的校园二手交易逻辑&#xff0c; 主要功能如下&#xff08;包括但不限于&#xff0c;只列出主要功能&#xff09;&#xff1a;管理员模块 |-----用户管理 |-----商品管…

Windows 2012 R2版本下部署IIS网站

Windows 2012 R2是一个比较稳定的服务器版本&#xff0c;本文分享一篇在Windows 2012 R2版本下搭建IIS项目的操作流程。 1. 安装IIS Web服务器 打开远程桌面->控制面板->程序和功能->打开或关闭Windows功能->添加角色和功能 安装您的实际需求勾选必要的安装&#x…

技术文章精美配图模板网站推荐-创客贴

最近上海的风景很好&#xff0c;有清晨的微风、有蓝天白云&#xff0c;小编被大好河山迷住了&#xff0c;只顾着欣赏美景佳人&#xff0c;今天开始上班&#xff0c;把思绪和心情收回来&#xff0c;得花一些时间来写写东西&#xff0c;记录记录生活。我经常逛知乎&#xff0c;也…

手把手教你查看网站遭受到的Web应用攻击类型

常见Web应用攻击类型有&#xff1a;webshell、SQL注入、文件包含、CC攻击、XSS跨站脚本攻击、敏感文件访问、远程命令、恶意扫描、代码执行、恶意采集、特殊攻击、其他攻击十二种攻击类型。 如何查看网站遭受的Web应用攻击&#xff1f; &#xff08;请参照以下步骤&#xff1a;…

MySQL 测试数据(附开源网站)

MySQL测试数据 前言&#xff1a; 笔者接下来要步入MySQL DQL的学习阶段了&#xff0c;然而在开始学习时&#xff0c;苦苦没有测试数据&#xff0c;故花了很长时间利用某开源网站&#xff08;附在文章最后&#xff09;制作了4个数据表&#xff0c;四个表之间笔者经过考虑并没有…

DEDECMS打开网站后台系统首页卡解决方法

找到根目录下&#xff08;一般是dede&#xff09; templets文件夹下找到index_body.htm文件&#xff0c;将第25行至第41行部分注释或删除 保存文件&#xff0c;然后再打开后台&#xff0c;就不会有这个问题了。 转载于:https://www.cnblogs.com/500m/p/10534323.html

【博客搬家】Java 专业人士必备的网站列表

Web 站点 Web 站点的数目浩如烟海&#xff0c;如果您想要消化其中的内容&#xff0c;穷毕生之力也难以全部访问。包含 Java 语言某方面内容的详尽的网站列表会大得离谱。下列站点都是可靠、真实的。Sun 的 Java 技术站点Sun 的 Java 语言站点这是 Sun 的 Java 语言主站。作为 J…

【博客搬家】提高网站速度之终极技巧

网站访问速度可以直接影响到网站的流量&#xff0c;而网站的访问量几乎与网站的利益直接挂钩&#xff0c;因此网站的速度问题成为企业及站长十分关注的问题。现在网站越来越多&#xff0c;不少朋友的网站打开速度很不理想。也许自己打开网站速度很快&#xff0c;别人打开自己网…

网站首页高可用_nginx+lua——缓存预热与nginx限流

文章目录第5章 网站首页高可用nginxlua学习目标1 Lua介绍1.1 lua是什么1.2 lua的安装1.3 快速入门1.4 LUA的基本语法1.4.1 注释1.4.2 关键字1.4.3 定义变量1.4.4 Lua中的数据类型1.4.5 流程控制1.4.6 函数1.4.7 require 函数2.nginxluaredis实现广告缓存2.1 需求分析2.2 OpenRe…

大数据项目——网站流量日志数据分析-架构实现思路

文章目录1. 整体技术流程及架构1.1数据处理流程数据采集数据预处理数据入库数据分析数据展现1.2 系统整体架构2.处理的数据说明1. 整体技术流程及架构 1.1数据处理流程 网站流量日志数据分析是一个纯粹的数据分析项目&#xff0c;其整体流程基本上就是依据数据的处理流程进行…

windows IIS部署python Flask 网站

安装IIS,启用CGI 安装Anaconda 我一般机器都安装Anaconda,虽然比较大&#xff0c; 但是管理python版本以及包会很方便。 安装wfastcgi并激活。 打开Anaconda Prompt。 进入python安装目录下的scripts文件夹然后运行wfastcgi-enable 打开"处理程序映射"模块&#xf…

机器学习实战笔记——利用KNN算法改进约会网站的配对效果

利用KNN算法改进约会网站的配对效果 一、案例背景 我的朋友海伦一直使用在线约会网站寻找合适自己的约会对象。尽管约会网站会推荐不同的人选&#xff0c;但她并不是喜欢每一个人。经过一番总结&#xff0c;她发现曾交往过三种类型的人&#xff1a;&#xff08;1&#xff09;不…

使用PHP实现WEB网站登陆后台编写

####html页面&#xff0c;没加入CSS代码&#xff1a; <form action"login.php" method"post"><input type"text" placeholder"账号" name"id"/><input type"password" name"password"/…