BootStrap
2、组件
BootStrap
- css
- js
学习 BootStrap 规则
-
一、响应式
@media 在以下目录新建s3.html:
-
目的/我想设置一种效果,当屏幕小于或大于多少时,让某个值生效/
image.png s3.html 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--stytle-->
<style>
.c1{
background-color: red;
height:50px;
}
/*我想设置一种效果,当屏幕小于或大于多少时,让某各值生效*/
@media (min-width: 900px){
.c2{
background-color: grey;
}
}
</style>
</head>
<body>
<!--.c1-->
<div class="c1 c2"></div>
</body>
</html>
-
-
然后在浏览器打开s3.html 效果图如下:
image.png
-
-
-
屏幕缩小效果:
image.png
-
-
二、图标、字体
@font-face-
- 想用哪个图标就(https://v3.bootcss.com/components/)的组件复制源码就可以了例如
image.png
image.png
image.png
源码:
- 想用哪个图标就(https://v3.bootcss.com/components/)的组件复制源码就可以了例如
-
<span class="glyphicon-class">glyphicon glyphicon-cloud</span>
-
三、基本使用(BootStrap使用方法)
-
-
把BootStrap源码放到以下目录:
image.png
-
所有到文件目录如下:
image.png
image.png
把这块源码复制
image.png
-
- 新建s4.html文件(s4.html), s4.html代码如下(加入按钮式下拉菜单):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
</head>
<body>
<!--这块是自己想要那个按钮或那个表格就直接复制源码就可以了-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<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>
</div>
<!--先导入jQuery-->
<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
-
-
效果图:
image.png
-
-
步骤同上:
image.png 修改s4.html代码如下(加入导航条):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
</head>
<body>
<!--加入导航条-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<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>
<form class="navbar-form navbar-left">
<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>
<!--自己想要那个按钮或那个表格就直接复制源码就可以了-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<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>
</div>
<!--先导入jQuery-->
<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
-
效果图:
image.png
image.png
- 接着这一步重要(因为导航条的样式4周的框有点圆角,我想把它改成边角)
- 接下来改属性这样改(修改属性有优先级说法)
- 修改如下s4.html这块的代码(一般不这样写):
- 接下来改属性这样改(修改属性有优先级说法)
</head>
<body style="background-color: red">
<!--加入导航条-->
<nav class="navbar navbar-default" role="navigation" style="border-radius: 0">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
image.png
-
打开浏览器效果图:
image.png 正确写在css中如下修改s4.html这块代码如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<style>
.no-radus{
border-radius: 0
}
</style>
</head>
<body style="background-color: red">
<!--加入导航条-->
<nav class="navbar navbar-default no-radus" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
也获得同样效果:
image.png
另一种写法s4.html:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.no-radus{
border-radius: 0 !important;
}
</style>
<!--link-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
</head>
<body style="background-color: red">
<!--加入导航条-->
<nav class="navbar navbar-default no-radus" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
