bootsrtap (-)

1、text-muted:提示,使用浅灰色(#999).text-primary:主要,使用蓝色(#428bca).text-success:成功,使用浅绿色(#3c763d).text-info:通知信息,使用浅蓝色(#31708f).text-warning:警告,使用黄色(#8a6d3b).text-danger:危险,使用褐色(#a94442)

2、文本对齐风格:.text-left:左对齐 .text-center:居中对齐  .text-right:右对齐 .text-justify:两端对齐(用于段落)。

3、定义列表:

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

4、

无序列表ul 加 .list-unstyled 去点。  内联样式:.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}

.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}    

5、pre<pre>元素一般用于显示大块的代码,并保证原有格式不变。

.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

6、表单控件(文本域textarea)  <textarea class="form-control" rows="3"> </textarea>   

7、在Bootstrap框架中同样提供这几种效果。1、.has-warning:警告状态(黄色)2、.has-error:错误状态(红色)3、.has-success:成功状态(绿色)使用的时候只需要在form-group容器上对应添加状态类名。

8、图像 1、img-responsive:响应式图片,主要针对于响应式设计2、img-rounded:圆角图片3、img-circle:圆形图片4、img-thumbnail:缩略图片

9、按钮下拉菜单基本用法:

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" 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="#">下拉菜单项</a></li>
   …
   <li role="presentation" class="divider"></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名10、导航:水平导航 .nav-tabs   胶囊导航.nav-pills 垂直导航:nav-stacked  自适应导航  nav nav-tabs nav-justified11、导航条(navbar)第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”12、分页导航
<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>翻页分页导航
<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>
12.进度条:

<h2>基本进度条</h2>
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>

<h2>动态条纹进度条</h2>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

<h5>层叠条纹进度条</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

<h2>带Label的进度条</h2>
<h5>进度条1</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

媒体对象

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>
				
时间: 2024-10-03 10:03:58

bootsrtap (-)的相关文章

20个经典bootsrtap后台html网站模板推荐

今天为大家推荐20款不同风格的Bootstrap后台管理模板,每一款都经典可用,能预览和下载,保证让你挑得眼花缭乱. 1,Simpli flag蓝色 Simpli Flat蓝色管理模板是一款采用Flat扁平风格的响应式管理模板,功能齐全,设计优质,不管是PC,平板还是手机都能得到较好的体验效果,推荐. 在线演示             源码下载  2,Martix Admin 响应式设计,不同平台的体验效果非常棒,并且功能也同样齐全,值得收藏. 在线演示             源码下载  3,

20个经典bootsrtap后台html站点模板推荐

今天为大家推荐20款不同风格的Bootstrap后台管理模板,每一款都经典可用,能预览和下载,保证让你挑得眼花缭乱. 1,Simpli flag蓝色 Simpli Flat蓝色管理模板是一款採用Flat扁平风格的响应式管理模板,功能齐全,设计优质,无论是PC,平板还是手机都能得到较好的体验效果,推荐. 在线演示          源代码下载 2,Martix Admin 响应式设计,不同平台的体验效果很棒,而且功能也相同齐全,值得收藏. 在线演示          源代码下载 3,MetroNI

Bootsrtap表单

前面的话 表单是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. 同样,表单也是Bootstrap框架中的核心内容,本文将详细介绍Bootstrap的表单 基础表单 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制 fi

bootsrtap开发下拉菜单的2级嵌套

<html lang="en"> <head> <title>按钮</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=d

Python 第五十四章 bootsrtap

bootstrap 栅格系统 列偏移col-md-offset-x col-md-offset-x <div class="container-fluid"> <!-- <h1>xxxx</h1>--> <div class="row"> <div class="col-md-6 col-md-offset-3 c1"> </div> </div> 列

Bootstrap介绍

简介 4.0以前用less编写源码,4.0以后用sass进行编写源码,现在4.0以前版本的sass方案是后面迁移过去的.4.0以后将不再兼容IE8 less学习地址:http://lesscss.cn/ 安装less 通过node.js的包管理器进行安装(要提前安装node.js环境) lessss官方有一款基于node.js的库用于编译less 使用时首先安装less 全局安装:npm install -g less 本地安装:npm install less(要先定位到你要安装的目录) 编译

新的表格展示利器 Bootstrap Table Ⅱ

    上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.Bootstrap Bable 全部数据导出分析 在表格导出数据中,发现设置了分页参数,导出的数据仅为表格加载的分页参数数据,于是,针对这样的情况,通过设置分页参数的值,使表格可以加载更多的数据,可达到导出所有数据的功能需求.然而,在实际的实验中,发现此方案存在以下问题: 表格一次加载一千条数据时,网

Bootstrap 快速人门案例——前端最火的插件

今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更远,那么请勤劳一点,多看看代码,多多练习代码,如果你仔细研究代码,自己也可以写出一部分的css比较好的插件. 一.Bootstrap简介 详见官网: http://www.bootcss.com/ http://v3.bootcss.com/ 1.练习准备资源准备: 下载bootstrap资源: h

Bootstrap历练实例:大小Well

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:大小Well</title> <meta charset="utf-8" /> <meta name="viewpo