bootstrap简单的页面Demo1

最新推荐文章于 2023-03-27 19:51:21 发布
最新推荐文章于 2023-03-27 19:51:21 发布
阅读量333 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/raosheng1993/article/details/45422139
版权


[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Bootstrap, from Twitter</title>  
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7. <meta name="description" content="">  
  8. <meta name="author" content="">  
  9. <link rel="shortcut icon" href="images/bkb-180.jpg">  
  10. <!-- Le styles -->  
  11. <link href="css/bootstrap.css" rel="stylesheet">  
  12. <style>  
  13. body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ }  
  14. </style>  
  15. <link href="css/bootstrap-responsive.css" rel="stylesheet">  
  16.   
  17. <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->  
  18. <!--[if lt IE 9]>  
  19.       <script src="js/html5shiv.js"></script>  
  20.     <![endif]-->  
  21. <body>  
  22.   
  23. <div class="navbar navbar-inverse navbar-fixed-top">  
  24.     <div class="navbar-inner">  
  25.         <div class="container">  
  26.             <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">  
  27.                 <span class="icon-bar"></span>  
  28.                 <span class="icon-bar"></span>  
  29.                 <span class="icon-bar"></span>  
  30.             </a>  
  31.             <a class="brand" href="#">Bokebi</a>  
  32.             <div class="nav-collapse collapse">  
  33.                 <ul class="nav">  
  34.                     <li class="active"><a href="#">首页</a></li>  
  35.                     <li><a href="#">冠体</a></li>  
  36.                     <li><a href="#">需求</a></li>  
  37.                     <li><a href="#">发布冠体</a></li>  
  38.                     <li><a href="#">发布需求</a></li>  
  39.                     <li class="dropdown">  
  40.                         <a class="dropdown-toggle" data-toggle="dropdown" href="#">更多 <b class="caret"></b></a>  
  41.                         <ul class="dropdown-menu">  
  42.                             <li><a href="#">关于我们</a></li>  
  43.                             <li><a href="#">联系我们</a></li>  
  44.                             <li><a href="#">留言反馈</a></li>  
  45.                             <li><a href="#">沙哟拉拉</a></li>  
  46.                             <li class="divider"></li>  
  47.                             <li><a href="#">真没有了</a></li>  
  48.                         </ul>  
  49.                     </li>  
  50.                 </ul>  
  51.                 <form class="navbar-form pull-right" action="">  
  52.                     <input class="span2" type="text" name="" id="" placeholder="用户名">  
  53.                     <input class="span2" type="password" name="" id="" placeholder="密码">  
  54.                     <button type="submit" class="btn btn-danger">登录</button>  
  55.                 </form>  
  56.             </div>  
  57.         </div>  
  58.     </div>  
  59. </div>  
  60.   
  61.   
  62.     <div class="container">  
  63.       <div class="hero-unit">  
  64.         <h1>Hello,TT！</h1>  
  65.             <p>这是一段文字内容，死定了父级死定了父级的，的房间了时间的法律纠纷是，的房间数量空间弗雷德，水电费是否是的是到了福建市领导父级，方式来地方吉林市的房间数量京东方失联客机。</p>  
  66.             <p><a class="btn btn-large btn-danger" href="#">查看更多 »</a></p>  
  67.       </div>  
  68.         
  69.       <div class="row">  
  70.         <div class="span4">  
  71.             <h2>这是一个标题</h2>  
  72.             <p>这是是标题里面的相关内容，死了的方了的房价的路口附近，看见斯洛伐克，是的分类时间了附件是浪费捡垃圾，史蒂夫史蒂夫了空间垃圾垃圾垃圾死垃圾的分类是控件。</p>  
  73.             <p><a href="" class="btn">产看更多 »</a></p>  
  74.         </div>  
  75.         <div class="span4">  
  76.             <h2>这是一个标题</h2>  
  77.             <p>这是是标题里面的相关内容，死了的方了的房价的路口附近，看见斯洛伐克，是的分类时间了附件是浪费捡垃圾，史蒂夫史蒂夫了空间垃圾垃圾垃圾死垃圾的分类是控件。</p>  
  78.             <p><a href="" class="btn">产看更多 »</a></p>  
  79.         </div>  
  80.         <div class="span4">  
  81.             <h2>这是一个标题</h2>  
  82.             <p>这是是标题里面的相关内容，死了的方了的房价的路口附近，看见斯洛伐克，是的分类时间了附件是浪费捡垃圾，史蒂夫史蒂夫了空间垃圾垃圾垃圾死垃圾的分类是控件。</p>  
  83.             <p><a href="" class="btn">产看更多 »</a></p>  
  84.         </div>  
  85.       </div>  
  86.     </div>  
  87.       
  88.     <div class="container">  
  89.         <hr>  
  90.       <footer>  
  91.         <p>&copy;Bokebi 2014</p>  
  92.       </footer>  
  93.     </div>  
  94.   
  95.   
  96. <script src="js/jquery-1.10.2.min.js"></script>   
  97. <script src="js/bootstrap.js"></script>   
  98.   
  99. </body>  
  100. </html>  

预览图片：

ruby小酱
关注
专栏目录
Bootstrap布局的网站首页DEMO
10-03
用bootstrap前端框架搭建的简洁风格网站首页。框架首页：http://www.bootcss.com/
bootstrap完整Demo
09-25
BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。 它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现。所以，可以用他来开发适合各种设备浏览的页面，避免了大量的因为兼容性而导致的重复劳动。 它的最新版本是4.0，国内目前用的较多的是3.x,我们的教程也基于BootStrap3.x版本，也是目前最受欢迎的前端框架之一。 你可以使用默认的BootStrap样式和组件，你也可以对其进行二次开发，当然你也可以基于BootStrap环境使用自己写的组件。
【Bootstrap】Bootstrap环境搭建及demo
qq_41604569的博客
03-27 2349
Bootstrap是一个流行的开源前端框架，可以用于快速构建现代化、响应式的网站和Web应用程序。以下是一个简单的示例，演示如何使用Bootstrap构建一个基本的网页。从官网https://getbootstrap.com/下载最新版本的Bootstrap，然后将下载的文件解压缩到本地计算机上的一个目录中。在HTML文件中引入Bootstrap的样式表和脚本，以便使用Bootstrap提供的样式和功能。下面是一个简单的示例，演示如何使用Bootstrap搭建一个基本的网页。是jQuery库文件，
bootstrap 响应式网页demo
01-09
bootstrap 响应式网页demo bootstrap 响应式网页demo源码 一共四个demo，可供参考
bootstrap-demo
07-16
前端模板 默认 HTML5/CSS3/JavaScript 模板 使用的技术： IDE 配置 打开 Sublime 文本 选择首选项 -> 设置 - 默认 一个制表符被认为等于“tab_size”的空格数：2 设置为 true 以在按下 Tab 时插入空格 "translate_tabs_to_spaces": true 设置为 true 以在保存时删除尾随空格“trim_trailing_white_space_on_save”：true 设置为 true 以确保保存时文件的最后一行以换行符结尾 "ensure_newline_at_eof_on_save": true 安装 安装 Node.js 下载 安装时确保您具有管理员角色以设置 PATH 环境变量 安装咕噜声 打开命令行并运行 安装 npm install grunt-cli -g 发展 咕噜声 测试 咕噜声测试 释放
bootstrap简单demo
12-20
在“bootstrap简单demo”这个项目中，我们将深入理解Bootstrap的核心概念和基本用法，包括录播图、栅格系统以及响应式布局。 首先，让我们谈谈录播图（Carousel）。在Bootstrap中，录播图是一种展示图片或内容轮播...
bootstrap文件上传demo
11-30
其次，`Bootstrap`是流行的前端开发框架，它提供了丰富的UI组件和响应式设计，使得创建美观、易用的界面变得简单。在这个实例中，Bootstrap被用来构建文件上传的用户界面，包括样式和交互。例如，使用Bootstrap的`...
springboot+bootstrap的管理后台demo
08-12
1. **pom.xml**：Maven项目配置文件，定义了项目依赖，包括SpringBoot、SpringDataJPA、Thymeleaf模板引擎、Bootstrap、jQuery等。 2. **src/main/java**：包含主程序类、配置类以及业务逻辑处理类，SpringBoot的...
bootstrap-table-demo ( bootstraptable )
02-05
工作需要用到bootstrap-table（bootstrap table）。 网上找了例子参差不齐，实在不堪入目。 我只要最简单的例子，网上没有所需要的，只我自已整理一份了。 该demo包含5个可以运行的最基本的例子。 希望能得到像我这样的菜鸟点赞。
BootStrapTableDemo
06-05
该bootStrapDemo包含两种样式的表格，封装的表格具有增删改查的功能。一种表格是Datatable,另外一个表格是StuPersonInfo2。前台主要采用的html5+Css3+bootstrap+MVC，希望我写的小demo为大家省一些力气。
Bootstrap非常不错的Demo
07-30
Bootstrap非常不错的商业网站demo，有菜单显示和图片轮换等。
Bootstrap各种效果展示demo
04-11
开发中常用的效果和组件都包含，表格表单下拉菜单按钮组输入框组导航面板模态窗口弹出框警告框等，比较全的bootstrap代码演示
一款好用的基于bootstrap框架的demo
02-28
在最近两周,我学习了bootstrap前端开发框架来快速制作一个网页,以往自己用html,css等学习的网页知识来写一个网页,往往需要挺长的时间。这次用bootstrap写的这个demo...
2.7 bootstrapDemo
jiaguopeng的博客
01-30 383
2.7 bootstrapDemo 如果需要用到类似展示页面到官网查看 1 常用样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <script src="js/jquery-
bootstrap 标签页 demo
nayi_224的博客
02-13 705
引入文件 jquery-3.2.1.min.js bootstrap.css bootstrap.js 基本代码 &lt;ul class="nav nav-tabs" role="tablist"&gt; &lt;li role="presentation" class="active"&gt;&lt;a href="#home" role="tab&q
Bootstrap组件 demo
liuhui12345的博客
08-02 228
BootstrapDemo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>BootstrapDemo合集</title> <link rel="stylesheet" type="text/css" href="css/bootst...
bootstrap table 分页 demo
最新发布
10-18
Bootstrap Table是一个基于Bootstrap的表格插件，它提供了一套简单易用的表格展示和...通过以上步骤，就可以实现一个简单的Bootstrap Table分页的demo。可以根据实际需求修改和扩展代码，实现更多的功能和样式定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值