Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos.
Una inserción muestra el contenido de otros sitios web como videos de YouTube, Vimeo, mapas de Google, etc.
Ejemplo 1:
Este ejemplo incrustando Youtube.
jQuery:
$('.ui.embed').embed();
Código completo:
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div style="margin-top: 20px"
class="ui container">
<div class="ui embed" data-url=
"https://www.youtube.com/embed/JfiKYgfxCPc"
data-placeholder=
"https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png">
</div>
</div>
<script>
$('.ui.embed').embed();
</script>
</body>
</html>
Producción:
Ejemplo 2:
Este ejemplo especifica los detalles mediante programación.
Código jQuery:
$('.ui.embed').embed({
source: 'youtube',
id: 'JfiKYgfxCPc',
placeholder: 'https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png'
});
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div style="margin-top: 20px"
class="ui container">
<div class="ui embed"></div>
</div>
<script>
$('.ui.embed').embed({
source: 'youtube',
id: 'JfiKYgfxCPc',
placeholder:
'https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png'
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA