Boot-col-sm布局

最新推荐文章于 2023-02-26 17:12:08 发布

weixin_33937913

最新推荐文章于 2023-02-26 17:12:08 发布

阅读量145

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longly/p/6444996.html

本文介绍了一个使用HTML、CSS及Bootstrap框架实现响应式网站布局的例子。通过整合jQuery和Bootstrap的JavaScript组件，创建了顶部导航栏并包含登录、注册等功能。此外，还提供了不同语言版本的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5 
 6   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7   <script src="js/jquery-1.11.3.js"></script>
 8   <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 9   <link rel="stylesheet" href="js/bootstrap.css"/>
10   <link rel="stylesheet" href="style.css"/>
11   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
12   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
13 
14   <title>栅格系统</title>
15 </head>
16 <body>
17 <div class="container-fluid header_bg hidden-xs">
18   <div class="container  hidden-xs">
19     <div class="row">
20       <div class="col-sm-3 container ">
21         <div class="header_font text-right">
22           <span>你好，歡迎光臨香港地產網</span>
23         </div>
24       </div>
25       <div class="col-sm-8 text-right header_font">
26         <div class="login">
27           <a href="#">手機版</a>
28           <a href="#">會員登錄</a>
29           <a href="#">註冊會員</a>
30           <a href="#">聯絡我們</a>
31         </div>
32         <!-- login-->
33         <div class="Language">
34           <a href="#">繁體</a>
35           <span>/</span>
36           <a href="#">簡體</a>
37           <span>/</span>
38           <a href="#">ENG</a>
39         </div>
40       </div>
41     </div>
42 
43   </div>
44 </div>
45 
46 <script src="js/bootlint.js"></script>
47 </body>
48 </html>