前端响应框架——bootstrap使用小结
BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式
现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西
1.编写头部
<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>LearnBootstraptitle>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">script>
head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
2.引入js
这个可以写在body
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">script>- 1
- 2
- 3
- 4
- 5
3.使用container类
container类是一个常用的div类
主要是用居中功能
<div class="container">hellodiv>- 1
4.使用栅格化系统
栅格化系统是BootStrap一个非常常用的一个布局系统
简单的使用如下
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-4">.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4div>
div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8 col-md-push-4">.col-xs-12 .col-sm-6 .col-md-8div>
<div class="col-xs-6 col-md-4 col-md-pull-8">.col-xs-6 .col-md-4div>
div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
可以看到栅格化系统可以根据不同设备调整不同宽度
5.使用表格
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>表格标题th>
<th>表格标题th>
<th>表格标题th>
tr>
thead>
<tbody>
<tr class="success">
<th>表格内容th>
<th>表格内容th>
<th>表格内容th>
tr>
<tr class="info">
<th>表格内容th>
<th>表格内容th>
<th>表格内容th>
tr>
<tr class="warning">
<th>表格内容th>
<th>表格内容th>
<th>表格内容th>
tr>
tbody>
table>
div>
div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
如果是想某一格变颜色也可以在th标签内加类像tr一样
4.使用表单
最基本的用法如下
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
如果将form的类设为form-inline则将所有元素显示在同一行
如果将form的类设为form-horizontal则每个form-group显示一行，不过要自己设置宽度
如
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="Emai" class="col-md-2 control-label">Emaillabel>
<div class="col-md-10">
<input class="form-control" type="email" placeholder="Email" id="Emai">
div>
div>
<div class="form-group">
<label for="Passwor" class="col-sm-2 control-label">Passwordlabel>
<div class="col-sm-10">
<input class="form-control" type="password" placeholder="Password" id="Passwor">
div>
div>
<button type="submit" class="btn btn-primary col-md-offset-2">summitbutton>
form>
div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
我们通常在注册账号时，信息错误或者正确他会在旁边提示，而且输入框的颜色会不同
Bootstrap给我们提供了这个很实用的功能
<div class="container">
<form>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with successlabel>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">span>
<span id="inputSuccess2Status" class="sr-only">(success)span>
div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warninglabel>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true">span>
<span id="inputWarning2Status" class="sr-only">(warning)span>
div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with errorlabel>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">span>
<span id="inputError2Status" class="sr-only">(error)span>
div>
form>
div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
5.按钮
按钮是必不可少的一样东西
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
类中还可以添加尺寸
- 1
- 2
- 3
- 4
以上就是Bootstrap的使用步骤和常用用法
用上这个框架后不仅开发的速度上去了，质量也提升了