BootStrap每日自学

最新推荐文章于 2024-07-20 15:49:14 发布
最新推荐文章于 2024-07-20 15:49:14 发布
阅读量204 收藏
点赞数
分类专栏： 每日自学 文章标签： BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43589798/article/details/98635023
版权

一、入门

1.1 BootStrap简介
BootStrap 是Twitter的工程师开发的前端框架，可以非常方便的设计出好看的页面效果。
本章演示一些基本元素 使用 Bootstrap和不用的区别。
使用Bootstrap和不用的区别
演示按钮 输入框 下拉框等常见的组件，在原生html和Bootstrap的效果比较
同时还演示了几种html中没有的效果

1.2 Bootstrap如何使用
步骤一：
因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上

<!DOCTYPE html>

步骤 2 : 导入js 导入css
接着导入js和css
Bootstrap需要JQuery才能正常工作，所以需要导入jquery.min.js
接着是 Bootstrap的css，里面定义了各种样式
最后是 Bootstrap的js，用于产生交互效果，比如关闭警告框
注：顺序不要搞错了，否则有一些效果会出不来。
首先是JQuery
然后是Bootstrap css
最后是Bootstrap js

<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/bootstrap.min.js" ></script>

步骤 3 : 套用class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootStrap测试</title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		
	</head>
	<body>
		<button class="btn btn-success">按钮</button>
	</body>
</html>

二、基本样式
2.1 BootStrap按钮
按钮样式 可以用于
按钮元素
超链元素
按钮类型的input元素
提交类型的input元素
重置类型的input元素 

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BootStrap 按钮</title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	</head>
	<body>
		<center style="margin-top: 50px;">
		<button type="button" class="btn">原始按钮</button><br>
		<button type="button" class="btn btn-default">默认按钮</button><br>
		<button type="button" class="btn btn-primary">提交按钮</button><br>
		<button type="button" class="btn btn-success">成功按钮</button><br>
		<button type="button" class="btn btn-info">信息按钮</button><br>
		<button type="button" class="btn btn-warning">警告按钮</button><br>
		<button type="button" class="btn btn-danger">危险按钮</button><br>
		<button type="button" class="btn btn-link">链接按钮</button><br>
		<button type="button" class="btn btn-lg">大一点的按钮</button><br>
		<button type="button" class="btn btn-sm">小一点的按钮</button><br>
		<button type="button" class="btn btn-xs">更小的按钮</button><br>
		<button type="button" class="btn btn-block">宽屏按钮</button><br>
		<button type="button" class="btn active">激活按钮</button><br>
		<button type="button" class="btn disabled">无效按钮</button><br>
		<button type="button" class="btn disabled btn-danger">多个样式按钮</button><br>
		</center>
	</body>
</html>

2.2 BootStrap表格

Bootstrap 表格
头像名字HP
盖伦666
提莫69
阿卡丽500
基本表格
头像名字HP
盖伦666
提莫69
阿卡丽500
带斑马线的表格
头像名字HP
盖伦666
提莫69
阿卡丽500
带边框的表格
头像名字HP
盖伦666
提莫69
阿卡丽500
带鼠标悬停的表格
头像名字HP
盖伦666
提莫69
阿卡丽500
更紧凑的的表格
头像名字HP
盖伦666
提莫69
阿卡丽500
多个样式的表格
头像名字状态
盖伦选中
提莫成功
阿卡丽信息
阿卡丽警告
阿卡丽危险
带激活样式的表格

2.3 BootStrap图片

BootStrap 图片
这是圆角
这是圆形
这是缩略图

2.4 BootStrap表单
对输入元素使用form-control 可以去除阴影，边框附带淡蓝色，输入状态更加柔和

BootStrap 表单 
	<br>
	 
	<input type="password" class="form-control" value="password">
	<br>
	<textarea  class="form-control">文本域</textarea>
	<br>
	<select class="form-control">
	   <option>Java</option>
	   <option>Html</option>
	   <option>IOS</option>
	</select>
</body>

2.5 BootStrap文本

BootStrap 文本
muted-淡灰色，常用在说明性文字
primary-强调的文本，常用在需要强调的文字上
success-操作成功文本，进行了成功的行为后的提示文字
info-提示信息文本，一般用于指导性文字上
warning-警告文本，一般用于修改行为
danger-危险操作文本，一般用于删除行为

2.6 BootStrap背景

Bootstrap 背景

强调

操作成功

请输入姓名

警告语

本操作会导致服务器挂掉

2.7 BootStrap其他

BootStrap 其他 悬停可选中× 下拉
文字浮动到左边
文字浮动到右边
显示1
显示3 
</body>

2.8 BootStrap格栅
运用Bootstrap的栅格系统，可以做出像table那样定义多少行，多少列效果，但是又比table灵活。
运用Bootstrap的栅格系统，首选需要准备一个class=container的div
紧接着需要一个class=row的 div，表示行
再挨着的div，就是列了。
Bootstrap的栅格系统会默认把一行，分成12列。

BootStrap 格栅

三、组件
3.1 BootStrap字体图标

BootStrap 字体图标 原图标
原图标上绿色
原图标加链接
 按钮加图标

…
3.2 BootStrap下拉菜单

BootStrap 下拉列表
http://192.168.1.189
  • 静态页面(不可点击)
  • HTML
  • CSS
  • 动态页面(不可点击)
  • Javascript
  • AJAX
  • BootStrap(开发中)

3.2 BootStrap按钮组

BootStrap 按钮组
Html Css JS
按钮组
基础 中级 高级 
	<div class="btn-group" role="group" aria-label="web">
	  <button type="button" class="btn btn-default">Html</button>
	  <button type="button" class="btn btn-default">Css</button>
	  <button type="button" class="btn btn-default">JS</button>
	</div>
	 
	<div class="btn-group" role="group" aria-label="framework">
	  <button type="button" class="btn btn-default">Hiber</button>
	  <button type="button" class="btn btn-default">Struts</button>
	  <button type="button" class="btn btn-default">Spring</button>按钮工具组
	</div>
	</div>
	<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />
	<div class="btn-group btn-group-lg" role="group" aria-label="web">
	  <button type="button" class="btn btn-default">Html</button>
	  <button type="button" class="btn btn-default">Css</button>
	  <button type="button" class="btn btn-default">JS</button>
	</div>
	<br>
	 
	<div class="btn-group btn-group" role="group" aria-label="web">
	  <button type="button" class="btn btn-default">Html</button>
	  <button type="button" class="btn btn-default">Css</button>
	  <button type="button" class="btn btn-default">JS</button>
	</div>
	<br>
	<div class="btn-group btn-group-sm" role="group" aria-label="web">
	  <button type="button" class="btn btn-default">Html</button>
	  <button type="button" class="btn btn-default">Css</button>
	  <button type="button" class="btn btn-default">JS</button>
	</div>
	<br>
	<div class="btn-group btn-group-xs" role="group" aria-label="web">
	  <button type="button" class="btn btn-default">Html</button>
	  <button type="button" class="btn btn-default">Css</button>
	  <button type="button" class="btn btn-default">JS</button>
	</div>
	从大到小
	<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />
	<div class="btn-group-vertical" role="group" aria-label="web">
	  <button type="button" class="btn btn-default">Html</button>
	  <button type="button" class="btn btn-default">Css</button>
	  <button type="button" class="btn btn-default">JS</button>
	</div>
	垂直
	<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />
	<div class="btn-group" data-toggle="buttons">
	  <label class="btn btn-default active">
	    <input type="checkbox" >LOL(默认选中)
	  </label>
	  <label class="btn btn-default">
	    <input type="checkbox" > DOTA
	  </label>
	  <label class="btn btn-default">
	    <input type="checkbox" > WOW
	  </label>
	</div>
	复选框
	<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />
	<div class="btn-group" data-toggle="buttons">
	  <label class="btn btn-default active">
	    <input type="radio" >LOL(默认选中)
	  </label>
	  <label class="btn btn-default">
	    <input type="radio" > DOTA
	  </label>
	  <label class="btn btn-default">
	    <input type="radio" > WOW
	  </label>
	</div>
	单选框
	<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />
</body>

3.3 BootStrap按钮式下拉菜单

BootStrap 按钮下拉列表
Defalut
  • HTML
  • CSS
  • JavaScript
  • AJAX
primary 
	    <ul class="dropdown-menu" role="menu">
	      <li>
	         <a href="#">HTML</a>            
	      </li>
	      <li role="presentation">
	         <a href="#">CSS</a>             
	      </li>
	  
	      <li role="presentation">
	         <a href="#">Javascript</a>          
	      </li>
	      <li role="presentation">
	         <a href="#">AJAX</a>            
	      </li>
	    </ul>
	</div>   
	  
	<div class="btn-group">
	    <button type="button" class="btn btn-success dropdown-toggle "  data-toggle="dropdown">
	     success
	      <span class="caret"></span>         
	    </button>
	      
	    <ul class="dropdown-menu" role="menu">
	      <li>
	         <a href="#">HTML</a>            
	      </li>
	      <li role="presentation">
	         <a href="#">CSS</a>             
	      </li>
	  
	      <li role="presentation">
	         <a href="#">Javascript</a>          
	      </li>
	      <li role="presentation">
	         <a href="#">AJAX</a>            
	      </li>
	    </ul>
	</div>   
	  
	<div class="btn-group">
	    <button type="button" class="btn btn-info dropdown-toggle "  data-toggle="dropdown">
	     info
	      <span class="caret"></span>         
	    </button>
	      
	    <ul class="dropdown-menu" role="menu">
	      <li>
	         <a href="#">HTML</a>            
	      </li>
	      <li role="presentation">
	         <a href="#">CSS</a>             
	      </li>
	  
	      <li role="presentation">
	         <a href="#">Javascript</a>          
	      </li>
	      <li role="presentation">
	         <a href="#">AJAX</a>            
	      </li>
	    </ul>
	</div>   
	  
	<div class="btn-group">
	    <button type="button" class="btn btn-warning dropdown-toggle "  data-toggle="dropdown">
	     warning
	      <span class="caret"></span>         
	    </button>
	      
	    <ul class="dropdown-menu" role="menu">
	      <li>
	         <a href="#">HTML</a>            
	      </li>
	      <li role="presentation">
	         <a href="#">CSS</a>             
	      </li>
	  
	      <li role="presentation">
	         <a href="#">Javascript</a>          
	      </li>
	      <li role="presentation">
	         <a href="#">AJAX</a>            
	      </li>
	    </ul>
	</div>   
	  
	<div class="btn-group">
	    <button type="button" class="btn btn-danger dropdown-toggle "  data-toggle="dropdown">
	     danger
	      <span class="caret"></span>         
	    </button>
	      
	    <ul class="dropdown-menu" role="menu">
	      <li>
	         <a href="#">HTML</a>            
	      </li>
	      <li role="presentation">
	         <a href="#">CSS</a>             
	      </li>
	  
	      <li role="presentation">
	         <a href="#">Javascript</a>          
	      </li>
	      <li role="presentation">
	         <a href="#">AJAX</a>            
	      </li>
	    </ul>
	</div>   
</body>

未完待续。。。。。。
四、插件
4.1 模态窗体

一颗正在长高的大白菜
关注
专栏目录
2022网络安全技术自学路线图及职业选择方向
欢迎来到技术宅的博客
03-18 1万+
每天都有新闻报道描述着新技术对人们的生活和工作方式带来的巨大乃至压倒性影响。与此同时有关网络攻击和数据泄露的头条新闻也是日益频繁。 攻击者可谓无处不在：企业外部充斥着黑客、有组织的犯罪团体以及民族国家网络间谍，他们的能力和蛮横程度正日渐增长；企业内部是员工和承包商，无论有意与否，他们都可能是造成恶意或意外事件的罪魁祸首。 那作为一个零基础的小白，此时适合进入网络安全行业吗，它的就业前景怎么样，应该怎么选择适合自己的岗位？ 本文将针对这几个问题，逐一进行解答，希望能够对大家有帮助。 （友情提示，全文五
黑客（网络安全）自学
dexi113的博客
07-10 793
此教程为纯技术分享！本教程的目的决不是为那些怀有不良动机的人提供及技术支持！也不承担因为技术被滥用所产生的连带责任！本教程的目的在于最大限度地唤醒大家对网络安全的重视，并采取相应的安全措施，从而减少由网络安全而带来的经济损失。
自学BootStrap（第一季）
Cx的博客
01-15 536
BootStrap第一季 --------------------------------Class篇 自学BootStrap常用标签class总结： ------列表（有序列表ol、无序列表ul、自定义列表dl｛dt dd｝） ----------------无序列表ul/有序列表 去符号  class=“list-unstyled” -------------内联列表class="l
Bootstrap-个人学习笔记
时光乱了谁的心的博客
06-06 3569
Bootstrap-个人学习笔记 一、响应式网页 1、响应式网页概述：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。 三个特征：（1）流式布局（2）可伸缩的图片和字体（3）CSS3 Media Query 2、编写响应式网页 （1）设置viewport元标签<meta name="viewport" content="width=device-width,initial...
Bootstrap自学系列部分
huali_1995的博客
09-02 334
注：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。Bootstrap 教程 什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 特点： Bo
万字长文解析Bootstrap权威教程：从入门到精通逐步掌握前端开发框架
最新发布
科技改变人类，技术成就未来
07-20 1337
Bootstrap 是世界上最受欢迎的前端框架之一，由 Twitter 团队开发和开源。它使得开发响应式、移动优先的网站变得简单和快速。本文将为初学者提供一个全面的 Bootstrap 入门指南，覆盖从基本概念到高级功能，以及如何在实际项目中应用 Bootstrap。
bootstrap按钮的边框问题 去除
YUSIR 完美CODING世界
07-20 1万+
问题：  用bootstrap做的按钮，点击后，都会出现边框，请问如何去除？ .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; }还要去除阴影添加这个：box-shadow:
2022年零基础自学网络安全/Web安全，看这一篇就够了
欢迎来到技术宅的博客
03-09 4625
随手写写关于web安全的内容，希望对初次遇到web安全问题的同学提供帮助。
网络安全（黑客）—2024自学手册
S18374的博客
04-26 888
网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如 Web 安全技术，既有 Web 渗透，也有 Web 防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。
网络安全技术自学路线图及职业选择方向
bluemoon_0的博客
03-17 388
网络安全技术自学路线图及职业选择方向
Bootstrap样式
qq_44883796的博客
09-28 162
基本边框：   //无边框 //添加顶部边框 //添加右部边框 //添加底部边框 //添加左部边框 在一个空间上定义边框-删除或显示特定边框定义方法： //无边框//无边框//清除顶部边框//清除右部边框//清除底部边框//清除右部边框 关闭图标：  × 图像替换（使用图像替换class样式类，实现文字与背景图的替换） 使用 .text-hide class样或sass mixin来隐藏一个元素的文字内容并替换成背景图片。 Custom heading // Us
如何去掉bootstrap按钮边框
我的博客
05-11 623
如何去掉bootstrap按钮边框。
Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
weixin_30572613的博客
02-26 380
一,按钮 注意：虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。 框架中提供了基础按钮的例子: <button class="btn" type="button">基础按钮.btn</button> <button class="b...
bootstrap中按钮的蓝色边框怎么去除
weixin_45439010的博客
11-01 1480
在网上找了很久，都是说要去掉outline属性 但其实还有一个外阴影属性也要去除 代码如下 .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; box-shadow:none; } 这样以后就可以设置自己喜欢的样式啦 ...
input输入框的class为form-control时，去除蓝色边框
暗透了更能看到星光
08-07 1429
input输入框的class为form-control时，去除蓝色边框 input.form-control:focus{ outline: none; box-shadow: none; border-color: #888888; } selectpicker多选框class为form-control时，去除蓝色边框 .bootstrap-sel...
Bootstrap表单的使用
Debug的博客
02-26 2642
HTML中表单是网页和应用程序不可缺少的一部分，Bootstrap通过预定义的类极大的简化了表单组件的样式及使用方式。
bootstrap 按钮去掉点击时候出现的边框
业余前端的职业经历
01-20 4059
.btn:focus{ box-shadow:none!important; } 其实那个点击时候出来的是边框阴影 那我们就在这里顺便复习一下 box-shadow 是给元素 加阴影的是css3新增的特性 语法:box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需的。水平阴影的位置。允...
Bootstrap系列之按钮（Buttons）
热门推荐
老__L的博客
05-28 1万+
按钮（Buttons）
去除bootstrap中点击按钮，按钮会显示边框样式
chenmin_test的博客
03-08 6831
去除bootstrap中点击按钮，按钮会显示边框样式 废话不多说，直接上代码 .btn:hover, .btn:focus { outline: none; } 只要把上面的代码复制到你的css中就可以了，是不是很简单。 ...
Bootstrap入门指南
"Bootstrap1111 - Bootstrap官方文档" Bootstrap是世界上最受欢迎的前端开发框架之一，由Twitter的开发者创建并开源。它提供了一系列预先设计的CSS和JavaScript组件，用于快速构建响应式、移动优先的网页。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值