bootstrap 简单网页代码

最新推荐文章于 2024-06-04 12:52:41 发布
最新推荐文章于 2024-06-04 12:52:41 发布
阅读量4.7k 收藏 13
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuiyuehaha/article/details/20378677
版权
在网络项目中引入bootstrap的必须的css和js文件，同时由于bootstrap需要jquery的支持，所以必须引入jquery的js文件
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

  <script src="js/jquery-2.1.0.js"> </ SCRIPT>
  <script src="js/jquery-2.1.0.min.js"> </ SCRIPT>
  <脚本的src =“JS /引导。min.js“> </ SCRIPT>
  <script src="js/bootstrap.js"> </ SCRIPT>

或者链接到网上的引导程序的库 

<！DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>引导101模板</ TITLE>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    < - 引导 - >
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    < - ！HTML5的垫片和Respond.js IE8支持HTML5元素和媒体查询 - >
    < - ！警告：如果你通过文件浏览页面Respond.js不起作用:/ /  - >
    < - ！[如果LT IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"> </ SCRIPT>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"> </ SCRIPT>
    <[ENDIF]  - >
  </ HEAD>
  <BODY>
  
  
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button TYPE="BUTTON" class="navbar-toggle" data-toggle="c​​ollapse" data-target=".navbar-collapse">
            <span class="sr-only">切换导航</ SPAN>
            <span class="icon-bar"> </ SPAN>
            <span class="icon-bar"> </ SPAN>
            <span class="icon-bar"> </ SPAN>
          </按钮>
          <a class="navbar-brand" HREF="#">项目名称</ A>
        </ DIV>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"> <a HREF="#">首页</ a> </ LI>
            <LI> <a href="#about">关于</ a> </ LI>
            <LI> <a href="#contact">与</ A> </ LI>
          </ UL>
        </ DIV> <--/.nav-collapse  - >
      </ DIV>
    </ DIV>
  
   
  <div class="container">  
    <div class="row">  
      <div class="span12">  
        <p class="lead">张斌经验分享小站</ P>  
      </ DIV>  
    </ DIV>  
    <div class="row">  
      <div class="span12">  
        <table class="table table-hover">  
          <THEAD>  
            <TR>  
              <TH>编号ID </次>  
              <TH>描述DESC </次>  
              <TH>状态STATUS </次>  
              <TH>动作ACTION </次>  
            </ TR>  
          </ THEAD>  
          <TBODY>  
            <TR>  
              <TD> 1 </ TD>  
              <TD> RPi.PCF8574.IO0 </ TD>  
              <TD> ON </ TD>  
              <TD>行动</ TD>  
            </ TR>  
            <TR>  
              <TD> 2 </ TD>  
              <TD> RPi.PCF8574.IO1 </ TD>  
              <TD>关闭</ TD>  
              <TD>行动</ TD>  
            </ TR>  
          </ TBODY>  
        </ TABLE>  
      </ DIV>  
    </ DIV>  
    <div class="row">  
      <div class="span12">  
        <p class="text-right lead">邮件我</ P>  
        <p class="text-right lead">  
          的<em>邮箱：xxxx@126.com </ em>的  
        </ P>  
      </ DIV>  
    </ DIV>  
  </ DIV>  
   
   
   
   
   

    < - ！的jQuery（需要引导的JavaScript的插件） - >
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> </ SCRIPT>
    < - ！包括所有编译插件（下同），或包括个别文件需要 - >
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"> </ SCRIPT>
  </ BODY>
</ HTML>

显示效果 


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
  
  
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>
  
   
  <div class="jumbotron">
    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
        
           <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
        
           <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
      </div>

      <hr>

     
    </div> <!-- /container -->
   </div>
    <hr>

      <footer>
        <p>© Company 2013</p>
      </footer>
   
   
   

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>


显示效果：



堤岸小跑hi
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用BootStrap制作网页页面
m0_65725031的博客
05-05 9072
今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。 BootStrap的基本使用 在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。 我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。 BootStrap实操 将我...
bootstrap3.4.1源代码,bootstrap
06-16
Bootstrap 3.4.1是该框架的一个稳定版本，它提供了丰富的预定义样式、组件和JavaScript插件，大大简化了网页设计和开发过程。下面我们将深入探讨Bootstrap 3.4.1中的关键知识点。 一、网格系统 Bootstrap 3.4.1的...
Bootstrap简单网页制作
热门推荐
qq_42072733的博客
07-25 3万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个...
大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品 (3)
有问必答，欢迎打扰，项目开发，网页设计
06-04 789
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀
2.4 Bootstrap 代码
梁辰兴的博客
07-02 323
请确保当您使用 和 标签时，开始和结束标签使用了。
bootstrap轮播图代码
哈哈
04-11 2026
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="st
大学生网页设计作业bootstrap网页模板网页源代码html源代码
m0_69931255的博客
05-16 711
少css，纯手敲的bootstrap网页设计--《宠物商城》，以购物商城为主题，基于bootstrap框架，有响应式（电脑端，平板端，手机端都可适应）。利用bootstrap栅格系统布局，常见组件🈶折叠导航，轮播图，列表，面板，表单，表单验证等。8个页面：首页，宠物出售，宠物科普，宠物用品，宠物周边。页面之间可相互跳转。🥇dw、hb、vs、idea等软件都可打开可运行，图片蚊子可修改替换。👀源码➕所用素材都有。大学生课堂作业期末大作业毕业设计可用可参考！页面简单，代码很少，符合初学者创作水平。
Bootstrap的咖啡网站实例代码阅读笔记
昊虹AI笔记
10-27 667
Bootstrap的咖啡网站实例代码阅读笔记
！！！利用BootstrapUI写出的网页，（方便快捷的写网页方法）简单易学
NanCheng_666的博客
07-24 152
代码：
Bootstrap响应式食饮类网页制作
Huisoul的博客
09-29 1万+
一、BootStrap介绍 1、知识点概述 Bootstrap是由Twitter（著名的社交网站）推出的前端开源工具包，它基于 HTML、CSS、JavaScript 等前端技术，2011 年8月在 GitHub 上发布，一经推出颇受欢迎。在本书编著时Bootstrap的最新版本是3.3.6。 Bootstrap中预定义了一套CSS样式，和与样式对应的jQuery（jQuery是一个快速、小巧、功能丰富的JavaScript库）代码，应用时我们只需提供固定的HTML结构，添加Bootstrap中提供的cla
bootstrap前端HTML代码
01-18
通过研究和实践这个压缩包中的HTML和CSS代码，你可以熟悉Bootstrap的基本结构，学习如何组合和定制组件，从而提高前端开发效率，创建出美观且功能完善的网页。此外，对于初学者来说，这是一个很好的实践平台，而对于...
Bootstrap模板示例代码.rar
06-07
附件是一个简单的Bootstrap模板示例代码，它展示了一个基本的网页结构，包括导航栏、一个带有标题和段落的容器以及一个简单的脚注。 这段代码使用了Bootstrap 5的样式和组件。它包括： 一个响应式的导航栏，带有...
创意bootstrap列表布局代码
07-24
首先，Bootstrap的核心在于其栅格系统，它允许我们通过简单的类名控制元素的排列方式，以适应不同屏幕尺寸。在列表布局中，我们可以利用这一特性调整列表项在手机、平板和桌面设备上的展示方式，确保内容在任何设备...
基于Bootstrap贪吃蛇游戏代码
06-24
通过阅读和理解这些代码，开发者可以学习到如何将Bootstrap与原生JavaScript结合，以及如何设计和实现一个简单的游戏应用。 总结来说，"基于Bootstrap贪吃蛇游戏代码"是一个很好的学习资源，它将帮助开发者深入理解...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
bootstrap网页设计代码作业
06-10
好的，下面是一个简单的 bootstrap 网页设计代码示例： ```html <!DOCTYPE html> <title>Bootstrap Example , initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值