一、全局样式

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

...

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

...

Bootstrap 提供了大量的全局样式，大部分的 HTML 元素都可以通过添加不同的类，来设置元素的样式。

image.png

1. 大标题小标题

image.png

2. 文本

段落

网页中的字体默认大小是 16 px

image.png

排版对齐方式

image.png

排版大小写

image.png

3. 表格

image.png

a. 基本实例

        
                Optional table caption.
                
                  
                    #
                    First Name
                    Last Name
                    Username
                  
                
                
                  
                    1
                    Mark
                    Otto
                    @mdo
                  
                  
                    2
                    Jacob
                    Thornton
                    @fat

Optional table caption.
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

效果图

image.png

b. 条纹状表格

通过 .table-striped 类可以给之内的每一行增加斑马条纹样式。

image.png


    ...
c. 带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
 
 
   
     
    
   
  
    千锋云计算 
   
 

 
  
  
  
  
 

  ...

 
 d. 鼠标悬停效果 
 通过添加 .table-hover 类可以让  中的每一行对鼠标悬停状态作出响应。 
  
   
     
    
   
  
    image.png 
   
  
 
  ...

 
 e. 紧缩表格 
 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半.
  
  
   
     
    
   
  
    image.png 
   
  
  
 
  ...

 
 f. 带状态条的表格 
  
   
     
    
   
  
    image.png 
   
  
 
    
    1... 2... 3... 4... 5...
    ... ... ... ... ...
    ... ... ... ... ...
    ... ... ... ... ...
    ... ... ... ... ...
    
    
    我 是 分 割 行

    

    
    ...
    ...
    ...
    ...
    ...
    

 
 g. 响应式表格 
 将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 
 
    
            1... 2...2...2...2...2...2...2...2...2...2...2... 3... 4... 5...

    

 
 之前 
 
 
  
   
     
    
   
  
    之前 
   
  
 之后 
  
   
     
    
   
  
    之后 
   
  
 4. 表单 
 a. 基本实例 
 单独的表单控件会被自动赋予一些全局样式。
 所有设置了 .form-control 类的 、</code> 和 <code><select></code> 元素都将被默认设置宽度属性为 width: 100%;。 将 <code>label</code> 元素和前面提到的控件包裹在 <code>.form-group</code> 中可以获得最好的排列。</p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 700px; max-height: 331px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    image.png 
  </div> 
 </div> 
 <pre><code><form>
    <div class="form-group">
        <label for="inputName">姓名</label>
        <input type="text" class="form-control" id="inputName" placeholder="姓名">
    </div>
    <div class="form-group">
        <label for="inputPassword">密码</label>
        <input type="password" class="form-control" id="inputPassword" 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"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
</code></pre> 
 <blockquote> 
  <h4>不要将表单组和输入框组混合使用</h4> 
  <p>不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。</p> 
 </blockquote> 
 <h3>b. 内联表单</h3> 
 <p>为 <code><form></code> 元素添加 <code>.form-inline</code> 类可使其内容左对齐并且表现为 <code>inline-block</code> 级别的控件。<br> 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。</p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 700px; max-height: 110px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    image.png 
  </div> 
 </div> 
 <pre><code><form class="form-inline">
    <div class="form-group">
        <label for="inputName">姓名</label>
        <input type="text" class="form-control" id="inputName" placeholder="姓名">
    </div>
    <div class="form-group">
        <label for="inputPassword">密码</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="密码">
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
</code></pre> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 526px; max-height: 56px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    image.png 
  </div> 
 </div> 
 <pre><code><form class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
        <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
        <div class="input-group-addon">.00</div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">转账金额</button>
</form>
</code></pre> 
 <h3>c. 水平排列的表单</h3> 
 <p>通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。</p> 
 <br> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 700px; max-height: 201px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    image.png 
  </div> 
 </div> 
 <pre><code><form class="form-horizontal">
    <div class="form-group">
        <label for="inputName" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-10">
        <input type="text" class="form-control" id="inputName" placeholder="姓名">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" 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>
</code></pre> 
 <h3>d. 被支持的控件</h3> 
 <p>输入框<br> 包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： <code>text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel</code> 和 <code>color</code>。</p> 
 <h3>e. 文本域</h3> 
 <p>支持多行文本的表单控件。可根据需要改变 rows 属性。</p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 700px; max-height: 124px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    image.png 
  </div> 
 </div> 
 <pre><code><textarea class="form-control" rows="3">
 
 
f. 多选和单选框 
 多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。 
 普通堆叠在一起 
  
   
     
    
   
  
    image.png 
   
  
 
    
        
        
        多选项
        
    
    
            
            
            多选项
            
        
    
    
        
        这个选项被禁用
    
    
    
    
    
        
        这个选项是互斥选项，只能选择选项中的一个
    
    
    
    
        
        这个选项是互斥选项，只能选择选项中的一个
    
    
    
    
        
        这个选项被禁用
    
    

 
 内联单选和多选框 
 通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。 
  
   
     
    
   
  
    image.png 
   
  
 
   1


   2


   3



   1


   2


   3

 
 g. 下拉列表（select） 
 注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。 
  
   
     
    
   
  
    image.png 
   
  
 
 
  
   
     
    
   
  
    image.png 
   
  
 h. 控件尺寸 
 通过给控件的标签添加 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。 
  
 
 i. 添加校验状态（就是给输入控件的边框添加颜色） 
 Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。
 使用时，添加 .has-warning、.has-error 或.has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
  
  
   
     
    
   
  
    image.png 
   
  
  
 
        输入成功
        
        一段帮助文字，可以是多行

 
 调整宽度 
 用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。 
 
 
  
   
     
    
   
  
    image.png 
   
  
 
  
    
  
  
    
  
  
    
  

 
 5. 按钮 
  
   
     
    
   
  
    image.png 
   
  
 


    
    




 
 控制大小 
 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。 
 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
  
  
   
     
    
   
  
    image.png 
   
  
  
 



 
 激活状态 
 当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。 
 
 
  
   
     
    
   
  
    image.png 
   
  
 

 
 禁用的按钮 
 为 

Link
 
 
关闭按钮 
 通过使用一个象征关闭的图标，可以让模态框和警告框消失。 
 
 
  
   
     
    
   
  
    image.png 
   
  
 
 
 6. 图片 
 a. 响应式图片 
 在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。 
 其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。 
 如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center 
  
  SVG 图像和 IE 8-10
 在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。 
  
 
 
 b. 图片形状 
 通过为  元素添加以下相应的类，可以让图片呈现不同的形状。 
  
  跨浏览器兼容性
 时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。 
  
  
   
     
    
   
  
    image.png 
   
  
 


 
 7. 辅助类 
 a. 字体颜色 
 通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。 
  
   
     
    
   
  
    image.png 
   
  
 此生如若有你，何惧岁月老去。
何处的风景美如画，却抵不过你笑如花。
我喜欢你，笨拙而热烈，一无所有却又倾尽所有。
"猜猜我的心在哪边?" "左边？" "错了，在你那边。"
别替我遮风，别替我挡雨，因为我怕身边突然没有你。
"我们合作一下吧！" "合作什么？" "以后的余生。"


 
 b. 文字背景色 
 和文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。 
  
   
     
    
   
  
    image.png 
   
  
 我愿与你一房两人三餐四季，四海三山二心一生。
“你见过凌晨两点的太阳吗？”“我见过，噩梦醒来身旁你熟睡的脸。”
愿我能陪你度过每个春夏秋冬，就算终须一别也不辜负你我相遇。
假如你爱上一个人，那个人没回绝也没接受，只是在享用你的付出，那么你就要懂得恰到好处。
假如你爱上一个人，那个人也对你有意，只是因为实际的一些原因，没能走到一起，那么只能顺其天然

一行泪流下，是因为瓦解了脆弱；一段话入心，是因为触碰了心灵！
 
 c. 快速浮动 
 通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。 
  
   
     
    
   
  
    image.png 
   
  
 
    时间，珍惜了就是黄金，虚度了就是荒芜；人生，尽心了就是精彩，敷衍了就是惋惜；

家庭，有爱就是幸福，无爱就是牢笼。
 
  
  不能用于导航条组件中
 排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。 
  
 内容居中 
 为任意元素设置 .center-block 类，就是使其居中。
 这会给其设置 display: block 和 margin 等相关属性。 
 ...
 
 清除浮动 
 通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。 
 ...
 
 显示或隐藏内容 
 .show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。 
 
 
  
   
     
    
   
  
    image.png 
   
  
 
    时间，珍惜了就是黄金，虚度了就是荒芜；人生，尽心了就是精彩，敷衍了就是惋惜；

家庭，有爱就是幸福，无爱就是牢笼。
 
 另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。 
  
   
     
    
   
  
    image.png 
   
  
 
    时间，珍惜了就是黄金，虚度了就是荒芜；人生，尽心了就是精彩，敷衍了就是惋惜；

家庭，有爱就是幸福，无爱就是牢笼。
 
 三角符号 
 通过使用三角符号可以指示某个元素具有下拉菜单的功能。 
  
   
     
    
   
  
    image.png 
   
  
 其方向默认是向下。
 当其处于上拉菜单中，方向会自动随之调整为向上。

1...	2...	3...	4...	5...
...	...	...	...	...
...	...	...	...	...
...	...	...	...	...
...	...	...	...	...
我	是	分	割	行
...	...	...	...	...

Bootstrap3 快速入门（全局样式）

一、全局样式

布局容器

1. 大标题小标题

2. 文本

段落

排版对齐方式

排版大小写

3. 表格

a. 基本实例

b. 条纹状表格

c. 带边框的表格

d. 鼠标悬停效果

e. 紧缩表格

f. 带状态条的表格

g. 响应式表格

4. 表单

a. 基本实例

f. 多选和单选框

普通堆叠在一起

内联单选和多选框

g. 下拉列表（select）

h. 控件尺寸

i. 添加校验状态（就是给输入控件的边框添加颜色）

调整宽度

5. 按钮

控制大小

激活状态

禁用的按钮

关闭按钮

6. 图片

a. 响应式图片

b. 图片形状

7. 辅助类

a. 字体颜色

b. 文字背景色

c. 快速浮动

内容居中

清除浮动

显示或隐藏内容

三角符号

你可能感兴趣的:(Bootstrap3 快速入门（全局样式）)