Bootstrap的安装
1.先下载Bootstrap压缩包
2.由于Bootstrap基本要搭配jquery一起使用所以再下载jQuery
3.(可做可不做,无非是导入到sublime的时候不需要写完整路径了)把这两个导入到你要编写的文件夹里,像我就复制了一下,这里两个在js中
同时把bootstrap压缩包中的.min.js和.min.css拉出来,如下
4.之后便是导入,记住先导入jquery的文件,顺序别搞错,另外jq和.js的用导入,而.css必须用导入
5.至于使用他用一个button(按键进行举例),前两个是普通按钮,后一个加了class=“btn btn-default”(这个后面会讲到的)
所以他的功能是什么?打开网页审查第三个按钮的元素,我圈出来的就可以更改他的颜色,背景色啥的,意思就是bootstrap中自带一些css模板,你就不用幸苦的自己上网查再自己打上去了(你审查前两个按钮会发现确实改不了颜色)
Bootst的基本用法
1.基本排版测试
在bootstrap的中文官网找到排版,他会有代码的,所以他的作用就是你自己打还要加属性啊什么的,用了bootstrap上的代码后他自带css,有规范的,只需要你改一下标签里的内容就行了
2.列表
在之后其实也一样,就是上官网找代码,复制粘贴就可以了
例如这个,class就是复制来的

看看效果图对比
3.按钮
一样,不介绍了,他这里复制下来四种按钮
也有其他按钮样式,全靠白嫖
4.只要官网上找的到,就可以嫖,我就不记了
5.栅格系统
首先, 行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。什么意思呢
" class="reference-link">我官网上找的代码,只有class=“row”,所以这时候必须在里加class=“container”或者在row的前面在加一个
讲一讲栅格化前面一大串12个col-md-1就是把页面分成了12列,第二个8和4,意思是分成12列,一个占8列一个占4列,同理444和66也就知道了
第一个总共12列,第二个8和4的占比,第三个4-4-4的占比,第四个6-6的占比
还有他讲了一个响应式布局
这里的-col-xs-和-col-sm-是什么意思呢,就是以他的例子来说把
正常页面4-4-4
如果页面拉小宽度小于-xs-所在范围768px就会显示2-2-8
就是这个意思
6.导航,分页
前面所讲的都是在全局CSS样式,而导航和分页都在在组件中

看看效果吧
实战
写一个注册界面
我。。。。写不下了,哭廖/(ㄒoㄒ)/~~
只能复制一便代码了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言板</title>
<script type="text/javascript" src="D:\phpstudy_pro\WWW\js\jQuery\jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="D:\phpstudy_pro\WWW\js\bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="D:\phpstudy_pro\WWW\js\bootstrap.min.css">
</head>
<body class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">留言板</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><a href="#">我要留言</a></li>
</ul>
<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">搜留言</button>
</form>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<legend class="text-center">用户注册</legend>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">确认密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">注册</button>
</div>
</div>
</form>
<div class="col-md-4">
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
版权所有@丁大帅哥
</div>
</nav>
</body>
</html>
5.至于使用他用一个button(按键进行举例),前两个是普通按钮,后一个加了class=“btn btn-default”(这个后面会讲到的)
所以他的功能是什么?打开网页审查第三个按钮的元素,我圈出来的就可以更改他的颜色,背景色啥的,意思就是bootstrap中自带一些css模板,你就不用幸苦的自己上网查再自己打上去了(你审查前两个按钮会发现确实改不了颜色)
Bootst的基本用法
1.基本排版测试
在bootstrap的中文官网找到排版,他会有代码的,所以他的作用就是你自己打还要加属性啊什么的,用了bootstrap上的代码后他自带css,有规范的,只需要你改一下标签里的内容就行了
2.列表
在之后其实也一样,就是上官网找代码,复制粘贴就可以了
例如这个,class就是复制来的
看看效果图对比
3.按钮
一样,不介绍了,他这里复制下来四种按钮
也有其他按钮样式,全靠白嫖
4.只要官网上找的到,就可以嫖,我就不记了
5.栅格系统
首先, 行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。什么意思呢
" class="reference-link">我官网上找的代码,只有class=“row”,所以这时候必须在里加class=“container”或者在row的前面在加一个
讲一讲栅格化前面一大串12个col-md-1就是把页面分成了12列,第二个8和4,意思是分成12列,一个占8列一个占4列,同理444和66也就知道了
第一个总共12列,第二个8和4的占比,第三个4-4-4的占比,第四个6-6的占比
还有他讲了一个响应式布局
这里的-col-xs-和-col-sm-是什么意思呢,就是以他的例子来说把
正常页面4-4-4
如果页面拉小宽度小于-xs-所在范围768px就会显示2-2-8
就是这个意思
6.导航,分页
前面所讲的都是在全局CSS样式,而导航和分页都在在组件中
看看效果吧
实战
写一个注册界面
我。。。。写不下了,哭廖/(ㄒoㄒ)/~~
只能复制一便代码了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>留言板</title> <script type="text/javascript" src="D:\phpstudy_pro\WWW\js\jQuery\jquery-3.4.1.min.js"></script> <script type="text/javascript" src="D:\phpstudy_pro\WWW\js\bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="D:\phpstudy_pro\WWW\js\bootstrap.min.css"> </head> <body class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="#">留言板</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><a href="#">我要留言</a></li> </ul> <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">搜留言</button> </form> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="row"> <div class="col-md-4"> </div> <div class="col-md-4"> <legend class="text-center">用户注册</legend> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-4 control-label">用户名</label> <div class="col-sm-8"> <input type="text" class="form-control" id="username" placeholder="username"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-4 control-label">密码</label> <div class="col-sm-8"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-4 control-label">确认密码</label> <div class="col-sm-8"> <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-8"> <button type="submit" class="btn btn-primary">注册</button> </div> </div> </form> <div class="col-md-4"> </div> </div> <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> 版权所有@丁大帅哥 </div> </nav> </body> </html>
发表评论