Bootstrap可视化布局系统自动生成自定义网页

970 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路

首先附上网址

www.ibootstrap.cn/

进入之后是这样的

06ZTDO181F@9SJBY$QPECQ6.png 左侧导航栏是我们可以使用的工具及布局,把他们拖到右侧布置成自己想要的效果,每一个组件拖进去之后右上角会有拖动、删除、样式等按钮,按照自己的需求进行操作 (注意首先要拖动布局设置中的选项进行布局,然后再选择其他自己喜欢的工具)

下面我们来随意拼一拼看看效果

1、删除系统初始化的组件

66MMOAO`TKYAW_7NN7BWG)U.png

2、将布局设置下自己所需的布局拖入右侧

111.jpg

3、再添加自己喜欢的组件

效果如下

20200214103320675.png

4、点击下载

20200214103820769.jpg

出现以下页面

20200214103943155.png

根据他的提示去网站下载bootstrap3.0.1 www.bootcdn.cn/twitter-boo…

找到相应的版本,选择这个 链接 点击 "</>复制标签",即可得到如下代码 (这种引入方法不联网的话就没有css样式了)

<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
5、复制代码,完成制作

进入自己的代码编辑器,把刚才的link代码复制到头文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
		<title></title>
	</head>
	<body>
	</body>
</html>

再把点击下载后出现的弹框中的代码复制到body标签中,即可得到所有的代码,运行后在浏览器中效果如下

20200214105009504.png

这个文档中还有一些具体的说明,可以自己更改自己想要的效果,比如浏览器自适应、鼠标悬停、响应式表格等等 v3.bootcss.com/css/