BootStrap

一、BootStrap介绍及使用

BootStrap是一个基于CSS、JS前端框架；提供了丰富的预定义样式及函数库

1.1 BootStrap引入

• 离线下载引入

  • 下载地址 https://www.bootcss.com/

  • 目录结构
    

  • 在使用Bootstrap的HTML文档中引入css和js

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    

• CDN引入

  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>
  

1.2 基本使用

• 在HTML元素中，通过class属性引用bootstrap预定义的样式

  <button class="btn">测试按钮button>
  <button class="btn btn-danger">测试按钮button>
  <button class="btn btn-default">测试按钮button>
  <button class="btn btn-warning">测试按钮button>
  

二、栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

2.1 栅格系统介绍

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

2.2 屏幕尺寸定义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERVrHRuB-1594817344124)(imgs/1594785867716.png)]

2.3 实例

<div class="row" style="background: lightgray;">
    <div class="col-lg-3 col-md-1" style="background: red; height: 30px;">div>
    <div class="col-lg-6 col-md-10" style="background: blue; height: 30px;">div>
    <div class="col-lg-3 col-md-1" style="background: green; height: 30px;">div>
div>

<div class="row" style="background: lightgray;">
    <div class="col-lg-4 col-md-2" style="background: lightblue; height: 30px;">div>
    <div class="col-lg-4 col-md-8" style="background: orange; height: 30px;">div>
    <div class="col-lg-4 col-md-2" style="background: pink; height: 30px;">div>
div>

三、排版

3.1 标题

• HTML 中的所有标题标签，

  到

  均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式

<h1>一级标题h1>
<h6>六级标题h6>

<label class="h3">千锋教育label>

3.2 对齐

文本的水平对齐方式（左对齐 居中 右对齐）

• .text-left 文本左对齐

• .text-center 文本居中

• .text-right 文本右对齐

  <p class="text-left" style="width: 300px; background: orange;">文本  1  p>
  <p class="text-center" style="width: 300px; background: pink;">文本  2  p>
  <p class="text-right" style="width: 300px; background: orange;"> 文本  3  p>
  

四、表格

4.1 表格样式

• 基础表格 .table
• 条纹状表格 .table-striped
• 带边框表格.table-bordered
• 鼠标悬停表格.table-hover
• 紧缩型表格.table-condensed

4.2 状态类

Bootstrap预定义了特定的情景色

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

五、表单

Bootstrap提供了一套用于表单的预定义样式

5.1 表单基础样式

• form
  • .form-inline 表单内联样式，表单中所有的元素都在同一行
  • .form-horizontal 表单中每个输入项在一行（label,input在同一行）
  • 默认的是每个输入项的label和input单独一行
• 输入项（表单中的行）
  • .form-group 用来定义表单中的输入项
• 输入框
  • .form-control 定义输入框

5.2 内联表单

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Namelabel>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  div>
  <div class="form-group">
    <label for="exampleInputEmail2">Emaillabel>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  div>
  <button type="submit" class="btn btn-default">Send invitationbutton>
form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BmGkC5A7-1594817344134)(imgs/1594799988643.png)]

5.3 输入项水平显示

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Emaillabel>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    div>
  div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Passwordlabel>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    div>
  div>
 
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign inbutton>
    div>
  div>
form>

六、按钮和图片

6.1 按钮

• 按钮的样式

  <input type="button" class="btn" value="按钮基础样式"/><br/>
  <button type="button" class="btn btn-default">（默认样式）Defaultbutton><br/>
  <button type="button" class="btn btn-primary">（首选项）Primarybutton><br/>
  <button type="button" class="btn btn-success">（成功）Successbutton><br/>
  <button type="button" class="btn btn-info">（一般信息）Infobutton><br/>
  <button type="button" class="btn btn-warning">（警告）Warningbutton><br/>
  <button type="button" class="btn btn-danger">（危险）Dangerbutton><br/>
  <button type="button" class="btn btn-link">（链接）Linkbutton><br/>
  

• 按钮的尺寸

  <button type="button" class="btn btn-primary btn-lg">大按钮button>
  <button type="button" class="btn btn-primary">默认尺寸按钮button>
  <button type="button" class="btn btn-primary btn-sm">小按钮button>
  <button type="button" class="btn btn-primary btn-xs">超小按钮button>
  

6.2 图片样式

<img src="img/c.jpg" class="img-rounded" />
<img src="img/e.jpg" class="img-circle"/>
<img src="img/d.jpg" class="img-thumbnail" style="height: 100px;"/>

七、组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

7.1 图标

<span class="glyphicon glyphicon-yen" >span>

7.2 下拉菜单

7.3 导航和导航条

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container-fluid">
        
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="...">
            a>
        div>

        
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            div>
            <button type="submit" class="btn btn-default">Submitbutton>
        form>

        
        <button type="button" class="btn btn-default navbar-btn">Sign inbutton>

        
        <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Ottoa>p>

    div>
nav>

7.4 分页

• 基本的分页

  <ul class="pagination">
      <li>
          <a href="#" aria-label="Previous">
              <span aria-hidden="true">«span>
          a>
      li>
      <li><a href="#">1a>li>
      <li><a href="#">2a>li>
      <li><a href="#">3a>li>
      <li><a href="#">4a>li>
      <li><a href="#">5a>li>
      <li>
          <a href="#" aria-label="Next">
              <span aria-hidden="true">»span>
          a>
      li>
  ul>
  

• 禁用和激活

  • .disabled
  • .active

• 尺寸

  • .pagination-lg 大号
  • 默认
  • .pagination-sm 小号

八、模态框

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" >script>
		<script type="text/javascript" src="js/bootstrap.min.js" >script>
	head>
	<body>
		
		<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加学生信息button>
		
		<table class="table">
			<caption>基础表格caption>
			<thead>
				<tr>
					<th>th>
					<th>学号th>
					<th>姓名th>
					<th>性别th>
					<th>年龄th>
				tr>
			thead>
			<tbody>
				<tr class="aaa">
					<td>td>
					<td>10001td>
					<td>张三td>
					<td>男td>
					<td>20td>
				tr>
				<tr>
					<td>td>
					<td>10002td>
					<td>李四td>
					<td>女td>
					<td>20td>
				tr>
				<tr class="aaa">
					<td>td>
					<td>10003td>
					<td>二狗td>
					<td>男td>
					<td>21td>
				tr>
				<tr  class="aaa">
					<td>td>
					<td>10004td>
					<td>三毛td>
					<td>男td>
					<td>20td>
				tr>
				
			tbody>
		table>
		
		
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>button>
		        <h4 class="modal-title" id="myModalLabel">添加学生信息h4>
		      div>
		      <div class="modal-body">
		        
		        <form class="form-horizontal">
				  <div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">Emaillabel>
				    <div class="col-sm-10">
				      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
				    div>
				  div>
				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-2 control-label">Passwordlabel>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
				    div>
				  div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <div class="checkbox">
				        <label>
				          <input type="checkbox"> Remember me
				        label>
				      div>
				    div>
				  div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <button type="submit" class="btn btn-default">Sign inbutton>
				    div>
				  div>
				form>
		        
		        
		      div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消button>
		        <button type="button" class="btn btn-primary" data-dismiss="modal" id="submitBtn">提交button>
		      div>
		    div>
		  div>
		div>
		
	body>
	
	<script type="text/javascript">
		$("#submitBtn").click(function(){
			
			console.log("点击提交");
			
		});
		
	script>
	
html>

九、轮播图

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" >script>
		<script type="text/javascript" src="js/bootstrap.min.js" >script>
	head>
	<body>
		
		
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	    
	    <ol class="carousel-indicators">
	        <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
	        <li data-target="#carousel-example-generic" data-slide-to="1">li>
	        <li data-target="#carousel-example-generic" data-slide-to="2">li>
	    ol>
	
	    
	    <div class="carousel-inner" role="listbox" style="height: 300px;">
	        <div class="item active">
	            <img src="img/a.jpg" alt="..." style="height: 300px;">
	            <div class="carousel-caption">
	                aaa
	            div>
	        div>
	        <div class="item">
	            <img src="img/b.jpg" alt="..." style="height: 300px;">
	            <div class="carousel-caption">
	                ...
	            div>
	        div>
	         <div class="item">
	            <img src="img/c.jpg" alt="..." style="height: 300px;">
	            <div class="carousel-caption">
	                ...
	            div>
	        div>
	    div>
	
	  	
	    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
	        <span class="sr-only">Previousspan>
	    a>
	    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
	        <span class="sr-only">Nextspan>
	    a>
	div>
		
		
	body>
html>

ref="#carousel-example-generic" role="button" data-slide="prev">
	        
	        Previous
	    
	    
	        
	        Next
	    
	

注意，bootstrap是基于jQuery的，所有得先加载jQuery文件，然后他的功能才能使用。