本篇主要包括:

■  排版
■  Button
■  Icon
■  Nav和NavBar
■  List
■  Table
■  Form

排版

● 斜体:<em>
● 加粗体:<strong>
● 突出段落:class="lead"
● 字体颜色:class="text-success",class="text-muted",class="text-success",class="text-primary",class="text-warning"

                <h1>新浪体育讯</h1>
                <p class="text-success">这里是副标题</p>
                <p class="lead">在2014赛季亚冠联赛的<em>一场1/4决赛首回合比赛中</em>,<strong>广州恒大客场0-1负于西悉尼流浪者</strong>。比赛中,出现了包括张琳芃、郜林领到红牌在内的多次争议判罚。裁判专家张大樵在接受天津体育频道采访时表示拉罗卡对张琳芃的犯规比较严重,应该领到一张黄牌,而张琳芃打了拉罗卡的脸则属于严重犯规,主裁判哈桑向他出示红牌没有问题。哈桑张冠李戴,对萨巴犯规的是刘健,却向郜林出示了红牌。另外,张大樵认为哈桑在上半场漏判了恒大队的一个点球。</p>

Button

在<button>或<a>标签下,可以这样设置按钮的样式:
● 一般按钮:class="btn"
● 按钮颜色:class="btn btn-primary"
● 按钮尺寸:class="btn btn-primary btn-lg"

Icon

→打开网站:http://getbootstrap.com/
→点击components菜单项,在打开的页面中将看到所有的Icon以及对应class名

要应用这些Icons,只需要给span加上合适的class名:

<button class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-star"></span>菜单</button>

Nav和NavBar

            <div id="menu" class="navbar navbar-default">
                <div class="navbar-header">
                    <button class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-star"></span>菜单</button>
                    <div id="logo">
                        <a href='.'>
                            <h3>新浪体育</h3>
                        </a>
                    </div>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li class="nav active"><a href="#">主页</a></li>
                    <li class="nav"><a href="#">关于我们</a></li>
                    <li class="nav"><a href="#">联系我们</a></li>
                </ul>
            </div>
        </header>

不仅如此,导航也是自适应的,当把页面宽度缩小到一定程度,导航呈竖直排列。

也可以设置:当页面宽度缩小到一定程度,让导航消失。在ul外层包裹上一个class="navbar-collapse collapes"的div。

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav active"><a href="#">主页</a></li>
                        <li class="nav"><a href="#">关于我们</a></li>
                        <li class="nav"><a href="#">联系我们</a></li>
                    </ul>
                 </div>

再次把页面宽度缩小到一定程度,导航消失。

我还可以为<button>添加一个名为navbar-toggle的class,只有当页面宽度足够小,该button才出现。

<button class="btn btn-primary btn-lg navbar-toggle"><span class="glyphicon glyphicon-star"></span>菜单</button>

更有趣的是:如果我们为button增加data-toggle和data-target属性,当页面宽度足够小,button出现,点击button,可以让消失的导航再现。

 <button class="btn btn-primary btn-lg navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span>菜单</button>

.navbar-collapse是ul所在div的class名。

如果我们想让导航区域固定在页面最顶部,可以加名为navbar-fixed-top的class。

        <header class="container">
            <div id="menu" class="navbar navbar-default navbar-fixed-top">
                <div class="navbar-header">
                    <button class="btn btn-primary btn-lg navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span>菜单</button>
                    <div id="logo">
                        <a href='.'>
                            <h3>新浪体育</h3>
                        </a>
                    </div>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav active"><a href="#">主页</a></li>
                        <li class="nav"><a href="#">关于我们</a></li>
                        <li class="nav"><a href="#">联系我们</a></li>
                    </ul>
                 </div>
            </div>
        </header>

List

→在项目根文件下创建about.html
→about.html有一个ul

    <ul>
        <li>在以往的亚足联比赛中</li>
        <li>在以往的亚足联比赛中,日韩两国俱乐部球队在遭遇不公待遇时</li>
        <li>日韩两国足协、职业联盟和俱乐部均会去信亚足联</li>
        <li>这一次,中国足协也对此事给予关注</li>
        <li>也将去信给亚足联高层</li>
    </ul>    

当为ul添加class="list-unstyled"属性后:

当为ul再添加名为list-inline的class后:

如果这样设置ul:

    <ul class="list-group">
        <li class="list-group-item">在以往的亚足联比赛中</li>
        <li class="list-group-item">在以往的亚足联比赛中,日韩两国俱乐部球队在遭遇不公待遇时</li>
        <li class="list-group-item">日韩两国足协、职业联盟和俱乐部均会去信亚足联</li>
        <li class="list-group-item">这一次,中国足协也对此事给予关注</li>
        <li class="list-group-item">也将去信给亚足联高层</li>
    </ul>

如果在ul外层裹上一层div。

        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item">在以往的亚足联比赛中</li>
                <li class="list-group-item">在以往的亚足联比赛中,日韩两国俱乐部球队在遭遇不公待遇时</li>
                <li class="list-group-item">日韩两国足协、职业联盟和俱乐部均会去信亚足联</li>
                <li class="list-group-item">这一次,中国足协也对此事给予关注</li>
                <li class="list-group-item">也将去信给亚足联高层</li>
            </ul>
        </div>

如果我们为某个li设置名active的class。

        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item active">在以往的亚足联比赛中</li>
                <li class="list-group-item">在以往的亚足联比赛中,日韩两国俱乐部球队在遭遇不公待遇时</li>
                <li class="list-group-item">日韩两国足协、职业联盟和俱乐部均会去信亚足联</li>
                <li class="list-group-item">这一次,中国足协也对此事给予关注</li>
                <li class="list-group-item">也将去信给亚足联高层</li>
            </ul>
        </div>

在li中加名为badge的class。

        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item active"><span class="badge">15</span>在以往的亚足联比赛中</li>
                <li class="list-group-item">在以往的亚足联比赛中,日韩两国俱乐部球队在遭遇不公待遇时</li>
                <li class="list-group-item">日韩两国足协、职业联盟和俱乐部均会去信亚足联</li>
                <li class="list-group-item">这一次,中国足协也对此事给予关注</li>
                <li class="list-group-item">也将去信给亚足联高层</li>
            </ul>
        </div>

Table

如果什么都不加。

        <table>
            <thead>
                <tr>
                    <th>Actor</th>
                    <th>Character</th>
                </tr>
            </thead>
            <tr>
                <td>Jeff Bridges</td>
                <td>Jeffery ebowski</td>
            </tr>
            <tr>
                <td>John Goodman</td>
                <td>Walter Sobchak</td>
            </tr>
            <tr>
                <td>Julianne Moore</td>
                <td>Maude Lebowski</td>
            </tr>
        </table>

如果<table class="table">

如果<table class="table table-striped">

如果<table class="table table-striped table-hover">

如果<table class="table table-striped table-hover table-condensed">

如果把table包裹在如下div中。

        <div class="row">
            <div class="col-md-6">
                <table class="table table-striped table-hover table-condensed">
                ......
                </table>
            </div>
        </div>

如果改成col-md-12

        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped table-hover table-condensed">
                ......
                </table>
            </div>
        </div>

如果我们想让table自适应,可以在table外层再加一层div。

        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-condensed">
                    ......
                    </table>
                </div>
            </div>
        </div>


当页面宽度小于table宽度的时候,会出现水平滚动条。

Form

没有修饰前。

        <form>
            <label>Name</label>
            <input/>
            <label>Email</label>
            <input/>
            <label>Reason</label>
            <select>
                <option>Adoration</option>
                <option>Ordering a White Russian</option>
                <option>I am lost</option>
            </select>
            <label>Message</label>
            <textarea cols="40" rows="6"></textarea>
            <input type="submit" value="提交"/>
        </form>

改成如下:

        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="nameInput">Your Name</label>
                    <input type="text" name="nameInput" class="form-control" placeholder="e.g. Your Name"/>
                </div>
                <div class="form-group">
                    <label for="emailInput">Email</label>
                    <input type="email" name="emailInput" class="form-control" placeholder="e.g. Your Email"/>
                </div>
                <div class="form-group">
                    <label>Reason</label>
                    <select class="form-control">
                        <option>Adoration</option>
                        <option>Ordering a White Russian</option>
                        <option>I am lost</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Message</label>
                    <textarea cols="40" rows="6" class="form-control" placeholder="e.g. The Message"></textarea>
                </div>
                <input type="submit" value="提交" class="btn btn-success" />
            </form>
        </div>

参考资料:WilderMinds

“Bootstrap 3之美”系列类包括:

Bootstrap 3之美01-下载并引入页面

Bootstrap 3之美02-Grid简介和应用

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

Bootstrap 3之美04-自定义CSS、Theme、Package

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form的更多相关文章

  1. Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells

    本篇主要包括: ■  Page Header■  Breadcrumbs■  Button Groups■  Dropdowns■  Button Dropdowns■  用Button和Dropdo ...

  2. Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

    类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bo ...

  3. Bootstrap 3之美04-自定义CSS、Theme、Package

    本篇主要包括: ■  自定义CSS■  自定义Theme■  自定义Package 自定义CSS 有时候,需要自定义或重写Bootstrap默认的CSS.→在css文件夹下创建一个site.css→假 ...

  4. Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...

  5. Bootstrap 3之美02-Grid简介和应用

    本篇主要包括: ■  Grid简介■  应用Grid■  Multiple Grids Grid简介 Bootstrap中,把页面分成12等份,这就是所谓的Grid. 在Bootstrap中,用类名控 ...

  6. Bootstrap 3之美01-下载并引入页面

    本篇主要包括: ■ 下载Bootstrap 3■  Bootstrap 3引入页面 下载Bootstrap 3 →打开网站:http://getbootstrap.com/→点击屏幕中央位置的Down ...

  7. Bootstrap入门三:页面排版

    在Bootstrap中,页面的排版都是从全局的概念上出发,定制了主体文本.强调文本.标题.Code风格.按钮.表单.表格等格式,并运用CSS3的@font-face和伪元素一起实现了一套icon主题. ...

  8. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  9. 【Bootstrap基础学习】05 Bootstrap学习总结

    好吧,Copy了几天,这个总结算是把我对Bootstrap的一些理解写一下吧. Bootstrap只是一套别人写好的前端框架,直接拿来用就好. 不过对于专业的前端而言,如果不去把所有的代码都看一遍来理 ...

随机推荐

  1. R vs Python:构建data.frame、读取csv与统计描述

    一.Python 数据框就是典型的关系型数据库的数据存储形式,每一行是一条记录,每一列是一个属性,最终构成表格的形式,这是数据科学家必须熟悉的最典型的数据结构. 1.构建数据框 import pand ...

  2. 如何使用django+celery+RabbitMQ实现异步执行

    1)安装需要安装RabbitMQ.Celery和Django-celeryCelery和Django-celery的安装直接pip就好 2)修改settings.py在INSTALLED_APPS中加 ...

  3. 【LOJ】#2063. 「HAOI2016」字符合并

    题解 dp[i][j][S]表示区间[i,j]内剩余的数位状压后为S的最大值 这样转移起来不就是\(n^3 2^8\)了吗 冷静一下,我们可以发现一段区间内剩下的数位的个数是一定的,也就是我们可以在枚 ...

  4. css如何画出类似原生的线条?

    做前端的程序猿特别是移动端的,都很头疼遇到一种情况就是需要div底部加一个线条但是 1px的效果很粗,跟设计案上的不符合. 我的一个伙伴查找出来的一个解决方法: 在需要加上的线条的地方加上一个div ...

  5. 第一个web程序(ServletRequest , ServletResponse)

    一.ServletRequest 1.获取参数的方法(四种) > String getParameter(String name): 根据请求参数的名字, 返回参数值. 若请求参数有多个值(例如 ...

  6. matlab绘制心形函数

    matlab 7.0 绘制二维.三维心形函数       又到周六,下周就要迎来春节小长假了,想想都有些激动.在外漂了一整年,总于可以回家和父母团聚了,还有吃好吃的...,哎呀~想想都流口水呢.不过先 ...

  7. .NET Core改造工程直播

    [背景] 新项目需要跨平台,原来积累的.NET类库需要改造为.NET Core. [直播] 新增加的项目不支持排除文件 不支持定义条件编译常量,虽然在项目中能使用#if语法,但无地方定义DefineC ...

  8. 【set】【可持久化Trie】The 16th UESTC Programming Contest Preliminary K - Will the circle be broken

    题意:You are given an array A of N non-negative integers and an integer M. Find the number of pair(i,j ...

  9. 【堆优化Dijkstra】BZOJ4152- [AMPPZ2014]The Captain

    [题目大意] 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. [思路] 按照某维坐标排序,相邻两个点在这一维度 ...

  10. HDU 5683 zxa and xor 暴力模拟

    zxa and xor 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5683 Description zxa had a great interes ...