bootstrap学习

来源：互联网发布：软件项目管理总结报告编辑：程序博客网时间：2024/06/08 06:32

准备工作：

head中包含以下代码：

<head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！确保支持响应式布局 -->    <title>Title</title>    <!-- 新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="bootstrap.css">    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->    <script src="jquery.js" async></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    <script src="bootstrap.js" async></script></head>

1.设置栅栏式布局

<!-- col-xs-4 : 指小于768px的小设备--><!-- col-sm-4 ：指>=768px的设备--><!-- col-md-4 ：指>=992px设备--><!-- col-lg-4 ：值1200px设备--><div class="container"><!--或者container-fluid-->    <div class="row">        <div class="col-xs-4" style="background: red; text-align: center">11</div>        <div class="col-xs-4" style="background: green; text-align: center">22</div>        <div class="col-xs-4" style="background: blue; text-align: center">33</div>    </div></div>

bootstrap把页面设置为12列。三个div所以设置col-xs-4，如果是4个div，那么就设置col-xs-3
布局设置（修改过的，方便自己写）

.container {  width: 500px;  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}.container * {//注意这个，要算边框距离    box-sizing: border-box;}.row {  margin-right: -15px;  margin-left: -15px;}.col-xs-4 {  position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;  width: 33.33333333%;  float: left;}

2.表单

form-control类：含有此类的标签宽度都将变为width:100%，且在表单中通常是将控件配合label标签一起包含在form-group中使用

<form role="form">    <div class="form-group">        <label for="exampleInputEmail">Email address</label>        <input type="email" class="form-control" id="exampleInputEmail" placeholder="input">    </div>    <div class="form-group">        <label for="exampleInputEmail">Email name</label>        <textarea class="form-control">11111</textarea>    </div>    <div class="form-group">        <label for="select">select form</label>        <select class="form-control" id="select">            <option>111</option>            <option>222</option>        </select>    </div></form><!-- form-inline类使表单水平呈现--><form class="form-inline">    <!--<div class="col-sm-4"></div>-->//为了使整个对象居中    <div class="form-group">        <label for="exampleInputAmount">Amount</label>        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">    </div>    <button type="submit" class="btn  btn-primary">search</button></form><!--水平排列的表单   control-label：表示文本采用右对齐 --><form class="form-horizontal">    <div class="form-group">        <label for="inputEmail" class="col-sm-4  control-label">Email:</label>        <div class="col-sm-4">            <input type="email" class="form-control" id="inputEmail" placeholder="email">        </div>    </div>    <div class="form-group">        <label for="inputPassword" class="col-sm-4  control-label">Password:</label>        <div class="col-sm-4">            <input type="password" class="form-control" id="inputPassword" placeholder="password">        </div>    </div></form>

css文件：

/*basic*/* {    box-sizing: border-box;}.form-group {    margin-bottom: 15px;}.form-control {    display: block;    width: 100%;    height: 2em;    padding: 6px 12px;    font-size: 14px;    line-height: 1.42857143;    color: #555;    background-color: #fff;    background-image: none;    border: 1px solid #ccc;    border-radius: 4px;    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}/*expand*/.form-group .form-control {    /*这里可以修改参数让form-group内部的form-control变换样式，比如修改背景色*/}.form-inline .form-group {    display: inline-block;    margin-bottom: 0;    vertical-align: middle;}.form-inline .form-group .form-control {    display: inline-block;    width: auto;    vertical-align: middle;}.btn {    display: inline-block;    padding: 3px;    margin-bottom: 0;    font-size: 14px;    font-weight: normal;    line-height: 1.42857143;    text-align: center;    white-space: nowrap;    vertical-align: middle;    -ms-touch-action: manipulation;    touch-action: manipulation;    cursor: pointer;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    background-image: none;    border: 1px solid transparent;    border-radius: 4px;}.btn-primary {    color: #fff;    background-color: #337ab7;    border-color: #2e6da4;}

3.导航栏

<!--  bootstrap制作导航菜单 --><!-- 纵向导航栏：nav-tabs ,nav-pills(使导航呈现胶囊状)，nav-stacked(使水平导航变为竖直导航)，nav-justified(实现导航均等宽度排列) --><div class="sideBar-menu  ">    <ul class="nav  nav-pills  nav-stacked">        <li><a href="#">首页</a></li>        <li><a href="#">关于我</a></li>        <li><a href="#">那些年</a></li>        <li><a href="#">碎碎念</a></li>        <li><a href="#">留言板</a></li>        <li><a href="#">情感语</a></li>    </ul></div><!-- 横向导航栏：导航依赖于nav类nav-tabs类依赖nav类 --><ul class="nav  nav-tabs">    <li role="presentation" class=""><a href="#">Home</a></li>    <li role="presentation" class=""><a href="#">Profile</a></li>    <li role="presentation" class=""><a href="#">Messages</a></li></ul>css样式：.sideBar-menu {    margin: 20px auto;    width: 180px;}.nav {    padding-left: 0;    margin-bottom: 0;    list-style: none;    display: block;}/*直属节点*/.nav > li {    position: relative;    display: block;}.nav > li > a {    position: relative;    display: block;    padding: 10px 15px;}.nav > li > a:hover,.nav > li > a:focus {    text-decoration: none;    background-color: #eee;}/*重写鼠标滑过的样式*/.nav li a:hover {    background-color: #337ab7;    color: #fff;}.nav > li > a > img {    max-width: none;}.nav-pills > li {    float: left;}.nav-pills > li > a {    border-radius: 4px;}.nav-pills > li + li {    margin-left: 2px;}.nav-pills > li.active > a,.nav-pills > li.active > a:hover,.nav-pills > li.active > a:focus {    color: #fff;    background-color: #337ab7;}.nav-stacked > li {    float: none;}.nav-stacked > li + li {    margin-top: 2px;    margin-left: 0;}.nav-tabs {    border-bottom: 1px solid #ddd;}.nav-tabs > li {    float: left;    margin-bottom: -1px;}.nav-tabs > li > a {    margin-right: 2px;    line-height: 1.42857143;    border: 1px solid transparent;    border-radius: 4px 4px 0 0;}.nav-tabs > li > a:hover {    border-color: #eee #eee #ddd;}.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus {    color: #555;    cursor: default;    background-color: #fff;    border: 1px solid #ddd;    border-bottom-color: transparent;}

更多请参考菜鸟教程：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

阅读全文

2 0