文档章节

Bootstrap3

莎莉翁
 莎莉翁
发布于 2014/10/21 10:26
字数 2109
阅读 65
收藏 0

Bootstrap3(以下我就简称BT)环境搭建

从http://getbootstrap.com/getting-started/获取BT里面包含css fonts js 三个文件夹 在HTML文件头里引入这些就OK了.如果不想下载也可以用官方给出的CDN

  1. <!-- Latest compiled and minified CSS -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  
      
    <!-- Optional theme -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">  
      
    <!-- Latest compiled and minified JavaScript -->  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

BT网格系统

网格的意思就是把页面分割成格子按照每行分成12列(如果希望修改成24列等等可以LESS重编译自己定制). 网格系统可以根据设备的视口响应当小于767px的时候列就会垂直排列,当然列加起来等于12.下面看例子

  1. <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <title>Browser Show</title>  
            <meta name="viewport" content="width=device-width, initial-scale=1.0">  
            <meta charset='utf-8'>  
            <meta http-equiv="X-UA-Compatible" content="IE=edge">  
            <link rel="shortcut icon" href="images/jigsaw.png">  
            <!-- Bootstrap -->  
            <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">  
            <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
            <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
            <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->  
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  
            <!--[if lt IE 9]>  
                <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>  
                <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>  
            <![endif]-->  
            <style type="text/css">  
                [class *= col-] {  
                    background: #e8e8e8;  
                    border: 2px solid #000;  
                }  
            </style>  
        </head>  
        <body>  
            <div class="container">  
                <div class="row">  
                    <div class="col-md-4">.col-md-4</div>  
                    <div class="col-md-8">.col-md-8</div>  
                </div>  
            </div>  
        </body>  
    </html>

这里的container 是让内容在页面的中间是一个容器

排版

排版我介绍一些常用到的.BT的默认字体是Helvetica 如果没有最后还有sans-serif. font-size 14px line-height 20px 段落的margin-bottom 10px

设置段落颜色代表不同语义

  1. <p class="text-warning">warning</p>  
    <p class="text-info">info</p>  
    <p class="text-success">success</p>

表格

BT3中有4种表格的样式分别是table-striped  条纹背景

table-bordered 带边框的

table-hover 鼠标放上带高亮的

table-condensed 紧凑型表格

下面是代码演示

  1. <!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <title>Browser Show</title>  
            <meta name="viewport" content="width=device-width, initial-scale=1.0">  
            <meta charset='utf-8'>  
            <meta http-equiv="X-UA-Compatible" content="IE=edge">  
            <link rel="shortcut icon" href="images/jigsaw.png">  
            <!-- Bootstrap -->  
            <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">  
            <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
            <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
            <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->  
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  
            <!--[if lt IE 9]>  
                <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>  
                <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>  
            <![endif]-->  
              
        </head>  
        <body>  
            <div class="container">  
                <table class="table table-striped">  
                    <thead>  
                        <tr>  
                            <th>name</th>  
                            <th>ID</th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                    </tbody>  
                </table>  
                <table class="table table-bordered">  
                    <thead>  
                        <tr>  
                            <th>name</th>  
                            <th>ID</th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                    </tbody>  
                </table>  
                <table class="table table-hover">  
                    <thead>  
                        <tr>  
                            <th>name</th>  
                            <th>ID</th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                    </tbody>  
                </table>  
                <table class="table table-condensed">  
                    <thead>  
                        <tr>  
                            <th>name</th>  
                            <th>ID</th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                        <tr>  
                            <td>mike</td>  
                            <td>123</td>  
                        </tr>  
                    </tbody>  
                </table>  
            </div>  
        </body>  
    </html>

也可以给每一行添加颜色 有3中样式 success warning info 这个上面已经介绍过了 和段落的一样

表单

BT3提供的表单可以让输入框圆角, 选中的时候会有蓝色光晕等

  1. <!DOCTYPE html>  
    <html lang="zh-CN">    
    <head>  
        <title>Browser Show</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <meta charset='utf-8'>  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <link rel="shortcut icon" href="images/jigsaw.png">  
        <!-- Bootstrap -->  
        <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">  
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->  
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  
        <!--[if lt IE 9]>  
                <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>  
                <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>  
            <![endif]-->  
      
    </head>  
      
    <body>  
        <div class="container">  
            <div class="row">  
                <form role="form">  
                    <div class="form-group">  
                        <label for="exampleInputEmail1">Email address</label>  
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">  
                    </div>  
                    <div class="form-group">  
                        <label for="exampleInputPassword1">Password</label>  
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">  
                    </div>  
                    <div class="form-group">  
                        <label for="exampleInputFile">File input</label>  
                        <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">Submit</button>  
                </form>  
      
            </div>  
        </div>  
    </body>  
      
    </html>

这里注意的是.最好将输入框放到form-group中 为了增强搜索引擎的阅读必须有label标签 但是如何不让其显示可以添加.sr-only

水平排列的表单可以给form 添加form-horizontal类

可以通过input-lg input-sm控制输入框的高度 宽度是利用网格系统col-md-xx 来控制的

  1. <form role="form">  
         <div class="form-group">  
                <label for="exampleInputEmail1">Email address</label>  
                 <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Enter email">  
          </div>  
    </form>


可以再输入框的前面添加一些提示标记


  1. <div class="form-group">  
        <div class="input-group">  
          <div class="input-group-addon">@</div>  
          <input class="form-control" type="email" placeholder="Enter email">  
        </div>  
      </div>

按钮

BT3提供了.7中按钮的样式 不同颜色 也提供4种按钮的大小 其中一种是btn-block 这个意思就是 让按钮充满整个行

请看代码

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <button type="button" class="btn">button</button>  
    <button type="button" class="btn btn-primary btn-lg">button</button>  
    <button type="button" class="btn btn-info btn-sm">button</button>  
    <button type="button" class="btn btn-success btn-xs">button</button>  
    <button type="button" class="btn btn-warning btn-block">button</button>  
    <button type="button" class="btn btn-danger">button</button>  
    <button type="button" class="btn btn-link">button</button>

感谢Glyphicons的工作人员的慷慨, 允许BT的使用者免费使用添加一个有情连接http://glyphicons.com/

在需要用到字体图标的地方添加以下代码

<span class="glyphicon glyphicon-search"></span>

下拉菜单

<div class="dropdown">  
    <button type="button" class="btn btn-primary dropdown-toggle" id='drop1' data-toggle="dropdown">drop <span class="caret"></span></button>  
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">  
        <li><a href="">asda</a></li>  
        <li><a href="">aaaa</a></li>  
        <li><a href="">wwww</a></li>  
    </ul>  
</div>

给button 添加dropdown-toggle类 还要添加data-toggle属性为dropdown

按钮组

实现2边都是圆角然后中间按钮和2边的都是紧挨的

<div class="btn-group">  
    <button type="button" class="btn">11</button>  
    <button type="button" class="btn">22</button>  
    <button type="button" class="btn">33</button>  
</div>

可以添加btn-group-lg 省去了给每一个按钮添加lg 这样整个按钮组都变大了

如果想让按钮不是水平排列而是垂直只要添加btn-group-vertical就OK了

导航

<ul class="nav nav-tabs" role="tablist">  
  <li class="active"><a href="#">Home</a></li>  
  <li><a href="#">Profile</a></li>  
  <li><a href="#">Messages</a></li>  
</ul>

更换成nav-pills 并添加nav-stacked 可以让导航变成垂直的 胶囊样式

导航条

navbar-fixed-top导航条固定在顶部

navbar-fixed-bottom固定在底部   

这2个都需要你给body 添加margin 来覆盖掉默认的不然导航条会 遮盖主体内容 

body { padding-top: 70px; }

下面引用BT官方文档里的一段代码来演示BT的导航条是可以响应式的导航条.当你在手机上浏览的时候导航条会被折叠 条目会在右侧的一个小图标中, 你点击图标会出来

静止在顶部navbar-static-top

反色navbar-inverse


当你屏幕宽度变小时候会发生这个情况

右侧的3横条 所有导航里的条目就隐藏在这里

   <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

分页

<ul class="pagination">  
     <li><a href="">«</a></li>  
     <li><a href="">1</a></li>  
     <li><a href="">2</a></li>  
     <li><a href="">3</a></li>  
     <li><a href="">»</a></li>  
 </ul>

可以用pagination-lg  pagination-sm来控制大小

巨幕

<div class="container">  
    <div class="jumbotron">  
        <h1>Hello CSDN</h1>  
        <p>This is a page for BT</p>  
    </div>  
</div>

警告框

<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>  
<strong>Warning!</strong> You finished the mission</div>

alert-dismissible 的意思是带有关闭按钮的警告框 


© 著作权归作者所有

莎莉翁
粉丝 0
博文 13
码字总数 5767
作品 0
美国
私信 提问
david/jshow for bootstrap

#jshow for bootstrap jshow for bootstrap 是一款适合于后台管理的bootstrap插件,能够更好的使用bootstrap的Modal组件,方便你的开发和使用。 欢迎大家访问:http://runjs.cn/detail/tmzc...

david
2014/01/21
0
0
Bootstrap2和3的区别与选择

相信大家对Bootstrap都已经不陌生了,这个在网站建设领域赫赫有名的前端开发框架可谓是受到了全球前端工程师的推崇。 不过自从推出了Bootstrap3版本以来,国内很多朋友都在Boostrap2和3的选择...

6pker
2014/12/27
678
0
Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果

在线演示 如果大家使用iOS或者android相关移动平台的话,对于页面滑动到最底端后的弹跳效果肯定不会陌生,在这篇教程中,我们将使用最新版的Bootstrap3和jQuery来生成一个类似移动设备app的w...

gbin1
2013/11/15
1K
0
12款程序员们最爱的Bootstrap模板

如果你还没有开始使用Bootstrap模板,那你可真是有够OUT,这是一个帮助你快速开发的工具,Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一...

gbin1
2014/09/18
192
0
1、 Bootstrap Dialog 使用

1、光是bootstrap.min.css 和bootstrap.min.js 还不够。因为Dialog 属于插件。还需要引入bootstrap-dialog.js 和bootstrap-dialog.css https://github.com/nakupanda/bootstrap3-dialog 这里......

我爱祥子
2016/07/13
153
0

没有更多内容

加载失败,请刷新页面

加载更多

可能是国内第一篇全面解读 Java 现状及趋势的文章

作者 | 张晓楠 Dragonwell JDK 最新版本 8.1.1-GA 发布,包括全新特性和更新! 导读:InfoQ 发布《2019 中国 Java 发展趋势报告》,反映 Java 在中国发展的独特性,同时也希望大家对 Java 有...

阿里云官方博客
12分钟前
2
0
Spring Boot 2.x基础教程:Swagger静态文档的生成

前言 通过之前的两篇关于Swagger入门以及具体使用细节的介绍之后,我们已经能够轻松地为Spring MVC的Web项目自动构建出API文档了。如果您还不熟悉这块,可以先阅读: Spring Boot 2.x基础教程...

程序猿DD
16分钟前
2
0
《毅力》读书笔记

1.确信你全身心地投入 2.准备好为目标进行艰难的跋涉 3.通过减少需要使用毅力的情形,为将来的挑战做好准备 4.尽可能具体细致地确定你的目标和实现目标的过程 5.把挑战分解为小而易于管理的小...

lingch
17分钟前
3
0
zk中快速选举FastLeaderElection实现

选举涉及概念 服务器状态 投票 如何选择投票? 协议 选举 如何进行选举? epoch 发送者 接收者 发送队列 接收队列 服务器状态 public enum ServerState { LOOKING,寻找Leader状态,当服务处于...

writeademo
20分钟前
2
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

Linux就该这么学
22分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部