Bootstrap网页基础学习

来源：互联网发布：mac照片图库文件夹编辑：程序博客网时间：2024/05/17 22:15

Bootstrap框架

标题

<h1>或者使用类.h1

副标题

强调文本

class="lead"

文本样式

使用不同类：.text-danger(危险褐色).text-info(信息浅蓝)

文本对齐

类名text-left左对齐，text-justify两段对齐

无装饰列表

Class=”list-unstyled”

水平列表

Class=”list-inline”

代码

<kbd>模仿键盘风格</kbd>

<pre class=”pre-scrollable”>固定代码区域大小</pre>

表格<table>

class=”table-hover”

鼠标悬浮高亮

class=”table”

基础表格样式

class=”table-striped”

斑马线表格

class=”table-bordered”

带边框表格

class=”table-hover”

悬浮高亮

class=”table-condensed”

紧凑型的表格

class=”table-responsive”

响应式表格

表单<form>

Class=”form-horizontal”

水平排列

Class=”form-inline”

内联表单

表单元素基本样式

控制input高低

n为数字，控制宽度

禁用元素

表单显示成功、警告、错误状态，加class=”has-feedback”后会有图标

添加提示信息，随不同div状态显示不同效果

按钮<button>

基本按钮

Class=”btn btn-default”

默认按钮

Class=”btn btn-success/primary/info/warning/danger/link”>

定制按钮绿色/蓝色/浅蓝/黄色/红色/链接按钮

Class=”btn btn-lg/sm”

控制按钮大/小

Class=”btn btn-block”

按钮充满容器

Class=”disabled”

元素禁用的样式

把按钮放到一个组容器里

按钮组垂直显示

按钮等分显示

图像<img>

Class=”img-rounded/circle/responsive/thumbnail”

圆角、圆形、响应式、缩略图

缩略图

Class=”thumbnail”

缩略图容器

Class=”caption”

缩略图相关文本

图标<span>

class="glyphicon glyphicon-search/plus"

glyphicons.com网站提供的图标，搜索/加号

网格系统

行row包含在container中，子对象为列col-md-n，控制列宽度，一行所有列和为12

下拉菜单

Class=”divider”

分割线

Class=”dropdown-header”

菜单标题

Class=”pull-left/right”

菜单与父元素左/右对齐

导航

Class=”nav nav-tab”

标签型导航可以附加”active”,”disabled”类

Class=”nab nav-pills”

圆角导航

Class=”breadcrumbs”

面包屑导肮

导航条

Class=”navbar”

导航条外部容器

Class=”navbar-fixed-top”

导航条固定在页面上方

Class=”navbar-header”

导航条标题

Class=”navbar-navr”

导航条内容

Class=”navbar-form”

导航条表单

Class=”navbar-inverse”

黑色导航条

分页导航

Class=”pagination”

分页导航

Class=”pager”

翻页导航

标签

Class=”label label-danger”

错误标签

徽章

Class=”bage”

小图标徽章

警示框

Class=”alert alert-success/info/danger/warning

绿色/蓝色/红色/黄色警示框

Class=”dismissable”并且添加按钮<button class=”close” data-dismiss=”alert”>×</button>

可关闭的警示框

进度条

<div class=”progress”><div class=”progress-bar”>条上显示内容</div></div>

外层class=”progress”内层class=”progress-bar”

基本进度条，通过设置内层width属性来表示进度

Class=”progress-bar-success/info/warning/danger”

内层，绿色/蓝色/黄色/红色进度条，可以设置多个内层叠放显示

Class=”progress-striped”

外层，条纹进度条

Class=”progress-striped active”

外层，动态进度条

媒体对象

Class=”media”

Class=”media-list”内层class=”media”

媒体对象列表

列表组

Class=”list-group”内层class=”list-group-item”

class="list-group-item list-group-item-success/ifo/warning/danger"

绿色/蓝色/黄色/红色列表

面板

外层Class=”panel panel-default”

默认面板

内层clas=”panel-heading/body/footer”

内层面板的头、主体、底部

外层Class=”panel panel-primary/success/info/warning/danger”

蓝色/绿色/浅蓝/黄色/红色面板

记录一些相关例子:<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>Bootstrap实例</title>    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!--下拉菜单--><div class="dropdown"><!--使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，向上为dropup-->    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">        下拉菜单        <span class="caret"></span><!--三角-->    </button><!--使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和                自定义“data-toggle”属性-->    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">        <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”-->        <li><a href="#">下拉菜单项</a></li>        <li><a href="#">下拉菜单项</a></li>        <li><a href="#">下拉菜单项</a></li>        <li><a href="#">下拉菜单项</a></li>    </ul></div><!--导航条--><div class="navbar navbar-default">    <div class="navbar-header"><!--导航条标题-->        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">            <span class="sr-only">Toggle Navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>        </button>        <a href="##" class="navbar-brand">网站名</a>    </div>    <ul class="nav navbar-nav"><!--导航条内容-->        <li class="active"><a href="##">网站首页</a></li>        <li class="dropdown"><!--二级菜单-->            <a href="##" data-toggle="dropdown" class="dropdown-toggle">导航1                <span class="caret"></span>            </a>            <ul class="dropdown-menu">                <li><a href="##">导航1选项1</a></li>                <li><a href="##">导航1选项2</a></li>                <li class="disabled"><a href="##">导航1选项3</a></li>            </ul>        </li>        <li><a href="##">导航2</a></li>        <li><a href="##">导航3</a></li>        <li><a href="##">导航4</a></li>    </ul>    <form action="##" class="navbar-form navbar-left"><!--导航条搜索框-->        <div class="form-group">            <input type="text" class="form-control" placeholder="请输入关键词" />        </div>        <button type="submit" class="btn btn-default">搜索</button>    </form></div><!--响应式导航条--><div class="navbar navbar-default" role="navigation">    <div class="navbar-header">        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">            <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->            <span class="sr-only">Toggle Navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>        </button>        <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->        <a href="##" class="navbar-brand">网站标题</a>    </div>    <div class="collapse navbar-collapse navbar-responsive-collapse">        <!-- 屏幕宽度小于768px时，容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，展开。 -->        <ul class="nav navbar-nav">            <li class="active"><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="##">导航4</a></li>        </ul>    </div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></body></html>

0 0