首页用bootstrap响应式做一个前端要代码

用bootstrap响应式做一个前端要代码

时间: 2024-02-01 10:04:17 浏览: 74

好的，以下是一个简单的使用Bootstrap响应式框架构建前端的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Responsive Frontend</title>  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1 class="text-center mt-5 mb-3">Bootstrap Responsive Frontend</h1> <div class="row"> <div class="col-md-6"> <img src="https://via.placeholder.com/600x400" class="img-fluid" alt="Placeholder Image"> </div> <div class="col-md-6"> <h2>Lorem ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href="#" class="btn btn-primary">Learn More</a> </div> </div> </div>  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> </body> </html> ``` 在上面的代码中，我们使用了Bootstrap的网格系统来创建两列布局，并使用了一些Bootstrap的CSS类来样式化页面元素。我们还在移动设备上测试了该页面，并使用了Bootstrap的JavaScript插件来增强用户体验。希望这个简单的示例代码能够帮助您更好地理解如何使用Bootstrap响应式框架构建前端！

阅读全文