El marco de código abierto de la interfaz de usuario semántica proporciona Rail , que ayuda a mostrar contenido fuera de los límites de la vista principal del sitio web. Se encuentra principalmente en el lado izquierdo y derecho cuando la vista principal de su sitio web está en el centro. Es muy similar al uso de bootstrap y tiene diferentes elementos para hacer que su sitio web se vea más increíble.
Ejemplo:
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" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h2>Rail</h2> <br> <div class="ui grid container"> <div class="ui four wide column"> </div> <div class="ui segment eight wide column"> <div class="ui left rail"> <div class="ui segment"> Left Rail <ul> <strong>Menu</strong> <li>Data Structure</li> <li>Web Programming</li> <li>C++ Programming</li> </ul> </div> </div> <div class="ui right rail"> <div class="ui segment"> Right Rail <ul> <strong> More you wanna try </strong> <li> Try new basic computer programming course </li> <li> Full stack developer course </li> </ul> </div> </div> <h1>Welcome to geeksforgeeks.</h1> </div> </div> </div> <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> </body> </html>
Producción: 
Ejemplo: El siguiente ejemplo muestra el riel interno.
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" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h2>Internal Rail</h2> <br> <div class="ui segment eight wide column"> <div class="ui left internal rail"> <div class="ui segment"> Left Rail <ul> <strong>Menu</strong> <li>Data Structure</li> <li>Web Programming</li> <li>C++ Programming</li> </ul> </div> </div> <div class="ui right internal rail"> <div class="ui segment"> Right Rail <ul> <strong>More you wanna try</strong> <li> Try new basic computer programming course </li> <li>Full stack developer course</li> </ul> </div> </div> <center> <h3>Welcome to geeksforgeeks.</h3> <p>Learn anything you want</p> <p>Get tutorial of anything related to computer science.</p> <p>Courses on programming</p> <p>Solve programming problems.</p> <p>Help other by writing articles.</p> </center> </div> </div> <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> </body> </html>
Producción: 
Ejemplo: El siguiente ejemplo muestra un riel divisorio.
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" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h2>Dividing Rail</h2> <br> <div class="ui grid container"> <div class="ui four wide column"> </div> <div class="ui segment eight wide column"> <div class="ui left dividing rail"> <div class="ui segment"> Left Rail <ul> <strong>Menu</strong> <li>Data Structure</li> <li>Web Programming</li> <li>C++ Programming</li> </ul> </div> </div> <div class="ui right dividing rail"> <div class="ui segment"> Right Rail <ul> <strong> More you wanna try </strong> <li>Try new basic computer programming course</li> <li>Full stack developer course</li> </ul> </div> </div> <center> <h3>Welcome to geeksforgeeks.</h3> <p>Learn anything you want</p> <p>Get tutorial of anything related to computer science.</p> <p>Courses on programming</p> <p>Solve programming problems.</p> <p>Help other by writing articles.</p> </center> </div> </div> </div> <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> </body> </html>
Producción: 
Ejemplo: El siguiente ejemplo muestra un riel adjunto.
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" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h2>Attached Rail</h2> <br> <div class="ui grid container"> <div class="ui four wide column"> </div> <div class="ui segment eight wide column"> <div class="ui left attached rail"> <div class="ui segment"> Left Rail <ul> <strong>Menu</strong> <li>Data Structure</li> <li>Web Programming</li> <li>C++ Programming</li> </ul> </div> </div> <div class="ui right attached rail"> <div class="ui segment"> Right Rail <ul> <strong> More you wanna try </strong> <li>Try new basic computer programming course</li> <li>Full stack developer course</li> </ul> </div> </div> <center> <h3>Welcome to geeksforgeeks.</h3> <p>Learn anything you want</p> <p>Get tutorial of anything related to computer science.</p> <p>Courses on programming</p> <p>Solve programming problems.</p> <p>Help other by writing articles.</p> </center> </div> </div> </div> <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> </body> </html>
Producción: 
Puede usar clases como diminuto, pequeño, grande, enorme, masivo para cambiar el tamaño del riel.
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA