grapesjs制作一个手机 h5页面设计器示例代码-html代码-BFW代码库

grapesjs制作一个手机 h5页面设计器示例代码

代码语言：html

所属分类：其他

代码描述：grapesjs制作一个手机 h5页面设计器示例代码，可以设计手机页面，生成html代码，引入了第三方css样式表onsen-css-components。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  color: #333!important; 
}
body {
	margin:0;
  color: #333!important;
}

.panel__basic-actions {
  position: initial;
}
#gjs {
  border: 0px solid #444;
}


.gjs-cv-canvas {
 background-color: white!important;
 background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFRjNFMzJDM0IyNURFMjExQTQ5Nzg0NDU1RjcxQ0I5NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjY1RjQ3NzVEQjIxMUUyQjJERTgyREM1RTk4RjcyNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjY1RjQ3NjVEQjIxMUUyQjJERTgyREM1RTk4RjcyNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVGM0UzMkMzQjI1REUyMTFBNDk3ODQ0NTVGNzFDQjk2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVGM0UzMkMzQjI1REUyMTFBNDk3ODQ0NTVGNzFDQjk2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pZE7iQAAAL5JREFUeNrs1rGthDAQRdEZRBW0Qf/1UIYREgECyyZBBD5P2uAvPzranb0ZEWtYcz2gZeTnk89He/P1j1LK4x8ys/r+KM99gjoDBAjQp8vzZ35D8aKDjmt+fx2dUHt/lOe+Ym4QIECAAOkgHaSDzA0CBAgQIB2kg3SQuUGAAAECpIN0kA4yQIAAAQKkg3SQDnKDDBAgQIB0kA7SQW6QAQIECJAO0kE6yA0yQIAAAdJBOkgHuUGADBAgQH9sF2AAjn/gJpFLwPMAAAAASUVORK5CYII=');


  width: 100%;
  height: 100%;

}
.gjs-block {
  margin-left: 5px;
  width: auto;
  height: auto;
  min-height: auto; 
}

.gjs-one-bg{
  background-color: white!important;
  color: black;
  
}

.gjs-pn-btn  {
  color: #333!important;
}
.gjs-devices {
 
  background-color: black!important;
}
.gjs-pn-panel gjs-pn-commands gjs-one-bg gjs-two-color {
  background-color: black!important;
}
.gjs-pn-btn.gjs-pn-active {
  
  background-color: white!important;
  box-shadow: none!important;
}
.gjs-mdl-title{
  
  color: black!important;
}
.gjs-device-label {
  color: black!important;
}
.gjs-devices-c{
  display: none!important;
  
  
}
.gjs-four-color {
  
  color: #1e88e5!important;
}
.gjs-clm-tag {
  background-color: #1e88e5!important;
}




.gjs-frame-wrapper {
  margin-top: 50px!important;
  margin-bottom: 50px!important;
}
.gjs-sm-sectors {
  background-color: #f1f1f1!important;
}
.gjs-off-prv {
  padding: 20px!important;
  background-color: #1e88e5!important;
  
}
.fa-eye-slash {
  font-size: 32px!important;
  color: white!important;
  
}
.cm-s-hopscotch.CodeMirror {
    background: #fff!important;
    
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw..........完整代码请登录后点击上方下载按钮下载查看