栅格Grid 

<!-行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中->

<div class="container">
<div class="row">
<div class="col-md-1">col-md-1</div> <!-一行最多12列, col-xs, col-sm, col-md, col-lg四种格式->
</div>
</div>

代码Code

<!-内联代码->   
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>
<!-代码块->
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
<!-变量->
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<!-程序输出->
<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格Table

<!-基本->
<table class="table">
.table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
<!-条纹状表格->
.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<!-带边框表格->
.table-bordered 类为表格和其中的每个单元格增加边框。
<!-鼠标悬浮->
.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<!-紧缩表格->
.table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
<!-响应式表格->
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
<!-状态类->
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作


表单Form

<form role="form">
<div class="form-group">
<label class="sr-only">Name</label> label标签不能少,可以添加.sr-only隐藏文字
<input type="text" class="form-control" placeholder="Enter your name" />
</div>
<div>
<label class="sr-only">Email</label>
<input type="email" class="form-control" placeholder="Enter your Email" />
</div>
</form> <form role="form" class="form-horizontal"> 水平表单
<div class="form-group">
<label class="col-sm-2 control-label">Email</label> 可以通过栅格系统的col-sm-*即col-sm-offset-*来对齐
<div class="col-sm-10">
<input type="email" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" placeholder="Password" />
</div>
</div>
  <div class="from-group">
  <div class="col-sm-offset-2 col-sm-10">
   <div class="checkbox"> //复选框 .checkbox-inline 内联显示
  <label>
   <input type="checkbox" />Remember me
   </label>
   </div>
   </div>
  </div>   
  <div class="radio"> //单选框 .radio-inline
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 - 选择它将会取消选择选项
    </label>
  </div>
<div class="form-group">
<label >文本域</label>
<textarea class="form-control" rows=""></textarea>
</div>
  
  <div class="form-group">
<label for="name">选择列表</label>
<select class="form-control"> //下拉列表 // <select multiple class="form-control"> 多选列表
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
   <p class="form-control-static">email@example.com</p> //静态控件
</form>

  


按钮Button

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

其他样式:.btn-primary  .btn-success .btn-info  .btn-warning  .btn-danger .btn-link

大小:.btn-lg  .btn-sm  .btn-xs

状态:.active  .btn-block  .btn-disabled

也可以把其他标签样式变成按钮状,只要为其添加class="btn btn-default"等,只是改变样式,不改变该标签的功能。但是不建议这样使用,可能存在浏览器兼容问题。
<a class="btn btn-primary" href="#">a-button</a>
<input class="btn btn-default" type="submit" value="Submit"/>

图片Image

直接为<img>标签添加以下类即可
img-circle 椭圆
img-rounded 圆角
img-thumbnail 缩略图
img-responsieve 响应式

Bootstrap学习 - 全局CSS样式的更多相关文章

  1. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  2. bootstrap学习总结-css样式设计(二)

    首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...

  3. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  5. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  6. Boostrap全局CSS样式

    1.Bootstrap提供的CSS Reset * { box-sizing: border-box; } body { font ...; color: #333; background: ...; ...

  7. 26-[Boostrap]-全局css样式,组件,控件

    1.全局CSS样式 https://v3.bootcss.com/css/ <!DOCTYPE html> <html lang="zh-CN"> < ...

  8. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  9. bootstrap学习(全局CSS样式)(二)

    标题类:.h1到.h6 页面主体 bootstrap将全局font-size设置为14px,line-height设置为1.428,这些属性 直接赋予元素和所有段落元素. 文本对齐类 text-lef ...

随机推荐

  1. Openjudge-计算概论(A)-求平均年龄

    描述: 班上有学生若干名,给出每名学生的年龄(整数),求班上所有学生的平均年龄,保留到小数点后两位. 输入第一行有一个整数n(1<= n <= 100),表示学生的人数.其后n行每行有1个 ...

  2. UI-text-field

    //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, ...

  3. ASP.NET中的Excel操作(OLEDB方式)

    一:OLEDB方式操作Excel的个人理解 就是把要操作的Excel当作一个数据库,所有对Excel的操作,就变成了对“数据库”的操作.那么这时就需要有一个数据库的连接字符串. 代码如下: connS ...

  4. NYOJ-915 +-字符串(贪心)

    +-字符串 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 Shiva得到了两个只有加号和减号的字符串,字串长度相同.Shiva一次可以把一个加号和它相邻的减号交换. ...

  5. 基于Flash与window平台本地程序通信实现媒体流发布

    0 Web场景下的媒体流发布可以采用Flash原生API实现,但是Flash H264视频压缩参数不可控.音频无法AAC编码,所以一般采用浏览器插件方式,但是浏览器插件有版本兼容问题.不稳定,所以可以 ...

  6. iOS UITextView 根据输入text自适应高度

    转载自:http://www.cnblogs.com/tmf-4838/p/5380495.html #import "ViewController.h" @interface V ...

  7. python模拟登录知乎

    # -*- coding:utf-8 -*- import urllib import urllib2 import cookielib import sys from bs4 import Beau ...

  8. android Bind机制(二)

    1.binder通信概述 binder通信是一种client-server的通信结构,    1.从表面上来看,是client通过获得一个server的代理接口,对server进行直接调用:    2 ...

  9. caffe+NVIDIA安装+CUDA-7.5+ubuntu14.04(显卡GTX1080)

    首先强调,我们实验室的机器是3.3w的机器,老板专门买来给我们搞深度学习,其中显卡是NVIDIA GeForce  GTX1080(最近新出的,装了两块),cpu是intel i7处理器3.3Ghz, ...

  10. Thrift项目Server端开发流程

    Thrift项目Server端开发流程 首先,先了解工程中所有包的功能(见下图) 该图为用户中心项目的目录结构,以下依次介绍. 1.     src/main/java com.framework:该 ...