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>
发表评论