bootstrap

来源：互联网发布：硬盘使用寿命知乎编辑：程序博客网时间：2024/06/14 00:46

网址：
bootstrap中文网
菜鸟教程

css部分

默认容器

container/container-fluid

网格系统

col：列；row：行
* 超小屏幕：.col-xs-
* 小型屏幕：.col-sm-
* 中型屏幕：.col-md-
* 大型屏幕：.col-lg-

列偏移

.col-md-offset-

标题

bootstrap重新定义了标题标签，small作为内联子标签

列表

// 内联列表<ul class="list-inline">  <li>Item 1</li>  <li>Item 2</li>  <li>Item 3</li>  <li>Item 4</li></ul>

表格

.table使用boostrap表格样式
.table-striped：表格条纹
.table-bordered：添加边框
.table-hover：划过颜色
.table-condensed：行内边距更加紧凑
.table-responsive：响应式表格

tr上添加类名可以改变颜色：active、success、 warning、danger

表单

向父元素添加 role=”form”。
把标签和控件放在一个带有 class .form-group 的 *
中。这是获取最佳间距所必需的。
向所有的文本元素、和添加 class =”form-control” 。

//基础表单入门<form role="form">  <div class="form-group">    <label for="name">名称</label>    <input type="text" class="form-control" id="name" placeholder="请输入名称">  </div>  <div class="form-group">    <label for="inputfile">文件输入</label>    <input type="file" id="inputfile">    <p class="help-block">这里是块级帮助文本的实例。</p>  </div>  <div class="checkbox">    <label>      <input type="checkbox">请打勾    </label>  </div>  <button type="submit" class="btn btn-default">提交</button></form>

内联表单：标签添加 class .form-inline
水平表单：
1. 向父元素添加class.form-horizontal
  2.把标签和控件放在一个带有class.form-group的
  中。
  3.向标签添加 class .control-label。

// 水平表格<form class="form-horizontal" role="form">  <div class="form-group">    <label for="firstname" class="col-sm-2 control-label">名字</label>    <div class="col-sm-10">      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">    </div>  </div>  <div class="form-group">    <label for="lastname" class="col-sm-2 control-label">姓</label>    <div class="col-sm-10">      <input type="text" class="form-control" id="lastname" placeholder="请输入姓">    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <div class="checkbox">        <label>          <input type="checkbox">请记住我        </label>      </div>    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <button type="submit" class="btn btn-default">登录</button>    </div>  </div></form>

按钮

.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式（未被操作）
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮

<!-- 标准的按钮 --><button type="button" class="btn btn-default">默认按钮</button><!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --><button type="button" class="btn btn-primary">原始按钮</button><!-- 表示一个成功的或积极的动作 --><button type="button" class="btn btn-success">成功按钮</button><!-- 信息警告消息的上下文按钮 --><button type="button" class="btn btn-info">信息按钮</button><!-- 表示应谨慎采取的动作 --><button type="button" class="btn btn-warning">警告按钮</button><!-- 表示一个危险的或潜在的负面动作 --><button type="button" class="btn btn-danger">危险按钮</button><!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --><button type="button" class="btn btn-link">链接按钮</button>

图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
.img-responsive：响应式

辅助类

文本

text-muted “text-muted” 类的文本样式
.text-primary “text-primary” 类的文本样式
.text-success “text-success” 类的文本样式
.text-info “text-info” 类的文本样式
.text-warning “text-warning” 类的文本样式
.text-danger “text-danger” 类的文本样式

背景

.bg-primary 表格单元格使用了 “bg-primary” 类
.bg-success 表格单元格使用了 “bg-success” 类
.bg-info 表格单元格使用了 “bg-info” 类
.bg-warning 表格单元格使用了 “bg-warning” 类
.bg-danger 表格单元格使用了 “bg-danger” 类

响应式

.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

下拉菜单

<div class="dropdown">    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题        <span class="caret"></span>    </button>    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">        <li role="presentation">            <a role="menuitem" tabindex="-1" href="#">Java</a>        </li>        <li role="presentation">            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>        </li>        <li role="presentation">            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>        </li>        <li role="presentation" class="divider"></li>        <li role="presentation">            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>        </li>    </ul></div>

按钮组

// 基础按钮组<div class="btn-group">    <button type="button" class="btn btn-default">按钮 1</button>    <button type="button" class="btn btn-default">按钮 2</button>    <button type="button" class="btn btn-default">按钮 3</button></div>

垂直按钮组：class .btn-group-vertical

输入框组

。。。

导航元素

以一个带有 class .nav 的无序列表开始
表格导航：class .nav-tabs

<p>标签式的导航菜单</p><ul class="nav nav-tabs">  <li class="active"><a href="#">Home</a></li>  <li><a href="#">SVN</a></li>  <li><a href="#">iOS</a></li>  <li><a href="#">VB.Net</a></li>  <li><a href="#">Java</a></li>  <li><a href="#">PHP</a></li></ul>

胶囊导航：class .nav-pills
垂直导航：class .nav-stacked
两端对齐：class .nav-justified
禁用连接：.disabled class

导航栏

向
标签添加 class .navbar、.navbar-default。
向上面的元素添加 role=”navigation”，有助于增加可访问性。
向
元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

<nav class="navbar navbar-default" role="navigation">    <div class="container-fluid">    <div class="navbar-header">        <a class="navbar-brand" href="#">标题</a>    </div>    <div>        <ul class="nav navbar-nav">            <li class="active"><a href="#">iOS</a></li>            <li><a href="#">SVN</a></li>            <li class="dropdown">                <a href="#" class="dropdown-toggle" data-toggle="dropdown">                    Java                    <b class="caret"></b>                </a>                <ul class="dropdown-menu">                    <li><a href="#">jmeter</a></li>                    <li><a href="#">EJB</a></li>                    <li><a href="#">Jasper Report</a></li>                    <li class="divider"></li>                    <li><a href="#">分离的链接</a></li>                    <li class="divider"></li>                    <li><a href="#">另一个分离的链接</a></li>                </ul>            </li>        </ul>    </div>    </div></nav>

分页

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

徽章

<span class="badge">50</span>

超大屏幕

<div class="container">   <div class="jumbotron">        <h1>欢迎登陆页面！</h1>        <p>这是一个超大屏幕（Jumbotron）的实例。</p>        <p><a class="btn btn-primary btn-lg" role="button">        学习更多</a>      </p>   </div></div>

页面标题

给标题添加适当间隙

<div class="page-header">    <h1>页面标题实例        <small>子标题</small>    </h1></div>

进度条

<div class="progress">    <div class="progress-bar" role="progressbar" aria-valuenow="60"         aria-valuemin="0" aria-valuemax="100" style="width: 40%;">        <span class="sr-only">40% 完成</span>    </div></div>

多媒体对象

<div class="media">    <a class="pull-left" href="#">        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"             alt="媒体对象">    </a>    <div class="media-body">        <h4 class="media-heading">媒体标题</h4>        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。    </div></div>

面板

<div class="panel panel-default">    <div class="panel-heading">        <h3 class="panel-title">            带有 title 的面板标题        </h3>    </div>    <div class="panel-body">        面板内容    </div></div>

js插件

模态框

<h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>            </div>            <div class="modal-body">在这里添加一些文本</div>            <div class="modal-footer">                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                <button type="button" class="btn btn-primary">提交更改</button>            </div>        </div><!-- /.modal-content -->    </div><!-- /.modal --></div>

0 0