BootStrap框架

最新推荐文章于 2021-01-09 20:49:53 发布

Zm1225_

最新推荐文章于 2021-01-09 20:49:53 发布

阅读量324

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Zm1225_/article/details/79871843

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、BootStrap介绍

1.简介
BootStrap是当前比较流行的CSS框架之一，他是Twitter推出的一个用于前端开发的开源工具包。
2.为什么要学习BootStrap
(1)企业开发多使用某种CSS框架，其中以BootStrap为目前使用居多
(2)本课程后面的web界面为了统一将使用bootstrap作为统一的前端框架

(3)有利于学习和理解其它框架

eg：第一个BootStrap程序

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap_01</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
	<div class="container">
	<div class="row">
	<div class="col-md-3" style="background-color: red">col-md-3</div>
	<div class="col-md-9" style="background-color: yellow">col-md-9</div>
	</div>
</div>
</body>
</html>

二、BootStrap基本样式-栅格

12列的布局介绍

1、栅格基本使用方式：

使用.container（ 1170 px）或container-fluid包裹
列应当包含在行”row”中
列的基本格式： (col-屏幕大小-数字）
<div class="container">
     <div class="row">
      <div class="col-md-3" style="background-color: #ddd">col-3</div>
      <div class="col-md-9" style="background-color: red">col-9</div>

</div> </div>

2、栅格基本使用方式（二）

(1)当一列多于12列时会自动换行

(2)列偏移

.col-md-offset-n：向右偏移N列

(3)嵌套列

在一个col下再使用row产生一个或多个行

3、排版

(1)基本HTML标签样式

h1-h6、p、strong、mark、del

(2)文本对齐

text-left、text-right、text-center、text-nowrap（文本不换行）

(3)列表

list-unstyled：去掉标记

list-inline：列表项显示在一行

三、表格样式

1、Table:基本样式
table-striped：条纹表格
table-bordered：带边框表格
table-hover：鼠标悬停
table-condensed：紧缩表格
2、状态类，可以给单元格设置颜色：
.active
.success
.info
.warning
.danger
3、响应式表格：table-responsive

四、表单样式

1、表单基本样式
Form-control:表单元素的宽度属性为100%
input-group：表单分组（使用表单分组时无需添加row)
checkbox-inline：在一行显示checkbox
Radio-inline:在一行显示radio
Disabled:禁用
Readonly:只读
.has-warning、.has-error 或 .has-success：表单校验
添加图标： has-feedback
控件尺寸：input-lg ,input-sm
表单其他样式：
Form-inline：内联表单

form-horizontal: 水平标签

2、按钮
Btn:显示为一个按钮，用于button元素或其它元素
颜色： btn-default， btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link
尺寸： btn-lg，btn-sm,btn-xs,btn-block
Disabled:禁用
图片
响应式图片： img-responsive
图片形状： img-rounded， img-circle， img-thumbnail

<!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"/>
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
	<table class="table table-responsive">
	<tr>
	<th>学生</th>
	<th>姓名</th>
	<th>年龄</th>
	<th>成绩</th>
	</tr>
	<tr>
	<td class="success">aa</td>
	<td class="info">11</td>
	<td class="warning">aa</td>
	<td class="danger">11</td>
	</tr>
	<tr>
	<td class="active">aa</td>
	<td>11</td>
	<td>aa</td>
	<td>11</td>
	</tr>
	<tr>
	<td>aa</td>
	<td>11</td>
	<td>aa</td>
	<td class="bg-info">11</td>
	</tr>
	</table>
</div>
<div class="col-md-12">
<form name="form1" role="form" class="form-inline" >
<div class="form-group">
<label for="name" class="text-danger">姓名</label>
<input type="text" id="name" class="form-control" value="1" />
</div>
<div class="form-group">
<label for="mima">密码:</label>
<input type="password" id="mima" class="form-control" value="1"/>
</div>
<button  type="button" class="btn btn-default">保存</button>
</form>
</div>
</div>
</div>
</body>
</html>

五、辅助工具

1、颜色

(1)文字颜色
text-muted
text-primary
text-success
text-info
text-warning
text-danger
(2)背景颜色
bg-muted
bg-primary
bg-success
bg-info
bg-warning
bg-danger

2、位置

(1)浮动
pull-xx: right:xxx%
push-xx：left: xxx%
clearfix
(2)内容居中
center-block
(3)显示或隐藏
show
hidden
(4)响应式工具
visible-xs-* 可见
hidden-xs 隐藏

六、BootStrap组件

1、下拉菜单

dropdown

dropdown-menu

dropdown-header：不可点击的菜单

<!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"/>
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>	
<![endif]-->

<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<title>下拉菜单</title>
</head>
<body>
	<div class="container">
	<div class="row">
	<div class="col-md-8">
	<div class="dropdown">
        <button type="button" class="btn btn-default" data-toggle="dropdown">下拉菜单
         <span class="caret"></span></button>
 			<ul class="dropdown-menu">
				<li><a href="aa">菜单1</a></li>
				<li><a href="aa">菜单2</a></li>
				<li><a href="aa">菜单3</a></li>
 			</ul>
	</div>
	</div>
	<div class="col-md-12">
	<div class="button-group">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
	</div>
	</div>
	</div>
	</div>
</body>
</html>

2、按钮组

button-group

btn-group-vertical：垂直排列

3、导航

nav

nav-tabs：标签式导航

nav-pills：胶囊式导航

4、导航条
navbar
navbar-brand：品牌图标
navbar-btn：导航按钮
navbar-text:导航文本
navbar-left/navbar-right:元素居左/居右
navbar-fixed-top：固定在顶部
navbar-fixed-bottom：固定在底部
navbar-default：反色

<!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"/>
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>	
<![endif]-->

<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<title>导航栏</title>
</head>
<body>
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
	   <div class="navbar-header">
	       <a class="navbar-brand">网站名称</a>
	       </div>
	       <ul class="nav navbar-nav">
              <li><a href="#">首页</a></li>
               <li><a href="#">公司简介</a></li>
               <li class="dropdown">
                  <a href="#" data-toggle="dropdown">
                  产品列表
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="#">产品1</a></li>
                    <li><a href="#">产品2</a></li>
                  </ul>
              </li>
	       </ul>
	       <form class="navbar-form navbar-left">
	         <input type="text" name="name" class="form-control" placeholder="请输入关键字" />
	         <button type="button" class="btn btn-default">搜素</button>
	       </form>
	    <ul class="nav navbar-nav navbar-right">
	      <li><a href="#">登录</a></li>
	    </ul>
	     </div>
	  </div>
	</nav>
</body>
</html>

分页
Pagination：
路径导航
Breadcrumb：
标签
Label
label-default
label-primary
label-success
label-info
label-warning
label-danger
徽章
badge
巨幕
jumbotron ：
缩略图
thumbnail ：
列表
list-group：
list-group-item:列表项
list-group-item-heading
list-group-item-text
面板
Panel
panel-heading
panel-title
panel-body：
panel-footer
panel-primary
panel-success
panel-info
panel-warning
panel-danger
Panel和其它元素的组合

七、JavaScript插件

模态框
下拉菜单
滚动监听
标签页
工具提示
弹出框
手风琴组件
图片轮播组件

1、模态框

data方式调用
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
js方式调用
$('#myModal').modal(options)

2、标签页

data方式调用
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
js方式调用
$('#someTab').tab('show')
事件
show.bs.tab 显示前触发（2）
shown.bs.tab 显示后触发（4）
hide.bs.tab 隐藏前触发（1）
hidden.bs.tab 隐藏后触发（3）

3、轮播图

data方式调用
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"></div>
js方式调用
$('.carousel').carousel()

Zm1225_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap框架

一、BootStrap介绍1.简介BootStrap是当前比较流行的CSS框架之一，他是Twitter推出的一个用于前端开发的开源工具包。2.为什么要学习BootStrap(1)企业开发多使用某种CSS框架，其中以BootStrap为目前使用居多(2)本课程后面的web界面为了统一将使用bootstrap作为统一的前端框架(3)有利于学习和理解其它框架eg：第一个BootStrap程序&lt;!D...
复制链接

扫一扫

专栏目录