Bootstrap基础

最新推荐文章于 2022-12-29 14:02:35 发布
最新推荐文章于 2022-12-29 14:02:35 发布
阅读量279 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaiaj/article/details/78769272
版权
起步 Bootstrap 概述 2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。 Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。 下载 国内文档翻译官网：http://www.bootcss.com 进入以上官网中Bootstrap3页面，下载： 下载完成后解压文件夹，得到一下原始项目结构： 主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。 css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是 css 源码映射表，在一些特定的浏览器工具中使用。 js 目录包含两个文件，是未压缩和压缩的 js 文件。 fonts 目录包含了不同后缀的字体文件。 创建第一个页面 我们创建一个 HTML5 的页面，并且将 Bootstrap 的核心文件引入，然后测试是否正常显示。 
<!DOCTYPE html>
<html lang="zh-CN">
  <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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for 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="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 
<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>
移动设备优先 Bootstrap 3 重写了整个框架，使其一开始就是对移动设备友好的，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。 为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。 
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式并不推荐所有网站使用，还是要看你自己的情况而定。 Normalize.css 为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 
<div class="container">
  ...
</div>

.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>
栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 移动设备优先 在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 
<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1, user-scalable=no">
布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等属性的原因，这两种容器类不能相互嵌套。 固定宽度 
<div class="container">

...

</div>
100%宽度 
<div class="container-fluid">
...
</div>
栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。 “行（row）”必须包含在 .container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 通过“行（row）”在水平方向创建一组“列（column）”。 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。 Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为.container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了 padding。 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。 列偏移 
<div class="row">
    <div class="col-md-8 a">8</div>
    <div class="col-md-3 a col-md-offset-2">3</div>
</div>
列嵌套 
<div class="row">
    <div class="col-md-9 a" style="padding: 0;">
    <div class="col-md-4 a">4</div>
    <div class="col-md-4 a">4</div>
    <div class="col-md-4 a">4</div>
</div>

    <div class="col-md-3 a">3</div>
</div>

交换位置

<div class="row">
        <div class="col-md-9 col-md-push-3 a">
                    9
        </div>

        <div class="col-md-3 col-md-pull-9 a">3</div>
</div>

排版样式
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；

段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

创建包含段落突出的文本

<p>Bootstrap框架</p>
<p class="lead">Bootstrap框架</p>
标题
        <h1>Bootstrap框架</h1>
        <h2>Bootstrap框架</h2>
        <h3>Bootstrap框架</h3>
        <h4>Bootstrap框架</h4>
        <h5>Bootstrap框架</h5>
        <h6>Bootstrap框架</h6>

我们从 Firebug 查看元素了解到，Bootstrap 分别对 h1 ~ h6进行了 CSS 样式的重构，并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。
内联元素使用标题字体
Bootstrap框架
在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题，//在标题元素内插入 small 元素

        <h1>Bootstrap框架<small>Bootstrap框架</small></h1>
        <h2>Bootstrap框架<small>Bootstrap框架</small></h2>
        <h3>Bootstrap框架<small>Bootstrap框架</small></h3>
        <h4>Bootstrap框架<small>Bootstrap框架</small></h4>
        <h5>Bootstrap框架<small>Bootstrap框架</small></h5>
        <h6>Bootstrap框架<small>Bootstrap框架</small></h6>

对齐

<p class="text-left">Bootstrap框架</p>
<p class="text-center">Bootstrap框架</p>
<p class="text-right">Bootstrap框架</p>
<p class="text-justify">Bootstrap框架</p>//浏览器支持有问题

列表排版

<ul class="list-unstyled">
            <li>Bootstrap框架</li>
            <li>Bootstrap框架</li>
            <li>Bootstrap框架</li>
            <li>Bootstrap框架</li>
        </ul>


        <ul class="list-inline">
            <li>Bootstrap框架</li>
            <li>Bootstrap框架</li>
            <li>Bootstrap框架</li>
            <li>Bootstrap框架</li>
        </ul>

代码

For example, <code>&lt;section&gt;</code> should be wrapped as inline.
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

表格
Bootstrap 提供了一些丰富的表格样式供开发者使用。

基本格式

<table class="table ">

注：我们可以通过 Firebug 查看相应的 CSS。

条纹状表格

<table class="table table-striped">

注：表格效果需要基于基本格式.table

带边框的表格

<table class="table table-bordered">

悬停鼠标

<table class="table table-hover">

状态类

<tr class="success">

注：一共五种不同的样式可供选择。

隐藏某一行

<tr class="active sr-only">

响应式表格
在小于768px，为表格加上边框

<table class="table table-responsive">

按钮
Bootstrap 提供了很多丰富按钮供开发者使用。

可作为按钮使用的标签或元素
转化成普通按钮

<button class="btn btn-default">Button</button>
<a href="###" class="btn btn-default">Link</a>
<input type="button" class="btn btn-default" value="Input"/>

注意事项有三点：

虽然按钮类可以应用到 和 元素上，但是，导航和导航条组件只支持 元素。
链接被作为按钮使用时的注意事项如果 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=”button” 属性。
我们总结的最佳实践是：强烈建议尽可能使用元素来获得在各个浏览器上获得相匹配的绘制效果。
预定义式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。

类名 解释

btn-default 默认样式
btn-success 成功样式
btn-info    一般信息样式
btn-warning 警告样式
btn-danger  危险样式
btn-primary 首选项样式
btn-link    链接样式
<button class="btn btn-default">Button</button>
        <button class="btn btn-primary">Button</button>
        <button class="btn btn-success">Button</button>
        <button class="btn btn-info">Button</button>
        <button class="btn btn-warning">Button</button>
        <button class="btn btn-link">Button</button>
        <button class="btn btn-danger">Button</button>

尺寸大小
从大到小的尺寸

<p>
        <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
            <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
            <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
            <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
            <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
        </p>

块级按钮
块级换行

<button class="btn  btn-block">Button</button>

激活状态

<button class="btn active">Button</button>

禁用状态

<button class="btn disabled">Button</button>
表单 Bootstrap 提供了一些丰富的表单样式供开发者使用。 基本格式 实现基本的表单样式 
    <form>
            <div class="form-group">
                <label>电子邮件</label>
                <input type="email" class="form-control" placeholder="请输入您的邮箱..." />
            </div>

            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" placeholder="请输入您的密码..." />
            </div>
        </form>
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 内联表单 让表单左对齐浮动，并表现为 inline-block 内联块结构 
<form class="form-inline">
注：当小于 768px，会恢复独占样式 表单合组 前后增加片段 
    <div class="form-group">
        <label>价格</label>
        <div class="input-group">
        <div class="input-group-addon">$</div>
            <input type="text" class="form-control" />
        <div class="input-group-addon">.00</div>
        </div>
    </div>
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。 水平排列 让表单内的元素保持水平排列 
<form class="form-horizontal"> 
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">

</div>
</div>
</form>
注：control-label 表示和父元素样式同步。 复选框和单选框 
            <div class="checkbox disabled">
                <label>
                <input type="checkbox" disabled/>体育
                </label>
            </div>
            <div class="checkbox">
                <label>
                <input type="checkbox" />音乐
                </label>
            </div>

            <label class="checkbox-inline">
                <input type="checkbox" disabled/>体育
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" />音乐
            </label>
下拉列表 
<select class="form-control">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
</select>
校验状态 设置为错误状态 
<div class="form-group has-error">
注：还有其他状态如下 样式 说明 has-error 错误状态 has-success 成功状态 has-warning 警告状态 label 标签同步相应状态 
<label class=" control-label">电子邮件</label>

添加额外的图标
文本框右侧内置文本图标

<div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label">电子邮件</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" placeholder="请输入您的邮箱..." />
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</div>

类名 含义
glyphicon-ok 成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态
控制尺寸
从大到小

<input type="email" class="form-control input-lg" placeholder="请输入您的邮箱..." />

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。
图片

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类
Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。

情景背景色
样式 描述
text-muted 柔和灰
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红
各种色调的背景

<p class="text-muted">BOOTSTRAP</p>
<p class="text-primary">BOOTSTRAP</p>
<p class="text-warning">BOOTSTRAP</p>
<p class="text-danger">BOOTSTRAP</p>
<p class="text-success">BOOTSTRAP</p>
<p class="text-info">BOOTSTRAP</p>

关闭按钮

<button type="button" class="close">&times;</button>

三角符号

<span class="caret"></span>

快速浮动
注：这个浮动其实就是 float，只不过使用了!important 加强了优先级。

<div class="pull-left a">aaaa</div>

块级居中

<div class="center-block">居中</div>

清理浮动

   <div style="border: 1px solid red;">
       <div class="pull-left a">aaaa</div>
        <div class="clearfix"></div>
   </div>

显示和隐藏

<div class="show">show</div>
<div class="hidden">hidden</div>

响应式工具
在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。

超小屏幕激活显示

<div class="visible-xs-block a">aaa</div>

超小屏幕激活隐藏

<div class="hidden-xs a">bbb</div>
注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。 小图标组件 Bootstrap 提供了免费的 263 个小图标（数了n次）。 部分图标 可以使用 或标签来配合使用，具体如下： 使用小图标 
<span class="glyphicon glyphicon-lock"></span>
<i class="glyphicon glyphicon-lock"></i>
也可以结合按钮 
<button class="btn btn-primary btn-xs">
    <span class="glyphicon glyphicon-lock"></span>
</button>
下拉菜单组件 下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。 基本格式 
<div class="dropdown open">
    <button class="btn btn-default" data-toggle="dropdown">
                下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu ">
        <li class="dropdown-header">下拉标题</li>
        <li><a href="#">首页</a></li>
        <li class="divider">
        <li><a href="#">资讯</a></li>
        <li><a href="#">产品</a></li>
        <li class="disabled"><a href="#">关于</a></li>
    </ul>
</div>
按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle=”dropdown”才能有效。对于菜单部分，设置 class=”dropdown-menu”才能自动隐藏并添加固定样式。设置 class=”caret”表示箭头，可上可下。 设置向上触发 
<div class=”dropup”>
菜单项居右对齐，默认值是dropdown-menu-left 
<ul class="dropdown-menu dropdown-menu-right">
设置菜单的标题，不要加超链接 
<li class="dropdown-header">下拉标题</li>
设置菜单的分割线 
<li class="divider"></li>
设置菜单的禁用项 
<li class="disabled"><a href="#">关于</a></li>
让菜单默认显示 
<div class="dropdown open">
按钮组组件 按钮组就是多个按钮集成在一个容器里形成独有的效果。 基本格式 
<div class="btn-group">
    <button class="btn btn-default">左   </button>
    <button class="btn btn-default">中   </button>
    <button class="btn btn-default">右   </button>
</div>
将多个按钮组整合起来便于管理 
<div class="btn-toolbar">
            <div class="btn-group">
            <button class="btn btn-default">左           </button>
            <button class="btn btn-default">中           </button>
            <button class="btn btn-default">右           </button>
            </div>
            <div class="btn-group">
            <button class="btn btn-default">左           </button>
            <button class="btn btn-default">中           </button>
            <button class="btn btn-default">右           </button>
            </div>
            <div class="btn-group">
            <button class="btn btn-default">左           </button>
            <button class="btn btn-default">中           </button>
            <button class="btn btn-default">右           </button>
            </div>
</div>
嵌套一个分组，比如下拉菜单 
<div class="btn-group">
    <button class="btn btn-default">左   </button>
    <button class="btn btn-default">中   </button>
    <button class="btn btn-default">右   </button>
    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    下拉菜单
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">下拉标题</li>
            <li><a href="#">首页</a></li>
            <li class="divider">
            <li><a href="#">资讯</a></li>
            <li><a href="#">产品</a></li>
            <li class="disabled"><a href="#">           关于</a></li>
        </ul>
    </div>
</div>
设置按钮组垂直排列 
<div class="btn-group-vertical"></div>

如果需要使用标签，则需要对每个按钮进行群组

<div class="btn-group-justified">
    <div class="btn-group">
        <button class="btn btn-default">左</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">左</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">左</button>
    </div>
</div>
输入框组件 文本输入框就是可以在元素前后加上文字或按钮，可以实现对表单控件的扩 展。 在左侧添加文字 
<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
</div>
在右侧添加文字 
<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">@163.com</span>
</div>
在两侧添加文字 
<div class="input-group">
    <span class="input-group-addon">$</span> 
    <input type="text" class="form-control"> 
    <span class="input-group-addon">.00</span>
</div>
设置尺寸，另外三种分别是默认、xs、sm。 
<div class="input-group input-group-lg">
左侧使用复选框和单选框 
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox">
    </span> 
    <input type="text" class="form-control">
</div>

<div class="input-group">
    <span class="input-group-addon">
        <input type="radio">
    </span> 
    <input type="text" class="form-control">
</div>
左侧使用按钮 
<div class="input-group">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">按钮</button>
    </span>
    <input type="text" class="form-control"> 
</div>
左侧使用下拉菜单或分列式 
<div class="input-group">
<span class="input-group-btn">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span> 
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">网站导航</li>
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li class="divider"><a href="#">产品</a></li>
        <li class="disabled"><a href="#">关于</a></li>
    </ul>
</span>
<input type="text" class="form-control"> </div>
导航组件 Bootstrap 提供了一组导航组件，用于实现 Web 页面的栏目操作。 基本导航标签页 
<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">产品</a></li>
    <li class="disabled"><a href="#">关于</a></li>
</ul>
胶囊式导航 
<ul class="nav nav-pills">
垂直胶囊式导航 
<ul class="nav nav-pills nav-stacked">
导航两端对齐 
<ul class="nav nav-pills nav-justified">
带下拉菜单的导航 
<ul class="nav nav-tabs">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">产品</a></li>
            <li class="disabled"><a href="#">关于</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    下拉菜单
                </a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">下拉标题</li>
                    <li><a href="#">首页</a></li>
                    <li class="divider">
                    <li><a href="#">资讯</a></li>
                    <li><a href="#">产品</a></li>
                    <li class="disabled"><a href="#">关于</a></li>
                </ul>
            </li>
        </ul>
导航条组件 导航条是在应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。 导航条是网站中作为导航页头的响应式基础组件。 基本格式 
<nav class="navbar navbar-default">
...
</nav>
反色调导航 
<nav class="navbar navbar-inverse">
...
</nav>

基本导航条，包含标题和列表

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">标题</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">产品</a></li>
            <li class="disabled">
            <a href="#">关于</a></li>
        </ul>
</div>
</nav>

导航条中使用表单

<form action="" class="navbar-form navbar-right">
    <div class="input-group">
        <input type="text" class="form-control"/>
        <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
                提交
            </button>
        </span>
    </div>
</form>

导航中使用按钮

<button class="btn btn-default navbar-btn navbar-right">按钮</button>

导航中使用对齐方式，left 和 right 

<button class="btn btn-default navbar-btn navbar-right">按钮</button>

导航中使用一段文本

<p class="navbar-text">我是一段文本</p>

非导航链接，一般需要置入文本区域内

<a href="#" class="navbar-link">非导航链接</a>

将导航固定在顶部，下面的内容会自动上移

<nav class="navbar navbar-default navbar-fixed-top">

将导航补丁在底部

<nav class="navbar navbar-default navbar-fixed-bottom">

静态导航，和页面等宽的导航条，去掉了圆角

<nav class="navbar navbar-default navbar-static-top">

路径组件
路径组件也叫做面包屑导航。
面包屑导航

<ol class="breadcrumb">
    <li><a href="#">首页      </a></li> 
    <li><a href="#">产品列 表</a></li>
    <li class="active">韩版 2015 年羊绒毛衣</li> 
</ol>

分页组件
分页组件可以提供带有展示页面的功能。
默认分页

<ul class="pagination pagination-lg">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li class="disabled"><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

首选项和禁用

<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>

设置尺寸，四种 lg、默认、sm 和 xs

<ul class="pagination pagination-lg">

翻页效果

<ul class="pager">
    <li><a href="#">上一页</a></li> 
    <li><a href="#">下一页</a></li>
</ul>

对齐翻页链接

<ul class="pager">
    <li class="previous"><a href="#">上一页</a></li> 
    <li class="next"><a href="#">下一页</a></li>
</ul>

翻页项禁用

<li class="previous disabled"><a href="#">上一页</a></li>

标签
在文本后面带上标签

<h3>标签 <span class="label label-default">new</span></h3>

不同色调的标签

<h3>标签 <span class="label label-primary">new</span></h3>
<h3>标签 <span class="label label-success">new</span></h3>
<h3>标签 <span class="label label-info">new</span></h3> 
<h3>标签 <span class="label label-warning">new</span></h3>
<h3>标签 <span class="label label-danger">new</span></h3>
徽章 未读信息数量徽章 信息 10 按钮中使用徽章 提交 3 激活状态自动适配色调 
<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首页 <span class="badge">2</span></a>
    </li>
    <li><a href="#">资讯</a></li> 
</ul>
巨幕组件 巨幕组件主要是展示网站的关键区域。 在固定的范围内，有圆角 
<div class="container">
    <div class="jumbotron"> 
        <h2>网站标题</h2> 
        <p>这是一个学习性的网站！</p>
        <p><a href="#" class="btn btn-default">更多内容</a></p> 
    </div>
</div>
100%全屏，没有圆角 
<div class="jumbotron"> 
    <div class="container">
        <h2>网站标题</h2> <p>这是一个学习性的网站！</p>
        <p><a href="#" class="btn btn-default">更多内容</a></p> 
    </div>
</div>
页头组件 增加一些空间 
<div class="page-header">
    <h1>大标题 
        <small>小标题</small>
    </h1> 
</div>
缩略图组件 缩略图配合响应式 
<div class="container">
    <div class="row">

        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

            <img src="img/pic.png" alt=""> </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

            <img src="img/pic.png" alt=""> </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

            <img src="img/pic.png" alt=""> </div>

        </div>

        <div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

            <img src="img/pic.png" alt=""> </div>

        </div>

    </div>

</div>
自定义内容 
<div class="container">
    <div class="row">

    <div class="col-xs-6 col-md-3 col-sm-4"> 
        <div class="thumbnail">

        <img src="img/pic.png" alt=""> 
            <div class="caption">
            <h3>图文并茂</h3>
            <p>这是一个图片结合文字的缩略图</p>
            <p>
                <a href="#" class="btn btn-default">进入</a>
            </p>
            </div>
        </div>
    </div>

    <div class="col-xs-6 col-md-3 col-sm-4"> 
        <div class="thumbnail">
            <img src="img/pic.png" alt=""> 
            <div class="caption">
                <h3>图文并茂</h3> 
                <p>这是一个图片结合文字的缩略图</p> 
                <p>
                    <a href="#" class="btn btn-default">进入</a>
                </p>
            </div>
        </div>
    </div>


<div class="col-xs-6 col-md-3 col-sm-4">
    <div class="thumbnail">
        <img src="img/pic.png" alt="">
        <div class="caption"> 
            <h3>图文并茂</h3> 
            <p>这是一个图片结合文字的缩略图</p>
            <p>
                <a href="#" class="btn btn-default">进入</a>
            </p>
        </div>
    </div>
</div>

<div class="col-xs-6 col-md-3 col-sm-4">
    <div class="thumbnail">
        <img src="img/pic.png" alt="">
            <div class="caption">
                <h3>图文并茂</h3> 
                <p>这是一个图片结合文字的缩略图</p> 
                <p><a href="#" class="btn btn-default">进入</a>
                </p>
            </div>
        </div>
    </div>
</div>

</div>
警告框组件 警告框组件是一组预定义消息。 基本警告框 
<div class="alert alert-success">Bootstrap</div> 
<div class="alert alert-info">Bootstrap</div> 
<div class="alert alert-warning">Bootstrap</div> 
<div class="alert alert-danger">Bootstrap</div>
带关闭的警告框 
<div class="alert alert-success"> Bootstrap
    <button type="button" class="close" data-dismiss="alert"> 
        <span>&times;</span>
    </button>
</div>
自动适配的超链接

<div class="alert alert-success">
    Bootstrap，请到官网 
    <a href="#" class="alert-link">下载</a> 
</div>
Well 组件 这个组件可以实现简单的嵌入效果。 嵌入效果 
<div class="well">

Bootstrap

</div>
有 lg 和 sm 两种可选值 
<div class="well well-lg"> Bootstrap

</div>
进度条组件 进度条组件为当前工作流程或动作提供时时反馈。 基本进度条 
<div class="progress">
    <div class="progress-bar" style="width: 60%;">60%
    </div> 
</div>
最低值进度条 
<div class="progress">
    <div class="progress-bar" style="min-width:20px">
    0%</div> 
</div>
结合情景的进度条 
<div class="progress">
    <div class="progress-bar progress-bar-success" 
style="min-width: 20px; width: 60%;">60%</div>
</div>
**条纹状，IE10+支持 ** 
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="min-     width:20px;width:60%">60%</div>
</div>
动画效果 
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:60%">60%</div>
</div>
堆叠效果 
<div class="progress">
    <div class="progress-bar progress-bar-success" style="min-width:20px;width:35%">35%</div>
    <div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%">20%</div>
    <div class="progress-bar progress-bar-danger" style="min-width:20px;width:10%">10%</div>
</div>
媒体对象组件 媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。 
<div class="meida">
   <div class="media-left media-top">
    <img src="img/small.png" alt="" class="media-object">
   </div>
   <div class="media-body">
    <h4 class="meida-heading">内容标题</h4>
    <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。</p>
   </div>
</div>

媒体对象在右边

<div class="media">

    <div class="media-body">

        <h4 class="media-heading">标题</h4>
        <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。</p>

    </div>

    <div class="media-right">

     <img src="img/small.png" alt="" class="media-object"> 
    </div>

</div>

媒体对象列表

<ul class="media-list">
    <li class="media"> //将每个 media 存放在 media-body 内后即可
    ...代码较多，具体看视频
    </li>
</ul>
列表组组件 列表组组件用于显示一组列表的组件。 
<ul class="list-group">
    <li class="list-group-item">1.这是起始</li>
    <li class="list-group-item">2.这是第二条数据</li> 
    <li class="list-group-item">3.这是第三排信息</li> 
    <li class="list-group-item">4.这是末尾</li>
</ul>
列表项带勋章 
<li class="list-group-item">
    MESSAGE
    <span class="badge">10</span>
</li>
链接和首选 
<div class="list-group">
    <a href="#" class="list-group-item active">1.这是起始
     <span class="badge">10</span>
    </a> 
    <a href="#" class="list-group-item">2.这是第二条数据</a>
    <a href="#" class="list-group-item">3.这是第三排信息</a>
    <a href="#" class="list-group-item">4.这是末尾</a>
</div>
按钮式列表 

<div class="list-group">
    <button class="list-group-item active">1.这是起始       
        <span class="badge">10</span>
    </button>
    <button class="list-group-item">2.这是第二条数据</button>
    <button class="list-group-item">3.这是第三排信息</button> 
    <button class="list-group-item">4.这是末尾</button>
</div>
设置项目被禁用 
 class="list-group-item disabled"
情景类 为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置.active 状态。 
<li class="list-group-item list-group-item-success"> 3.这是第三排信息</li>
定制内容 列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。 
<div class="list-group">
    <a href="#" class="list-group-item active"> 
        <h4>内容标题</h4> 
        <p class="list-group-item-text">这里是相关内容详情！</p>
    </a>
    <a href="#" class="list-group-item"> 
        <h4>内容标题</h4>
        <p class="list-group-item-text">这里是相关内容详情！</p>
    </a>
    <a href="#" class="list-group-item">
         <h4>内容标题</h4>
         <p class="list-group-item-text">这里是相关内容详情！</p> 
    </a>
</div>
面板组件 面板组件就是一个存放内容的容器组件。 默认的.panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。 
<div class="panel panel-default">

<div class="panel-body">
这里是详细内容区！ 
</div>

</div>
带标题容器的面板 
<div class="panel panel-default"> 
    <div class="panel-heading">
    面板标题
    </div>
    <div class="panel-body">
    这里是详细内容区！
    </div>
</div>
//也可以设置标题元素 
<div class="panel-heading">

<h3 class="panel-title">面板标题</h3> 
</div>
带注脚的面板 把按钮或次要的文本放入 .panel-footer 容器内。 
<div class="panel-footer">
这里是底部

情景效果：default、success、info、warning、danger、primary 

<div class="panel panel-success">
表格类面板 
<div class="panel panel-default"> 
    <div class="panel-heading">
表格标题 
    </div>

    <div class="panel-body">

        <p>这里是表格标题的详细内容！</p> 
    </div>
    <table class="table"> 
        <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

        </tr>

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

        </tr>

    </table>

</div>
列表类面板 
<div class="panel panel-default"> 
    <div class="panel-heading">
表格标题 
    </div>
    <div class="panel-body">
        <p>这里是表格标题的详细内容！</p> 
    </div>
    <ul class="list-group">
        <li class="list-group-item">1.这里是首页</li>
        <li class="list-group-item">2.这里是第二个项目</li> 
        <li class="list-group-item">3.这里是第三个项目</li> 
        <li class="list-group-item">4.这里是第四个项目</li>
    </ul>
</div>
响应式嵌入组件 根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。 这些规则可以直接用于>&#12289;&#12289;&#21644;&#20803;&#32032;&#12290;&#10;16:9 &#21709;&#24212;&#24335;&#10;&#10;&#10;&#10;&#10; 
<div class="embed-responsive embed-responsive-16by9"> 
    <embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
    </embed>
</div>

4:3 响应式

<div class="embed-responsive embed-responsive-4by3">
    <embed width="100%" height="100%"
    src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
    </embed>
</div>
再让我多睡几分钟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 基础组件
Junds0的博客
09-09 542
本关需要你掌握Bootstrap的下拉菜单。本关需要你掌握Bootstrap的字体图标。本关需要你掌握Bootstrap的导航。
bootstrap基础
要把所有那些负面的信息当做对自身行为的评价，而不是对自身价值的评判。
12-21 1042
bootstrap方法用于样本数较少时的数学统计和参数估计。其数学原理基于格里汶科定理。以下知识来自于浙江大学版的《概率论与数理统计》一书第10章"Bootstrap方法"。与总体分布函数F(x)只有微小的差别，在实际上可以当多F(x)来使用。bootstrap由美国数学家Efron于20世界70年代创建。对于任意实数x当n充分大时，经验分布函数的任一观察值。
Bootstrap基础知识
li_peng_yuan的博客
11-14 4181
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
Bootstrap：Bootstrap基础入门笔记
零小唬的博客
12-29 238
Bootstrap：Bootstrap基础入门笔记
Bootstrap基础学习
09-03
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。它使用了流行的浏览器技术，给web开发提供了时尚的版式，表单，buttons，表格...
Bootstrap基础教程
06-19
Bootstrap基础教程.pdf Bootstrap简易教程Bootstrap基础教程.pdf Bootstrap简易教程
bootstrap基础教程对应源码
05-28
《bootstrap基础教程》对应源码，内容包括 13个章节对应的源码
BOOTSTRAP基础
01-26
这里是我一些学习的BOOTSTRAP基础，希望对你们有用，现在已经转行了
Bootstrap基础视频教程
07-22
内容包括Bootstrap起步、Bootstrap全局css样式概览、Bootstrap全局css样式_栅格、Bootsrtap全局css样式_排版、Bootstrap全局css样式_代码、Bootstrap组件_字体图标、Bootstrap组件_按钮组等。 资源太大，传百度网盘...
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
基于Linux的私有文件服务器(网盘).zip
04-29
基于Linux的私有文件服务器(网盘)
源代码-access 管理 系统 API 文件.zip
04-29
源代码-access 管理 系统 API 文件.zip
海康机器人智能读码器工业协议操作手册V1.0.2.pdf
04-29
海康机器人智能读码器工业协议操作手册V1.0.2.pdf
256ssm-mysql-jsp 在线捐赠系统.zip（可运行源码+数据库文件+文档）
04-29
根据需求，确定系统采用JSP技术，JAVA作为编程语言，MySQL作为数据库。整个系统要操作方便、易于维护、灵活实用。主要实现了系统用户管理、注册用户管理、信息发布管理、医疗物品分类管理、项目信息管理、捐赠项目管理、志愿者申请管理、个人求助管理、个人捐赠统计、系统管理等功能。 前台用户模块包括： 1. 首页：网站打开的第一个页面，显示网站的最新信息。 2. 用户注册/登录、3. 新闻资讯、4. 暖心故事、5. 我要求助、6. 我要捐赠、7. 我们的项目、8. 志愿者中心：实现志愿者中心的列表显示、9. 系统简介、10. 在线留言、11. 用户后台 后台管理员模块包括： 1. 系统用户管理、2. 注册用户管理、3. 信息发布管理、4. 医疗物品分类管理、5. 项目信息管理、6. 捐赠项目管理、7. 志愿者申请管理、8. 个人求助管理：管理员可以设置个人求助审核状态，可以删除个人求助审核信息。 9. 个人捐赠统计：管理员可以查看个人捐赠统计信息。 10. 系统管理：管理员可以对留言板信息进行查看、回复或删除 关键词：医药捐赠系统；JSP;MySQL
系统性文献综述的撰写（Systematic Review）-范文2.pdf
04-29
参考范文：Findings on Teaching Machine Learning inHigh School: A Ten -Year SystematicLiterature Review 用于学习研究，侵权请联系本人删除
bootstrap基础教程第二版 源代码
02-05
《Bootstrap基础教程第二版》是一本介绍如何使用Bootstrap框架构建网站的教程书籍。它详细介绍了Bootstrap框架的基本概念、各种组件、布局、网站响应式设计等内容。书中还附带了大量源代码供读者学习和实践。 源代码部分主要包括了书中所使用的示例代码和实例项目的完整代码。通过阅读源代码，读者可以更加直观地了解Bootstrap框架的实际应用。源代码的内容涵盖了从简单的按钮、表单到复杂的导航栏、响应式网格布局等方方面面，能够帮助读者全面掌握Bootstrap框架的应用技巧。 读者可以通过源代码来进行实际操作，将书中所介绍的知识运用到实际项目中。这将有助于读者更深入地理解Bootstrap框架的使用方法，并且提升他们的实际操作能力。通过不断地实践，读者可以逐步掌握如何将Bootstrap框架应用到自己的网站项目中，提升网站的设计和交互体验。 总之，《Bootstrap基础教程第二版》的源代码部分是这本书的重要组成部分，它为读者提供了丰富的实例代码和项目示例，帮助他们更加深入地学习和掌握Bootstrap框架的应用。通过阅读和实践源代码，读者可以更系统地学习Bootstrap框架，并且能够将所学知识运用到实际项目中，从而提升自己的网站开发能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值