[布局] bootstrap基本标签总结
文件头:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>基础表格</title>
- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
- </head>
bootstrap在reset.css文件中设置margin为0,因此其他的标签需要重新设计margin。
1.h
<h>标签和普通使用方法一样。
定义了.h1~.h6六个类名,样式和标题样式一样。
副标题用<small>标签指出,必须包含在h标签内。
- <h1>Bootstrap标题一</h1>
- <div class="h1">Bootstrap标题一</div>
- <h1>Bootstrap标题一<small>我是副标题</small></h1>
2.p
定义<body>的字体库、字号、行高、颜色,<p>标签继承这些设置,单独设置margin-bottom为10px,使用方法同普通方法。
强调内容
增大:.lead;
加粗:<strong>; <b>(设置font-weight: bold)
斜体:<em>;<i> (设置font-style: italic)
不变:<cite>
变小:<small>,.small
强调类(颜色)
- .text-muted:提示,使用浅灰色(#999)
- .text-primary:主要,使用蓝色(#428bca)
- .text-success:成功,使用浅绿色(#3c763d)
- .text-info:通知信息,使用浅蓝色(#31708f)
- .text-warning:警告,使用黄色(#8a6d3b)
- .text-danger:危险,使用褐色(##a94442)
文本对齐
(设置text-align:center、left、right、justify)
☑ .text-left:左对齐
☑ .text-center:居中对齐
☑ .text-right:右对齐
☑ .text-justify:两端对齐
3.列表(ul ol dl)
Bootstrap对于列表,只是在margin上做了一些调整
- margin-top: 0;
- margin-bottom: 10px;
- 去除项目符号
- .list-unstyled
- (padding-left: 0;
- list-style: none;)
- 内联列表,制作水平导航
- .list-inline
- 代码
- <code> <pre> <kbd>
- <pre class=“.pre-scrollable”> 设置最大代码区域
- 4.表格
- 千万注意,你的<table>元素中一定不能缺少类名table
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
- <table class="table">
- <thead>
- <tr>
- <th>表格标题</th>
- <th>表格标题</th>
- <th>表格标题</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>表格单元格</td>
- <td>表格单元格</td>
- <td>表格单元格</td>
- </tr>
- <tr>
- <td>表格单元格</td>
- <td>表格单元格</td>
- <td>表格单元格</td>
- </tr>
- </tbody>
- </table>
- <tr>的不同行颜色
- <tbody>
- <tr class="active">
- <td>.active</td>
- <td>表示当前活动的信息</td>
- </tr>
- <tr class="success">
- <td>.success</td>
- <td>表示成功或者正确的行为</td>
- </tr>
- <tr class="info">
- <td >.info</td>
- <td>表示中立的信息或行为</td>
- </tr>
- <tr class="warning">
- <td>.warning</td>
- <td>表示警告,需要特别注意</td>
- </tr>
- <tr class="danger">
- <td>.danger</td>
- <td>表示危险或者可能是错误的行为</td>
- </tr>
- </tbody>
- 5.表单
- <form role=”form”>
- 默认垂直显示
- 用<div class=“form-group”>包围控件及其标签
- 对input select textarea设置.form-control
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
水平风格表单:标签在左,控件在右
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)
内联表单 :控件一行显示
在<form>元素中添加类名“form-inline”
表单控件
select:<select multiple class="form-control"> 选择多个
textarea: <textarea class="form-control" rows="3"></textarea>
radio,checkbox:div包着label包着input
- <div class="checkbox">
- <label>
- <input type="checkbox" value="">
- 记住密码
- </label>
- </div>
radio,checkbox:水平排列
div(class=”form-group”)包着label(class=”checkbox-inline”or“radio-inline”)包着input
禁用控件:在控件上添加disabled属性
<input class="input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled>
验证状态:form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback,最后加一个span存放icon
表单提示信息:
在form-group容器后加一个span,添加类名.help-block
button:四种方式,bootstrap用button实现,建议用button和a标签来制作按钮
<input type="button">
<input type="reset">
<input type="submit">
<button></button>
button样式
.btn
.btn-default
大小:
.btn-lg
.btn-sm
.btn-xs
块状按钮:按钮充满整个容器,没有padding和margin .btn-block
禁用按钮:添加类.disabled 或者添加属性disabled=“disabled”
网格系统
分为12列,可以嵌套
- .col-md-offset-4 .col-md-4 .col-md-push-* .col-md-pull-*
- <div class="container">
- <div class="row">
- <div class="col-md-8">
- 我的里面嵌套了一个网格
- <div class="row">
- <div class="col-md-6">col-md-6</div>
- <div class="col-md-6">col-md-6</div>
- </div>
- </div>
- <div class="col-md-4">col-md-4</div>
- </div>
- <div class="row">
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-8">
- <div class="row">
- <div class="col-md-4">col-md-4</div>
- <div class="col-md-4">col-md-4</div>
- <div class="col-md-4">col-md-4</div>
- </div>
- </div>
- </div>
- </div>
[布局] bootstrap基本标签总结的更多相关文章
- [布局]bootstrap基本标签总结2
缩略图 <div class="container"> <div class="row"> <div class="co ...
- bootstrap基本标签总结2
[布局]bootstrap基本标签总结2 缩略图 <div class="container"> <div class="row"> ...
- Django 的母板及布局(Bootstrap)
title: Django 的母板及布局(Bootstrap) tags: Django --- Django 的母板及布局(Bootstrap) Django 的母板是作为公共的部分,其他的页面都能 ...
- Android 性能优化 四 布局优化merge标签的使用
小白:之前分享了ViewStub标签的使用,Android还有其他优化布局的方式吗? 小黑:<merge />标签用于减少View树的层次来优化Android的布局.先来用个例子演示一下: ...
- 布局技巧2:合并布局(merge标签)
我们已经有文章向你描述如何使用<include />标签来重用和共享你的布局代码.这篇文章将向你阐述<merge />标签的使用以及如何与<include />标签 ...
- bootstrap基本标签总结[转]
文件头: DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 响应式布局 Bootstrap
github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...
- 响应式布局 Bootstrap(01)
1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...
- bootstrap 下 标签页跳转总结
最近遇到一个问题,是关于bootstrap中的标签页实现上的一些功能实现,现总结一下. 问题描述:点击其他标签页后,如何在点击搜索按钮后自动跳转到第一个标签页.如下图 通过对bootstrap框架里的 ...
随机推荐
- POJ_3356——最短编辑距离,动态规划
Description Let x and y be two strings over some finite alphabet A. We would like to transform x int ...
- python_Opencv_滑动条用法
前言: 创建一个简单的程序来说明滑动条用法:通过调节滑动条来设定画板颜色. 我们要创建一个窗口来显示显色,还有三个滑动条来设置B,G,R 的颜色. 当我们滑动滚动条是窗口的颜色也会发生相应改变. 默认 ...
- 2016 cocoapods的安装和使用以及版本升级遇到的问题
一.CocoaPods是什么? CocoaPods是一个负责管理iOS项目中第三方开源库的工具.CocoaPods的项目源码在Github上管理.该项目开始于2011年8月12日,在这两年多的时间里, ...
- X265编译中C2220错误的解决办法
x265编译过程中 C2220错误:根本原因是代码是英文代码页,而我们的操作系统中使用的是中文代码页: 解决办法1 逐个文件进行格式转换,我在ubuntu下用iconv命令试过,没成功: 解决办法2 ...
- Android中如何将dp,dip,sp与px相互转化
Android中有很多度量单位:比如常用的dp,dip,sp,px等,有时候需要将他们相互转换,有下面非常方便的方法: 比如sp转换成px: TypedValue.applyDimension(Typ ...
- The method of type must override a superclass method解决方式
工程导入myeclipse时,出现问题提示:The method of type must override asuperclass? annotation:@Override的原因 查阅了一下资料, ...
- Spark RDD API具体解释(一) Map和Reduce
本文由cmd markdown编辑.原始链接:https://www.zybuluo.com/jewes/note/35032 RDD是什么? RDD是Spark中的抽象数据结构类型,不论什么数据在S ...
- 【剑指offer】和为定值的连续正数序列
.可是他并不满足于此,他在想到底有多少种连续的正数序列的和为100(至少包含两个数).没多久,他就得到还有一组连续正数和为100的序列:18,19,20,21,22.如今把问题交给你,你能不能也非常快 ...
- ajax_post方式
test_ajax_post.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...
- 安装android studio 出现的路径问题 tools.jar' seems to be not in Android Studio classpath
尝试一下android studio ,谁知出现路径问题 'tools.jar' seems to be not in Android Studio classpath. Please ensure ...