Teste com ring + bootstrap

bootstrap.ring

#!ring -cgi

Load "weblib.ring"

Import system.web

BootStrapWebPage() {
	div { classname = :container
	
		div { classname = :jumbotron
			H1 { classname="display-4" text("Bootstrap Page") 	}
		}
		
		div { classname = :row
			for x = 1 to 3
				div	{ classname = "col-sm-4"
					H3 { html("Welcome the the Ring programming language") }
					P  { html("Using a scripting language is very fun! - " + x) }
				}
			next 
		}
		
		div	{ classname = :row
		
			div { classname = "col-sm-4"
				Button { classname="btn btn-success btn-lg" datatoggle="modal" datatarget="#myModal"
					text("Open Modal")
				}
			}
			
			div { classname = "col-sm-4"		
				div { classname="card text-white bg-info"
					H5{ classname="card-header" text("Featured")}
					div { classname="card-body"
						P{ classname="card-text" text("With supporting text below as a natural lead-in to additional content.")}
					}
					div { classname="card-footer"
						text("Dentro de dois dias")
					}
				}
			}			
			
			div { classname = "col-sm-4"
				div { classname = "btn-group" 
					button {  classname="btn btn-primary" text("um") }
					button {  classname="btn btn-primary" text("dois") }
					button {  classname="btn btn-primary" text("três") }
				}
			}
		}
		
		h3 { text("Lista")}
		div {
			ul { classname = "list-group"
				for x=1 to 5
					li { classname = "list-group-item" text("Item "+x)}
				next
			}
		}
# -----------------------		
# info para o frame modal		
# -----------------------		
		div { classname="modal fade" id="myModal" role="dialog"			
			div { classname = "modal-dialog modal-dialog-centered"
				div { classname="modal-content" 
					div { classname="modal-header"
						button {  classname="close" datadismiss="modal"
							html("&times")
						}
						h4 { classname="modal-title"
							text("Modal Header")
						}
					}
					div { classname = "modal-body" 
						p { text("This is a large model.") }
					}
					div { classname="modal-footer"
						button { classname = "btn btn-danger" datadismiss="modal" text("Fechar")}
						button { classname = "btn btn-primary" datadismiss="modal" text("Salvar")}
					}
				}
			}
		}
	}
}