BootStrap
BootStrap
-
-
- BootStrap
-
- 一、概念
- 二、基本使用
- 三、栅格系统
- 四、文本排版
- 五、表格
- 六、表单
- 七、按钮
- 八、图片
-
BootStrap
一、概念
基于HTML、CSS、JavaScript的一套快速开发页面的前端框架。
特点：
移动设备优先。（支持移动设备）
响应式设计（布局），能够自动适配于台式机、pad和手机。
主流浏览器支持。
容易上手和使用。
二、基本使用
1、本地使用
下载bootstrap.css和bootstrap.js
注意：由于bootstrap底层采用jQuery编写，所以需要导入就jQuery，而且需要在bootstrap.js之前导入。
2、使用CDN
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>组成：
css样式、组件和js插件。
三、栅格系统
作用，解决页面响应式布局问题。
将整个页面分为12列，元素占据的列会根据页面大小的不同而发生变化。
注意：如果需要设置移动设备优先，需要在head标签中有如下设置：
注意：整个页面body中的内容必须包裹在一个div中，而且需要设置该div的样式为container或者container-fluid。
.container类用于固定宽度并支持响应式布局的容器。
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
div{
border: 1px solid red;
}
style>
head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1div>
div>
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12">.col-md-8div>
<div class="col-md-4 col-sm-4 col-xs-12">.col-md-4div>
div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">.col-md-4div>
<div class="col-md-4 col-sm-4 col-xs-12">.col-md-4div>
<div class="col-md-4 col-sm-4 col-xs-12">.col-md-4div>
div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">.col-md-6div>
<div class="col-md-6 col-sm-6 col-xs-12">.col-md-6div>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>
body>
html>
四、文本排版
标题排版：
<div class="container">
<div class="h1 text-right">标题效果h1div>
<div class="h3">标题效果h3div>
<div class="text-uppercase">adsfgfdertdiv>
div>
对齐方式：
<div class="container">
<p class="text-left">sdfsdfp>
<p class="text-center">sdfsdfp>
<p class="text-right">sdfsdfp>
<p class="text-justify">sdfsdfp>
<p class="text-nowrap">sdfsdfp>
div>
五、表格
table：设置一个默认的表格样式
table-hover：鼠标悬停变色
table-bordered：表格边框
table-striped：隔行变色
给行设置颜色：
active：灰色
success：绿色
info：蓝色
warning：黄色
danger：红色
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" >script>
<script type="text/javascript" src="js/bootstrap.min.js" >script>
head>
<body>
<div class="container">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>#th>
<th>First Nameth>
<th>Last Nameth>
<th>Usernameth>
tr>
thead>
<tbody>
<tr>
<th scope="row">1th>
<td>Marktd>
<td>Ottotd>
<td>@mdotd>
tr>
<tr>
<th scope="row">2th>
<td>Jacobtd>
<td>Thorntontd>
<td>@fattd>
tr>
<tr>
<th scope="row">3th>
<td>Larrytd>
<td>the Birdtd>
<td>@twittertd>
tr>
tbody>
table>
<table class="table table-bordered">
<thead>
<tr>
<th>#th>
<th>Column headingth>
<th>Column headingth>
<th>Column headingth>
tr>
thead>
<tbody>
<tr class="active">
<th scope="row">1th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
<tr class="success">
<th scope="row">2th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
<tr class="info">
<th scope="row">3th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
<tr class="warning">
<th scope="row">4th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
<tr class="danger">
<th scope="row">5th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
<tr>
<th scope="row">6th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
<tr >
<th scope="row">7th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
<tr>
<th scope="row">8th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
<tr >
<th scope="row">9th>
<td>Column contenttd>
<td>Column contenttd>
<td>Column contenttd>
tr>
tbody>
table>
div>
body>
html>
六、表单
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" >script>
<script type="text/javascript" src="js/bootstrap.min.js" >script>
head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email addresslabel>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
div>
<div class="form-group">
<label for="exampleInputPassword1">Passwordlabel>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
div>
<div class="form-group">
<label for="exampleInputFile">File inputlabel>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.p>
div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
label>
div>
<button type="submit" class="btn btn-default">Submitbutton>
form>
div>
body>
html>
七、按钮
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" >script>
<script type="text/javascript" src="js/bootstrap.min.js" >script>
head>
<body>
<div class="container">
<input type="button" class="btn btn-danger" value="按钮1"/>
<a href="" class="btn btn-success">按钮2a>
<button type="button" class="btn btn-default btn-lg">（默认样式）Defaultbutton>
<button type="button" class="btn btn-primary btn-sm">（首选项）Primarybutton>
<button type="button" class="btn btn-success">（成功）Successbutton>
<button type="button" class="btn btn-info btn-xs">（一般信息）Infobutton>
<button type="button" class="btn btn-warning">（警告）Warningbutton>
<button type="button" class="btn btn-danger">（危险）Dangerbutton>
<button type="button" class="btn btn-link">（链接）Linkbutton>
div>
body>
html>
八、图片
<img width="200px" height="200px" src="img/14.png" alt="..." class="img-rounded">
<img width="200px" height="200px" src="img/14.png" alt="..." class="img-circle">
<img width="200px" height="200px" src="img/14.png" alt="..." class="img-thumbnail">