All Components

Responsive Panel / Basic usage

Resize the page to see the ResponsivePanel in action. It collapses the demos' sidebar on device or browser of width less than 1200px.

Read more about ResponsivePanel in Kendo UI Docs:

ResponsivePanel API

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content"> 
    <p>Resize the page to see the ResponsivePanel in action. It collapses the demos' sidebar on device or browser of width less than 1200px.</p> 
    <p style="margin: 1em auto;">Read more about ResponsivePanel in Kendo UI Docs:</p> 
    <a href="http://docs.telerik.com/kendo-ui/api/javascript/ui/responsivepanel" class="k-button k-primary" title="Kendo UI ResponsivePanel widget">ResponsivePanel API</a> 
   </div> 
  </div>   
 </body>
</html>