bootstrap学习

提莫队长

发布于 2019-02-21 14:47:05

1.3K0

发布于 2019-02-21 14:47:05

文章被收录于专栏：刘晓杰刘晓杰

准备工作：

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017年07月16日，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

bootstrap

登录后参与评论

0 条评论

热度

bootstrap学习

bootstrap学习

准备工作：

1.设置栅栏式布局

2.表单

3.导航栏

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐