Skip to content

Instantly share code, notes, and snippets.

@luislobo14rap

luislobo14rap/HTML_bootstrap_starter_template.html

Last active July 24, 2024 19:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save luislobo14rap/ab1447bc1a50cffa76c1e3ddfe1d1628 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save luislobo14rap/ab1447bc1a50cffa76c1e3ddfe1d1628 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HTML_bootstrap_starter_template.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no" />
<title></title>
<!-- LIBS -->
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.x.x/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.x.x/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.x.x/dist/jquery.min.js"></script>
<!-- CSS -->
<!-- LESS -->
<!-- <link href="css/app.less" rel="stylesheet/less"> -->
<!-- RUN LESS -->
<script src="https://cdn.jsdelivr.net/npm/less@4.x.x/dist/less.min.js"></script>
<script>
function cssToLess(){
const lessStyles = document.querySelectorAll(`style[type_="text/less"]`)
lessStyles.forEach(styleElement => {
const lessCode = styleElement.innerText
less.render(lessCode, (error, output) => {
const cssCode = output.css
styleElement.innerText = cssCode
styleElement.removeAttribute("type_")
styleElement.setAttribute("type", "text/css")
})
})
}
</script>
<style type_="text/less"></style>
<script>
cssToLess()
</script>
</head>
<body>
</body>
</html>
Raw
HTML_bootstrap_starter_templateBS4.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.x.x/dist/css/bootstrap.min.css" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.x.x/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.x.x/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Raw
minimalist.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.x.x/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.x.x/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.x.x/dist/jquery.min.js"></script>
<script>
</script>
</body>
</html>
Raw
react+tailwind.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no" />
<title>React+Tailwind</title>
<!-- LIBS -->
<!-- tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.x.x/dist/jquery.min.js"></script>
<!-- CSS -->
<!-- LESS -->
<!-- <link href="css/app.less" rel="stylesheet/less"> -->
<!-- RUN LESS -->
<script src="https://cdn.jsdelivr.net/npm/less@4.x.x/dist/less.min.js"></script>
<script>
function cssToLess() {
const lessStyles = document.querySelectorAll(`style[type_="text/less"]`)
lessStyles.forEach(styleElement => {
const lessCode = styleElement.innerText
less.render(lessCode, (error, output) => {
const cssCode = output.css
styleElement.innerText = cssCode
styleElement.removeAttribute("type_")
styleElement.setAttribute("type", "text/css")
})
})
}
</script>
<style type_="text/less"></style>
<script>
cssToLess()
</script>
<!-- React -->
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.x.x/babel.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react@18.x.x/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.x.x/umd/react-dom.development.js"></script>
<script type="text/babel">
const { useState } = React
function App() {
const [value, setValue] = useState(Math.random())
return (
<div id="App">{value}</div>
)
}
ReactDOM.createRoot(document.querySelector("#root")).render(<App />)
</script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
Raw
tailwind.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no" />
<title></title>
<!-- LIBS -->
<!-- tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.x.x/dist/jquery.min.js"></script>
<!-- CSS -->
<!-- LESS -->
<!-- <link href="css/app.less" rel="stylesheet/less"> -->
<!-- RUN LESS -->
<script src="https://cdn.jsdelivr.net/npm/less@4.x.x/dist/less.min.js"></script>
<script>
function cssToLess() {
const lessStyles = document.querySelectorAll(`style[type_="text/less"]`)
lessStyles.forEach(styleElement => {
const lessCode = styleElement.innerText
less.render(lessCode, (error, output) => {
const cssCode = output.css
styleElement.innerText = cssCode
styleElement.removeAttribute("type_")
styleElement.setAttribute("type", "text/css")
})
})
}
</script>
<style type_="text/less"></style>
<script>
cssToLess()
</script>
</head>
<body>
<p>
AAA
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment