Bootstrap

最新推荐文章于 2024-08-22 17:38:39 发布
最新推荐文章于 2024-08-22 17:38:39 发布
阅读量24 收藏
点赞数
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luna_H/article/details/134148682
版权

input-group输入框组 

input-group-btn添加额外的按钮


input-group-addon添加额外的符号

nav nav-tabs 添加为导航

 active激活状态

nav-pills设置胶囊状

nav-stacked垂直导航

nav标签 设置导航条

navbar-default导航条默认颜色

navbar-header导航条头部

navbar-brand导航条头部文字的样式

icon-bar面包屑

data-toggle="collapse"导航条功能

data-target="#aa"绑定子导航栏

navbar-toggle导航条头部图标位置

collapse隐藏 

avbar-fixed-top固定导航条在顶部


navbar-fixed-bottom固定导航条在底部

navbar-inverse导航条反色

navbar-form导航条中表单

navbar-right|left 导航条中的浮动 大于等于768才生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<title></title>
	</head>
	<body style="height: 2000px;">
		<!-- input-group输入框组 -->
		<div class="input-group input-group-lg">
		  <span class="input-group-addon" id="basic-addon1">@</span>
		  <input type="text" class="form-control" placeholder="Username">
		</div>
		<div class="input-group">
		  <span class="input-group-addon" id="basic-addon1">@</span>
		  <input type="text" class="form-control" placeholder="Username">
		</div>
		<div class="input-group input-group-sm">
		  <span class="input-group-addon" id="basic-addon1">@</span>
		  <input type="text" class="form-control" placeholder="Username">
		</div>
		<div class="row">
			<div class="col-lg-3">
			  <div class="input-group">
			    <span class="input-group-addon">
			      <input type="checkbox" aria-label="...">
			    </span>
			    <input type="text" class="form-control" aria-label="...">
			  </div><!-- /input-group -->
			</div><!-- /.col-lg-6 -->
		  <div class="col-lg-3">
		    <div class="input-group">
				<!-- input-group-btn添加额外的按钮
				 input-group-addon添加额外的符号-->
		      <span class="input-group-btn">
				  <button class="btn btn-success" type="button">按钮</button>
		      </span>
		      <input type="text" class="form-control" aria-label="...">
		    </div><!-- /input-group -->
		  </div><!-- /.col-lg-6 -->
		  <div class="col-lg-3">
		    <div class="input-group">
		      <span class="input-group-addon">
		        <input type="radio" name="a">
		      </span>
		      <input type="text" class="form-control" aria-label="...">
		    </div><!-- /input-group -->
		  </div><!-- /.col-lg-6 -->
		  <div class="col-lg-3">
		    <div class="input-group">
		      <span class="input-group-addon">
		        <input type="radio" name="a">
		      </span>
		      <input type="text" class="form-control" aria-label="...">
		    </div><!-- /input-group -->
		  </div><!-- /.col-lg-6 -->
		</div><!-- /.row -->
		<div class="row">
			<div class="input-group">
				<span class="input-group-btn">
					<button class="btn btn-default dropdown-toggle"
					 data-toggle="dropdown" type="button">
					 下拉
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li>1111</li>
						<li>1111</li>
						<li>1111</li>
					</ul>
				</span>
				<input type="text" class="form-control" name="" id="" value="" />
			</div>
		</div>
		<hr >
		<!-- nav nav-tabs 添加为导航-->
		<!-- active激活状态 -->
		<!-- nav-pills设置胶囊状 -->
		<!-- nav-stacked垂直导航 -->
		<ul class="nav nav-tabs">
		  <li class=""><a href="#">Home</a></li>
		  <li class="active"><a href="#">Profile</a></li>
		  <li><a href="#">Messages</a></li>
		</ul>
		<ul class="nav nav-tabs nav-justified">
		  <li class=""><a href="#">Home</a></li>
		  <li class="active"><a href="#">Profile</a></li>
		  <li><a href="#">Messages</a></li>
		</ul>
		<ul class="nav nav-tabs nav-pills nav-stacked">
		  <li class="disabled"><a href="#">Home</a></li>
		  <li class="active"><a href="#">Profile</a></li>
		  <li>
			  <a class="btn btn-default dropdown-toggle" 
			   data-toggle="dropdown" href="#">
				  Messages
				  <span class="caret"></span>
			  </a>
			  <ul class="dropdown-menu btn-block">
			  	<li><a href="">111</a></li>
				<li><a href="">222</a></li>
			  </ul>
		  </li>
		</ul>
		<hr >
		<!-- nav标签 设置导航条 -->
		<!-- navbar-default导航条默认颜色 -->
		<!-- navbar-header导航条头部 -->
		<!-- navbar-brand导航条头部文字的样式 -->
		<!-- icon-bar面包屑 -->
		<!-- data-toggle="collapse"导航条功能 -->
		<!-- data-target="#aa"绑定子导航栏 -->
		<!-- navbar-toggle导航条头部图标位置 -->
		<!-- collapse隐藏 -->
		<!-- navbar-fixed-top固定导航条在顶部
		 navbar-fixed-bottom固定导航条在底部-->
		 <!-- navbar-inverse导航条反色 -->
		<nav class="navbar navbar-default navbar-inverse">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle" 
			  data-toggle="collapse" data-target="#aa"
			   >
		        <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="#">
				  <!-- 菜单 -->
				  <img src="../jq代码/zysy/zhonnanya.png" >
			  </a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="aa">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">Link</a></li>
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown"
				   role="button" aria-haspopup="true" 
				   aria-expanded="false">Dropdown <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">Action</a></li>
		            <li><a href="#">Another action</a></li>
		            <li><a href="#">Something else here</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">Separated link</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">One more separated link</a></li>
		          </ul>
		        </li>
		      </ul>
			  <button type="button" class="btn btn-default navbar-btn">Sign in</button>
			  <p class="navbar-text">Signed in as Mark Otto</p>
			  <!-- navbar-form导航条中表单 -->
			  <!-- navbar-right|left 导航条中的浮动 大于等于768才生效-->
		      <form class="navbar-form navbar-right">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Search">
		        </div>
		        <button type="submit" class="btn btn-default">Submit</button>
		      </form>
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="#">Link</a></li>
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">Action</a></li>
		            <li><a href="#">Another action</a></li>
		            <li><a href="#">Something else here</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">Separated link</a></li>
		          </ul>
		        </li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
	</body>
	<script src="../../bootstrap-3.3.7-dist/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>

77不吃香菜.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bootstrap使用
m0_57774967的博客
04-24 5166
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
Bootstrap简介
归兮的博客
08-18 8928
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1782
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
bootstrap datetimepicker
lishuaigell的博客
05-17 5376
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap网页作业
m0_62221227的博客
04-19 5042
bootstrap网页作业
Bootstrap educoder
qq_46675545的博客
06-12 3701
Bootstrap Bootstrap入门
Bootstrap基础知识
li_peng_yuan的博客
11-14 5164
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
Bootstrap 颜色
书香水墨
07-25 4665
一、Bootstrap 颜色 1.1 基本颜色 Bootstrap4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: <di...
Bootstrap自适应
weixin_44112242的博客
04-04 9069
Bootstrap是基于HTML.css.javaScript开发的简洁,直观,强悍的前端开发框架,使web开发跟家快捷 能制作响应式网页. bootstrap自适应: Bootstrap根据屏幕大小吧设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列 对应屏幕宽度为: 超小屏幕(手机):0-768px 对应设置 class=col-xs-number 小屏幕(平板):768-...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
bootstrap旅游网站
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
前端开发攻略---在Vue3项目中修改Element-Plus主题色
最新发布
nibabaoo的博客
08-22 218
在Vue3项目中修改Element-Plus主题色
【js】各类前端输入校验方法
galaxyJING的博客
08-21 358
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 291
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 525
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
bootstrap
06-01
, int size) { this.name = name; this.color = color; this.size = size; } public String getName() { return name;...Bootstrap最初由Twitter的前端工程师开发，现已成为最流行的前端框架之一。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值