您的位置：首页 > Web前端 > BootStrap

BootStrap每日自学

2019-08-06 17:15 148 查看
版权声明：本文为博主原创文章，遵循 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 模态窗体

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航