使用Bootstrap快速构建页面
1、引入Bootstrap
首先从Bootstrap官网下载代码包，解压后将其中的css、js、fonts中的文件放在对应的静态资源目录中。之后在要使用的页面中引入该css、js文件，或者也可以直接以CDN的方式引入。注意bootstrap.js是基于jQuery，因此也需要引入jquery.js。
接着需要用meta标签设置字符编码为utf-8，并且使用viewpoint固定页面大小以保证页面在不同分辨率的设备上看起来都是一样的
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../static/css/bootstrap.css">
<script src="../../static/js/jquery.js">script>
<script src="../../static/js/bootstrap.js">script>
head>
2、网格系统
Bootstrap中可以根据屏幕的大小动态计算元素的宽度。如下所示，Bootstrap会将父元素默认划分为12等份，我们通过指定占多少份来计算子元素的宽度。例如我们为元素添加类名.col-md-4，则其宽度占整个父元素的4/12。下一个子元素会自动跟在其右边，若总份数超过12之后自动换下一行，例如大小为5的元素后面是一个大小为8的元素，5+8>12该元素会自动换到下一行。
.col-md-4中的md代表medium中等的，即Bootstrap会对页面宽度进行检测，如果宽度复合某个区间，则对应前缀的类名生效
| 设备 | 大小 | 前缀 |
|---|---|---|
| 超小设备（extremely small） | <768px | .col-xs- |
| 小型设备（small） | >768px | .col-sm- |
| 中等设备 | >992px | .col-md- |
| 大型设备 | >1200px | .col-lg- |
如下所示，为网格添加类名col-md-4和col-sm-6，即当页面宽度介于768px~992px时，类名col-sm-6生效，每个网格占用六份，一行有两个网格。当页面宽度大于992px时，col-md-4生效，每个网格占4份，一行三个网格。
<div class="row">
<div class="col-md-4 col-sm-6">网格1div>
<div class="col-md-4 col-sm-6">网格2div>
<div class="col-md-4 col-sm-6">网格3div>
div>
3、常用组件
Bootstrap官网提供了网页常用组件的demo样例，我们可以直接复制粘贴并加以简单修改后直接使用。
导航栏
通过使用导航栏，其中navbar-default为白色背景，navbar-inverse可以设置为黑色背景
其中使用了navbar-toggle类声明了响应式弹框，当页面为超小型设备时会自动触发将id为navbar的导航条收起到右上角弹框。
在#navbar内通过标签定义多个导航标签，其中class="active"的li会显示为激活状态。在每个子内可以进一步通过定义下拉菜单
显示小徽标可以采用3的方式
注意到其中有许多声明为sr-only的类，这是专门为残障人士提供的屏幕阅读器属性，正常页面不会显示改内容，当使用屏幕阅读器时会朗读其中内容。
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">Project namea>
div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li role="separator" class="divider">li>
<li class="dropdown-header">Nav headerli>
<li><a href="#">Separated linka>li>
ul>
li>
ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Defaulta>li>
<li class="active"><a href="./">Static top <span class="sr-only">(current)span>a>li>
<li><a href="../navbar-fixed-top/">Messages<span class="badge">3span>a>li>
ul>
div>
div>
nav>
轮播图
如下所示id="carousel-example-generic"的轮播图，通过data-target="#carousel-example-generic"绑定到轮播图，data-slide-to="0"绑定到具体某张图。
<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" class="">li>
<li data-target="#carousel-example-generic" data-slide-to="2" class="">li>
ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3M2UxNjJmOTk1IHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTczZTE2MmY5OTUiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjxnPjx0ZXh0IHg9IjM5MC41IiB5PSIyNzUuNDQwMDAwOTE1NTI3MyI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzNlMTYzNjU3ZiB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjU3cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3M2UxNjM2NTdmIj48cmVjdCB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM2NjYiLz48Zz48dGV4dCB4PSIzMzUuNjE2NjY4NzAxMTcxOSIgeT0iMjc1LjQ0MDAwMDkxNTUyNzMiPlNlY29uZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3M2UxNjMxMDc1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTczZTE2MzEwNzUiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjxnPjx0ZXh0IHg9IjM3Ny44NzUiIHk9IjI3NS40NDAwMDA5MTU1MjczIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
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>
表格
同样可以通过添加 除此之外Bootstrap官网还提供了许多现成的样例可以直接拿来修改和使用，例如：
通过来创建一个表格，特别地，如需使用条形背景的表格再添加类名table-striped，带边框的表格table-bordered。如果需要合并两个单元格可以使用
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>#th>
<th>First Nameth>
<th>Last Nameth>
<th>Usernameth>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>Marktd>
<td>Ottotd>
<td>@mdotd>
tr>
<tr>
<td>2td>
<td>Jacobtd>
<td>Thorntontd>
<td>@fattd>
tr>
<tr>
<td>3td>
<td colspan="2">Larry the Birdtd>
<td>@twittertd>
tr>
tbody>
table>
div>
输入框
对input标签添加form-control类来设置表单输入框的样式<div class="col-md-4">
<form>
<h2>Please sign inh2>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
label>
div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign inbutton>
form>
div>
列表栏
通过类名<div class="col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item active">列表项1a>
<a href="#" class="list-group-item">列表项2a>
<a href="#" class="list-group-item">列表项3a>
<a href="#" class="list-group-item">列表项4a>
div>
div>
按钮
如下所示，对button添加btn类实现为按钮，并且添加类名btn-default将按钮设置为白色。 类似地可以将按钮设置为其他颜色，在Bootstrap中default相关的为白色，Primary蓝色、success绿色、info浅蓝色、warning橙色、danger红色。特别的btn-link为无边框的链接按钮。btn-lg、btn-sm、btn-xs类来设置按钮大小<div class="container">
<button type="button" class="btn btn-default">Defaultbutton>
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">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>
<button type="button" class="btn btn-lg btn-default">大按钮button>
<button type="button" class="btn btn-sm btn-default">小按钮button>
<button type="button" class="btn btn-xs btn-default">超小按钮button>
div>
标签
通过label设置标签显示，与按钮相比，标签无法点击。标签的颜色和按钮类似可以通过添加label-default等类名来设置。值得注意的是标签会根据外部父元素的大小自动进行变化，例如将标签分别包裹在、内大小不同。 <h3>
<span class="label label-default">Defaultspan>
<span class="label label-primary">Primaryspan>
<span class="label label-success">Successspan>
<span class="label label-info">Infospan>
<span class="label label-warning">Warningspan>
<span class="label label-danger">Dangerspan>
h3>
<h5>
<span class="label label-default">Defaultspan>
<span class="label label-primary">Primaryspan>
<span class="label label-success">Successspan>
<span class="label label-info">Infospan>
<span class="label label-warning">Warningspan>
<span class="label label-danger">Dangerspan>
h5>
Panel
通过panel类来实现面板样式，panel-default等来指定颜色<div class="container">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel titleh3>
div>
<div class="panel-body">
Panel content
div>
div>
div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel titleh3>
div>
<div class="panel-body">
Panel content
div>
div>
div>
div>
提示框
通过alert类来实现提示框，alert-success类可以设置其颜色<div class="container">
<div class="alert alert-success" role="alert">
<strong>Well done!strong> You successfully read this important alert message.
div>
div>
进度条
进度条的实现首先在外围包裹一个width: 60%。同样可以定制进度条的颜色，特别地progress-bar-striped为条纹状。可以在一个进度槽内填充多个进度条。
<div class="progress">
<div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">div>
div>
<div class="progress">
<div class="progress-bar progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">div>
div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">div>
<div class="progress-bar progress-bar-danger" style="width: 10%">div>
div>
其他Demo
博客页面：https://v3.bootcss.com/examples/blog/
控制台实现：
你可能感兴趣的:(WEB,bootstrap)