维基百科简介
Bootstrap是一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。
Bootstrap是GitHub上面被标记为“Starred”次数排名第二最多的项目。Starred次数超过124,000，而分支次数超过了47,000次
适应多终端应用。
grid
<style type="text/CSS">
.box {
background-color: yellowgreen;
border:1px solid black;
}
</style>
</head>
<body>
<h1>hello,world!</h1>
<div class="container">
<div class="row">
<div class="box">content</div>
<div class="box">content</div>
</div>
</div>
没有使用bootstrap时候的输出是：
image.png
使用bootstrap的输出是：
image.png
<div class="container">
<div class="row">
<div class="box col-md-4">content</div>
<div class="box col-md-2">content</div>
<div class="box col-md-4">content</div>
</div>
</div>
导航栏功能实现
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <!--定义 navbar,设置颜色narbar-dark bg-dark navbar-expand-md 设置页面宽度在md以上时候导航栏平放-->
<a href="#" class="navbar-brand">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse"> <!--navbar-toggler代表该按钮做切换器的动作、定义类型为按钮 data-toggle定义执行为折叠的动作 navbar-target指向需要折叠的id-->
<span class="navbar-toggler-icon"></span> <!--定义切换按钮为汉堡包样式的图标-->
</button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <!--定制class为折叠，同时给出id-->
<ul class="navbar-nav"> <!--导航栏用navbar-nav定义-->
<li class="nav-item active"> <!--列表项目用nav-item定义-->
<a class="nav-link" href="#">主页</a> <!--超链接用nav-link定义-->
</li>
<li class="nav-item">
<a class="nav-link" href="#">博客</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系方式</a>
</li>
</ul>
</div>
</nav>
<h1>hello,world!</h1>
<div class="container">
<div class="row">
<div class="box col-md-4">content</div>
<div class="box col-md-4">content</div>
<div class="box col-md-4">content</div>
</div>
</div>
Bootstrap 表单
<div class="container">
<h1>hello,world!</h1>
<form>
<div class="form-group row"> <!--内容设置在同一行需要添加row-->
<label for="email" class="col-sm-2 col-form-label">邮箱地址</label> <!--col-sm-2设置label占两个位置，将input与其放在同一行-->
<div class="col-sm-10"> <!--设置input占10个位置。一行共12个位置-->
<input class="form-control" type="email" placeholder="请输入您的邮箱" />
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">密 码</label>
<div class="col-sm-10">
<input class="form-control " type="password" placeholder="请输入您的密码" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" />
<label for="check" class="form-check-lable">记住密码</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<button class="btn btn-dark" type="submit">提 交</button>
</div>
</div>
</form>
</div>
Carousel 轮流播放图片
<div id="carouselControl" class="carousel slide" data-ride="carousel"> <!--设置carousel类 添加slide滑动效果-->
<div class="carousel-inner"> <!--设置carousel-inner类-->
<div class="carousel-item active"> <!--设置carousel-item类-->
<img class="w-100" src="img/1.jpg"> <!--设置w-100控制图片大小-->
</div>
<div class="carousel-item ">
<img class="w-100" src="img/2.jpg">
</div>
<div class="carousel-item ">
<img class="w-100" src="img/3.jpg">
</div>
</div>
<a href="#carouselControl" data-slide="prev" class="carousel-control-prev"> <!--返回上一副图片-->
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#carouselControl" data-slide="next" class="carousel-control-next"> <!--指向下一副图片-->
<span class="carousel-control-next-icon"></span>
</a>
<ol class="carousel-indicators"> <!--在下方设置直接可以选择的图片的按钮-->
<li data-target="#carouselControl" data-slide-to="0" class="active"></li>
<li data-target="#carouselControl" data-slide-to="1"></li>
<li data-target="#carouselControl" data-slide-to="2"></li>
</ol>
</div>
Modals组件(弹出对话框）
<button type="button" class="btn btn-dark" data-toggle="modal" data-target ="#myModal">调用窗口</button> <!--data-toggle转换到modal-->
<div class="modal fade" id="myModal"> <!--定义modal,同时定义fade渐变-->
<div class="modal-dialog"> <!--定义modal-dialog对话框-->
<div class="modal-content"> <!--定义modal-content内容-->
<div class="modal-header"> <!--定义content中的头部分，其中分为两块，标签和关闭按钮-->
<h5 class="modal-title">My Title</h5> <!--定义头部中的标题-->
<button type="submit" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body"> <!--定义对话框中的文本内容-->
...
</div>
<div class="modal-footer"> <!--定义对话框中的尾部内容-->
<button type="button" class="btn btn-dark" data-dismiss="modal">
关 闭
</button>
<button type="button" class="btn btn-dark" data-dismiss="modal">
确 定
</button>
</div>
</div>
</div>
</div>
综合案例
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Alan's Website</title>
<style>
.backgroudIamge {
background-image: url("1.jpg");
height: 550px;
border-radius: 0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<button class="navbar-toggler" type="submit" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<a href="#" class="navbar-brand">Alan's Website</a>
<ul class="navbar-nav mr-auto"> <!--mr-auto 自动向右推 -->
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Download the App</a>
</li>
</ul>
<form class="form-inline"> <!--显示在同一行-->
<input class="form-control mr-2 my-2 " type="email" placeholder="Email" /> <!--mr-xl-2 margin right 在bootstrap中的快捷用法-->
<input class="form-control mr-2 my-2" type="password" placeholder="password" /> <!--margin y - for classes that set both *-top and *-bottom-->
<button class="btn btn-outline-warning">Log In</button>
</form>
</div>
</nav>
<div class="jumbotron text-center backgroudIamge mb-0"> <!--使用bootstrap中的超大屏幕junbotron类 text-center内容居中-->
<h1 class="display-4">My Awesome App</h1> <!--使用bootstrap中的display-4字体展示-->
<p class="lead">This is why you should Download this fantastic App. </p>
<p>Some more information about this App ,you can <strong>join our mailling list!</strong></p>
<div class="input-group col-md-7 mx-auto"> <!--col-md-7在大于平板电脑宽度的时候占据7个位置，mx-auto margin x 左右自动居中-->
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="email" class="form-control" placeholder="Please entry your email address">
</div>
<div class="mt-5">
<button type="button" class="btn btn-warning btn-lg ">Submit</button>
</div>
</div>
<div class="container text-center my-5">
<h1 class="display-4">Why this App awesome!</h1>
<p class="lead">Summary of this App's awesomeness</p>
<div class="row ">
<div class="col-sm"> <!--调整宽度-->
<div class="card" style="width: 18rem">
<img class="card-img-top" src="2.jpg">
<div class="card-body">
<h5 class="card-title">Header</h5>
<p class="card-text">this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.</p>
<a href="#" class="btn btn-warning">Learn more</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem ;height: 12rem">
<img class="card-img-top" src="3.jpg">
<div class="card-body">
<h5 class="card-title">Header</h5>
<p class="card-text">this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.</p>
<a href="#" class="btn btn-warning">Learn more</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem">
<img class="card-img-top" src="4.jpg">
<div class="card-body">
<h5 class="card-title">Header</h5>
<p class="card-text">this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.</p>
<a href="#" class="btn btn-warning">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center ">
<h1 class="display-4">Download The App!</h1>
<p class="lead">Really, why should I download this App? </p>
<img src="appstore.png" />
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
网友评论