bootstrap简单的页面Demo1

最新推荐文章于 2023-03-27 19:51:21 发布
最新推荐文章于 2023-03-27 19:51:21 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： bootstrap 文章标签： bootstrap bootstrap页面 bootstrap-Demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011175410/article/details/25141145
版权 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="images/bkb-180.jpg">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ }
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
    	<div class="container">
        	<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            	<span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Bokebi</a>
            <div class="nav-collapse collapse">
            	<ul class="nav">
                	<li class="active"><a href="#">首页</a></li>
                	<li><a href="#">冠体</a></li>
                	<li><a href="#">需求</a></li>
                	<li><a href="#">发布冠体</a></li>
                	<li><a href="#">发布需求</a></li>
                    <li class="dropdown">
                    	<a class="dropdown-toggle" data-toggle="dropdown" href="#">更多 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                        	<li><a href="#">关于我们</a></li>
                        	<li><a href="#">联系我们</a></li>
                        	<li><a href="#">留言反馈</a></li>
                        	<li><a href="#">沙哟拉拉</a></li>
                            <li class="divider"></li>
                            <li><a href="#">真没有了</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form pull-right" action="">
                	<input class="span2" type="text" name="" id="" placeholder="用户名">
                    <input class="span2" type="password" name="" id="" placeholder="密码">
                    <button type="submit" class="btn btn-danger">登录</button>
                </form>
            </div>
        </div>
    </div>
</div>


	<div class="container">
      <div class="hero-unit">
      	<h1>Hello,TT！</h1>
        	<p>这是一段文字内容，死定了父级死定了父级的，的房间了时间的法律纠纷是，的房间数量空间弗雷德，水电费是否是的是到了福建市领导父级，方式来地方吉林市的房间数量京东方失联客机。</p>
            <p><a class="btn btn-large btn-danger" href="#">查看更多 »</a></p>
      </div>
      
      <div class="row">
      	<div class="span4">
        	<h2>这是一个标题</h2>
            <p>这是是标题里面的相关内容，死了的方了的房价的路口附近，看见斯洛伐克，是的分类时间了附件是浪费捡垃圾，史蒂夫史蒂夫了空间垃圾垃圾垃圾死垃圾的分类是控件。</p>
            <p><a href="" class="btn">产看更多 »</a></p>
        </div>
      	<div class="span4">
        	<h2>这是一个标题</h2>
            <p>这是是标题里面的相关内容，死了的方了的房价的路口附近，看见斯洛伐克，是的分类时间了附件是浪费捡垃圾，史蒂夫史蒂夫了空间垃圾垃圾垃圾死垃圾的分类是控件。</p>
            <p><a href="" class="btn">产看更多 »</a></p>
        </div>
      	<div class="span4">
        	<h2>这是一个标题</h2>
            <p>这是是标题里面的相关内容，死了的方了的房价的路口附近，看见斯洛伐克，是的分类时间了附件是浪费捡垃圾，史蒂夫史蒂夫了空间垃圾垃圾垃圾死垃圾的分类是控件。</p>
            <p><a href="" class="btn">产看更多 »</a></p>
        </div>
      </div>
    </div>
    
    <div class="container">
    	<hr>
      <footer>
        <p>&copy;Bokebi 2014</p>
      </footer>
    </div>


<script src="js/jquery-1.10.2.min.js"></script> 
<script src="js/bootstrap.js"></script> 

</body>
</html>

预览图片：

波克比520
关注
专栏目录
bootstrap完整Demo
01-08
bootstrap完整Demo。 BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。 它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现。所以，可以用他来开发适合各种设备浏览的页面，避免了大量的因为兼容性而导致的重复劳动。 它的最新版本是4.0，国内目前用的较多的是3.x,我们的教程也基于BootStrap3.x版本，也是目前最受欢迎的前端框架之一。 你可以使用默认的BootStrap样式和组件，你也可以对代码简洁。
使用Bootstrap的栅格布局实现一个简单的demo(1)
最新发布
2401_84092903的博客
04-14 637
(current)aria-expanded=“false”>特点IndicatorsControlsPreviousNext三列图。
Bootstrap简单Demo（2015年05月-18日）
dizhouna1906的博客
05-27 145
Bootstrap的简单使用 1、Bootstrap是什么？ 这是Bootstrap官网上对它的描述：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目 2、Bootstrap的使用需求 1.Bootstrap是一个快速开发Web应用程序的前端框架，并且有丰富的组件、插件，可以用于我们快速开发出用户友好的WEB界面 2.支持移...
bootstrap框架demo_入门Leaflet之小Demo
weixin_39980347的博客
11-28 321
入门 Leaflet 之小 Demo 写在前面 ---- WebGIS 开发基础之 LeafletGIS 基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates；GIS 开发概述：架构模式、常用平台和 SDK、二维三维 使用 Leaflet ...
框架 - Bootstrap
Qianmoer的博客
12-19 272
框架 - Bootstrap
Bootstrap入门Demo——制作路径导航栏
我们的征途是星辰大海
12-15 4783
今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面，感觉挺好看，然后去官网看了下组件，发现都挺漂亮的，然后看到了路径导航栏，刚好要做这个东西，然后就下了Bootstrap的源码看了看。    一，源码文件简介                                 下载完源码之后，我们肯定是想着先把源码中的Demo先运行下看看，但是，看着这
使用Bootstrap的栅格布局实现一个简单的demo
Amelian的博客
11-20 549
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个me
bootstrap简单demo
12-20
在“bootstrap简单demo”这个项目中，我们将深入理解Bootstrap的核心概念和基本用法，包括录播图、栅格系统以及响应式布局。 首先，让我们谈谈录播图（Carousel）。在Bootstrap中，录播图是一种展示图片或内容轮播...
bootstrap-demo
11-18
1. **网格系统**：Bootstrap的网格系统基于12列布局，允许开发者轻松创建响应式的页面布局。通过类如`.container`、`.row`和`.col-sm-*, .col-md-*, .col-lg-*`等，可以实现不同屏幕尺寸下的内容排列。 2. **预定义...
bootstrap4_apidemo_DEMO_bootstrap_
10-03
1. **网格系统**：Bootstrap 4的网格系统基于12列布局，支持响应式断点，使页面在不同设备上都能自适应展示。通过使用`.container`、`.row`和`.col-*-*`类，你可以轻松创建灵活的布局。 2. **排版**：Bootstrap 4...
Bootstrap布局的网站首页DEMO
10-03
用bootstrap前端框架搭建的简洁风格网站首页。框架首页：http://www.bootcss.com/
bootstrap 响应式网页demo
01-09
bootstrap 响应式网页demo bootstrap 响应式网页demo源码 一共四个demo，可供参考
bootstrap-table-demo
03-25
2. **分页**：Bootstrap Table 提供了内置的分页功能，允许用户通过导航按钮或输入框切换页面，从而改善大量数据的浏览体验。分页设置可以通过`pagination`选项进行配置，如每页显示的条目数、是否显示页码等。 3. ...
Spring Boot+Bootstrap开发小而完整web项目
10-14
跟着本课程Demo完整的动手写一次，会发现你已经可以直接利用Spring Boot上手中小型web项目了。  Spring Boot框架是现在比较热门的微服务框架，很多软件公司都在使用，本课程涵盖Spring Boot和Bootstrap较为多面的知识点，针对Spring Boot开发web项目中每个阶段的关键内容和痛点，一步步进行条理清晰的讲解，学员在听课过程中建立起自己较为完备的前端、后端知识体系，具备较好的项目开展能力和自信。 课程特点是不炫技、条理清晰、生动浅显、化繁为简，每个章节都会围绕Spring Boot、Bootstrap的知识点“是什么、有什么用、怎么用”展开，并根据精心准备的简洁清晰的示例进行讲解。   学完该套课程后，可以很快上手Spring Boot实战开发，一个人就能完成一个基于Spring Boot+Bootstrap的完整WEB项目！  
bootstrap 开源框架demo_接私活，赚外快，你需要这几个开源项目
weixin_39638188的博客
11-29 717
点击上方蓝色字体，关注我们秋瓷炫：老公，下辈子，你还会不会和我结婚？于晓光：先涨零花钱再说。都没零花钱了，还谈什么下辈子。发工资啦！瞬间富裕了，有没有？我决定买包好烟，抽上两口；狐朋狗友路边烧烤，喝杯小酒；心仪的耳机键盘，走一个……可现实是这样的。老婆：老公，交工资了。老公：好的，可以给点零花钱不？老婆：可以，一个男的兜里不能没钱。我准备以后把你的工资分成两份，一人一半。一人一半，我的工...
【Bootstrap】Bootstrap环境搭建及demo
qq_41604569的博客
03-27 2352
Bootstrap是一个流行的开源前端框架，可以用于快速构建现代化、响应式的网站和Web应用程序。以下是一个简单的示例，演示如何使用Bootstrap构建一个基本的网页。从官网https://getbootstrap.com/下载最新版本的Bootstrap，然后将下载的文件解压缩到本地计算机上的一个目录中。在HTML文件中引入Bootstrap的样式表和脚本，以便使用Bootstrap提供的样式和功能。下面是一个简单的示例，演示如何使用Bootstrap搭建一个基本的网页。是jQuery库文件，
bootstrap系列-1.简单的Demo
cdc8596的博客
08-17 476
bootStrap系列讲解
BootStrap实现带有增删改查功能的表格(DEMO详解)
lgxzzz的博客
08-20 3994
前言 bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。 表格封装了3个版本，接下来给大家展示一下样式和代码。 版本一 1. 样式 表格布局： 添加：添加一行新的空白代码 修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。 2.代码
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、付费专栏及课程。

余额充值