Bootstrap3 响应式画布外边栏布局模式

Bootstrap3 Off-canvas layout pattern

bootstrap，menu

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1672
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="col-xs-12 col-sm-8">
                <p class="pull-left visible-xs">
                    <button class="btn btn-primary btn-xs" type="button" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i>
                    </button>
                </p>
                <p class="pull-right visible-xs">
                    <button class="btn btn-primary btn-xs" type="button" data-toggle="offcanvasright"><i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </p>
                <div class="jumbotron">
                    <h1>Offcanvas layout pattern</h1>
                    <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
                </div>
                <div class="row">
                    <div class="col-6 col-sm-6 clearfix section">
                        <h2>Quam</h2>
                        <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
                            nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
                        <p><a class="btn btn-default" href="#">View details »</a>
                        </p>
                    </div>
                    
                    <div class="col-sm-6 section">
                        <h2>Fringilla</h2>
                        <p> Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec
                            vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
                        <p><a class="btn btn-default" href="#">View details »</a>
                        </p>
                    </div>
                    
                    <div class="col-sm-6 clearfix section">
                        <h2>Consequat</h2>
                        <p> Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce
                            eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>
                        <p><a class="btn btn-default" href="#">View details »</a>
                        </p>
                    </div>
                    
                    <div class="col-sm-6 section">
                        <h2>Turpis</h2>
                        <p> Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et
                            arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>
                        <p><a class="btn btn-default" href="#">View details »</a>
                        </p>
                    </div>
                    
                    <div class="col-sm-6 clearfix section">
                        <h2>Praesent</h2>
                        <p> Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl vestibulum.
                            Nullam eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus.</p>
                        <p><a class="btn btn-default" href="#">View details »</a>
                        </p>
                    </div>
                    
                    <div class="col-sm-6 section">
                        <h2>Neque</h2>
                        <p> Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt
                            non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa.</p>
                        <p><a class="btn btn-default" href="#">View details »</a>
                        </p>
                    </div>
                    
                </div>
                
            </div>

<div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebarRight" role="navigation">
                <div class="well sidebar-nav">
                    <ul class="nav">
                        <li>Right Sidebar</li>
                        <li class="active"><a href="#">Link</a>
                        </li>
                        <li><a href="#">Link</a>
                        </li>
                        <li><a href="#">Link</a>
                        </li>
                        <li><a href="#">Link</a>
                        </li>
                        <li><a href="#">Link</a>
                        </li>
                        <li><a href="#">Link</a>
                        </li>
                        <li><a href="#">Link</a>
                        </li>
                    </ul>
                </div>
                
            </div>

</div>

</div>

<hr>

<footer>
        <p>WP Strategy 2015</p>
    </footer>

</div>

Bootstrap3 Off-canvas layout pattern

bootstrap，menu

编辑器支持Emmet

快捷键

Bootstrap3 Off-canvas layout pattern

bootstrap，menu

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：