2016-06-23 23:49:28 u014516981 阅读数 7061

     Bootstrap这个框架相信对于前端来说都不陌生,之前刚接触时就只是“拿来主义”:需要用到时就查看下Bootstrap的官网文档直接将需要的插件或者样式拷贝下来用,最近终于有机会好好静下心来了解这个框架。对Bootstrap的认知也有了一定的改变,下面是本人在学习这个框架的全局样式时的一些个人见解也是我个人觉得在绘制页面时比较实用的几个知识点。内容比较直白通俗,希望路过的各位大牛不要见怪,如若有任何纰漏。还是真心希各位大牛可以指点一二。

一:总结 bootstrap

编译 Bootstrap(使用 Bootstrap

可以通过两种方式使用 Bootstrap :使用编译后的 CSS 文件(即直接将bootstrapcss样式加入到你的项目中)

或者使用 Less 源码文件。若要编译 Less 文件,请参考“起步”章节的内容以了解如何设置开发环境并运行必须的编译指令。

二:关于bootstrap的全局页面样式:

1.关于表格table

不同形式的表格只需要对类名进行引用即可,Bootstrap为表格设计了如下几个类:

table-bordered:为表格添加边框

table-hover:鼠标移上有效果

table-condensed:让表单更紧凑

table-responsive :响应式表格,以768px为界。

.active,.success等类是给trtd等标签添加可识别的样式。

2.关于表单form

label中的for要与input中的id要对应

bootstrap中不但为表单增加了label标签,还包裹了一个类名为form-groupdiv即 每个input标签的格式为:

<div class="form-group">

<label for="inputid">inputid名或其他</label>

<input class="form-control" id="" placeholder=" " type=" " />

form-control:input定义了样式,所以在引用bootstrap中的默认input时一定要加在上。

</div>

<form>标签添加类。会出现对应的效果:

form-inline:使form中的元素都变成行内元素,在同一行显示

form-horizontal:效果表现与form不加任何类一样,但是form-horizontalform内置了栅格系统

inputtypetextpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtel color。且type声明是必须的。

3.关于单选框radio与复选框(多选框)checkbox

注意:输入框 type="text",type="password"等与单选框type="radio" 多选框 type="checkbox" 除了input中的type类型不同,label所加的位置也不同

输入框:<div class="form-group"><label for=" ">xxx</label><input class="from-control" id="xxx" type="text" placholder=" "/></div>

单选框:<div class="radio"><label><input type="radio" value=" " 这个位置不填默认是able(即布尔值为true),若写上disabled则表示禁用该单选框/></label></div>

复选框:<div class="checkbox"><label><input type="checkbox"  value=" " 这个位置不填默认是able(即布尔值为true),若写上disabled则表示禁用该复选框/></label></div>

为让所有的单选框或者复选框在同一行,可将大div的类名改为checkbox-inline,和radio-inline即设置为行内元素。

4.关于按钮:

按钮,在bootstrap中可作为按钮的元素:a,input,button

所有添加了btn btn-*     其中不论是用那种标签的按钮都有hover效果。以下是这三个元素作为按钮时该注意的点

a标签:必须添加role="button"属性;由a标签构成的按钮设置不可用直接添加类disabled 效果是a标签即使加了href链接也无法实现跳转 。

<a class="btn btn-default" href="#" role="button">Link</a>

<a href="http://baidu.com" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

button:设置type属性 ,type属性有:type="button" :普通按钮,type="reset" :重置按钮  type="submit" :提交按钮。

<button class="btn btn-default" type="submit">Button</button>

 

input中的type="submit" 以及type=button”使input可作为按钮。

<input class="btn btn-default" type="submit" value="Submit">

<input class="btn btn-default" type="button" value="Input">

 

bootstrap中给定的按钮的类有多个,一般的格式是 class="btn btn-*" 提供的类有:

1)外观(颜色):btn-default(默认)btn-success(成功)btn-danger(危险)btn-warning(警告) btn-info(一般展示信息) btn-primary(首选项) btn-link(链接)

2)外观(大小):btn-lg(大),btn-md(中),btn-sm(小)

  (3)按钮变成激活状态,需要给按钮加上active类。 按钮变成不可用状态。添加disabled="disableded"

4bootstrap还提供了特殊形式的按钮,例如:关闭按钮<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

5.关于图片img

响应式图片  在bootstrap中要使图片具有响应式功能,须给图片加上类 .img-responsive ,要让图片在具有响应式功能的同时还剧中显示的话需要加入类 center-block

bootstrap中给出的img的类有:

img-responsive  响应式图片(一般是将图片设置为具有响应式功能的时候用到,除了img-responsivebootstrap还为图片的外观样式设置了另外三个类)

img-circle      border-radius为图片宽高的一半的图片即圆形图片

img-rounded    无边框但border-radius6px图片

img-thumbnail   4px的边框且border-radius也为4px的图片

要注意的是在IE8及以下的IE浏览器是不支持border-radius属性的。

 

6.关于辅助类,为页面的色彩效果以及意境有帮助

辅助类

  关于文本字体颜色:text-muted(灰色 色值为#777),text-primary(蓝色 #428bca),text-success(绿色 #5cb85c),text-info(浅蓝色 #5bc0de),text-warning(橙色  #f0ad4e),text-danger(红色 #d9534f

  关于背景颜色:bg-primary(蓝色 #428bca),bg-info(浅蓝色  #5bc0de),bg-waring(橙色 #f0ad4e),bg-success(绿色 #5cb85c),bg-danger(红 #d9534f

7.其他:

1bootstrap 清除浮动的方法,bootstrap中已经在样式中设置好清除浮动的样式,因此我们只需要引用即可:

<div class="clearfix"></div>

2)设置浮动:

bootstrap中如果要为元素设置浮动,可直接添加类pull-right(向右浮动)和pull-left(向左浮动)

bootstrap中如果要为元素可见(或不可见)直接添加类 showhide),不需要设置样式。



2017-03-13 18:15:31 boonyaxnn 阅读数 1190

Bootstrap 支持的一些表格元素:

可用于表格中的tablede 样式

可用于表格中的<tr>, <th> 和 <td>

html与css代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
  	div{
  		font-family: '宋体';	
  		color: #0A0A0A;
  	}
  	tr,td{
  		width:30px;
  		height: 50px;
  		font-size:24px;
  	}
  </style>
  </head>

  <body>
     <div class="container">
      <div class="header">
	<h1>表格</h1>
      </div>  
        <p class="text-muted" style="font-size: 18px;">小妞妞的成绩单:</p>  
	    <!--
	       <p class="text-muted">本行内容是减弱的</p>
	     -->                               
      <table class="table table-striped table-bordered table-hover table-condensed">
      	<!--
      		.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
      		.table-bordered	为所有表格的单元格添加边框
      		.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
      		.table-condensed	让表格更加紧凑
      	-->
        <thead>
          <tr class="active">
            <th>科目</th>
            <th>成绩</th>
          </tr>
        </thead>
        <tbody>
          <tr class="success">
            <td>语文</td>
            <td>90</td>
          </tr>
          <tr>
            <td>数学</td>
            <td>95</td>
          </tr>
          <tr class="warning">
            <td>英语</td>
            <td>85</td>
          </tr>
          <tr class="danger">
        <!--
            .active 对某一特定的行或单元格应用悬停颜色;.success表示一个成功的或积极的动作;
      	    .warning 表示一个需要注意的警告;.danger	表示一个危险的或潜在的负面动作;
      	-->
            <td>综合</td>
            <td>200</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

</html

效果图


Bootstrap
2019-10-24 09:02:16 RONG51920 阅读数 16

全局CSS样式

  • 概览

    • HTML5文档类型
    <!DOCTYPE html>
    <html lang="zh-CN">
       ...
    </html>
    
    • 移动设备优先
      为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。(依情况而定)
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    • Normalize.css
      重置浏览器之间的样式,让浏览器保持一致
    • 布局模式
      container 固定模式布局
      container-fluid 流式布局
  • 栅格系统
    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

    1. “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
    2. 通过“行(row)”在水平方向创建一组“列(column)”。
    3. 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
    4. 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
    5. 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
    6. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
      栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
    7. 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
    8. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。
    • 栅格参数
超小屏幕 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 (≥992px) 大屏幕 (≥1200px)
栅格系统行为 总是水平排列 A A A
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12 12 12 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px) 30px (每列左右均有 15px) 30px (每列左右均有 15px) 30px (每列左右均有 15px)
  • 列偏移
    col-lg-push-2 left值
    col-lg-pull-2 right值
    col-lg-offset-2 marginleft值
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
  • 嵌套列
    为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>
  • 列排序
    通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
  • 屏幕显示隐藏类
    hidden-md 中屏隐藏
    visible-lg 大屏显示
<div class="row visible-md">
        <div class="col-lg-12 s">1</div>
    </div>
    <div class="row hidden-lg">
        <div class="col-md-2 s">1</div>
        <div class="col-md-10 s">2</div>
    </div>
  • 排版

    • 标题
      HTML 中的所有标题标签,< h1 > 到 < h6 > 均可使用,在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。
      <p class="h1">主标题<span class="small">副标题</span></p>
    
      <p class="h2">主标题<span class="small">副标题</span></p>
    
      <p class="h3">主标题<span class="small">副标题</span></p>
    
      <p class="h4">主标题<span class="small">副标题</span></p>
    
      <p class="h5">主标题<span class="small">副标题</span></p>
    
      <p class="h6">主标题<span class="small">副标题</span></p>
    
    • 突出显示文本< mark >
     You can use the mark tag to <mark>highlight</mark> text.
    
    • 被删除的文本
      对于被删除的文本使用 < del > 标签。
     <del>This line of text is meant to be treated as deleted text.</del>
    
    • 无用文本
      对于没用的文本使用 < s > 标签。
     <s>This line of text is meant to be treated as no longer accurate.</s>
    
    • 插入文本
      额外插入的文本使用 < ins > 标签。(添加下划线)
    <ins>This line of text is meant to be treated as an addition to the document.</ins>
    
    • 对齐
      通过文本对齐类,可以简单方便的将文字重新对齐。
    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    <p class="text-justify">Justified text.</p>
    <p class="text-nowrap">No wrap text.</p>
    
    • 改变大小写
      通过这几个类可以改变文本的大小写。
    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text.</p>
    
    • 基本缩略语
    <abbr title="attribute">attr</abbr>
    
    • 首字母缩略语
      为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
    
    • 地址
      让联系信息以最接近日常使用的格式呈现。在每行结尾添加
      可以保留需要的样式。
    <address>
    	<strong>Twitter, Inc.</strong><br>
    	1355 Market Street, Suite 900<br>
    	San Francisco, CA 94103<br>
    	<abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
    
    <address>
    	<strong>Full Name</strong><br>
    	<a href="mailto:#">first.last@example.com</a>
    </address>
    
    • 引用
      在文档中引用其他来源的内容。
    //默认样式引用
    <blockquote>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>
    
    //多种样式引用
    <blockquote>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    	<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
    
    • 列表
      list-inline 内联列表(水平列表)
      list-unstyled 去点 去内边距
    <ul class="list-group">
        <li class="list-group-item"><a class="list-group-item" href="#">1</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">2</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">3</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">4</a></li>
    </ul>
    
    • 自定义列表
      dl-horizontal 水平类
    <dl class="dl-horizontal">
        <dt>...</dt>
        <dd>...</dd>
    </dl>
    
    • 表格相关类
    1. 通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
    2. 添加 .table-bordered 类为表格和其中的每个单元格增加边框。
    3. 通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
    4. 通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
    5. 通过这些状态类可以为行或单元格设置颜色:.active 鼠标悬停在行或单元格上时所设置的颜色;success 标识成功或积极的动作;info 标识普通的提示信息或动作;warning 标识警告或需要用户注意;danger 标识危险或潜在的带来负面影响的动作
    6. 将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。(响应式表格)
    <table class="table table-striped table-bordered table-hover table-condensed table-responsive">
        <tr class="active">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="success">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="info">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="warning">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    
    • 基本表单
      单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
    <form action="">
        <div class="form-group">
            <label for="">姓名:</label>
            <input class="form-control" type="text"/>
        </div>
        <div class="form-group">
            <label for="">姓名:</label>
            <input class="form-control" type="text"/>
        </div>
        <div class="form-group">
            <label for="">姓名:</label>
            <input class="form-control" type="text"/>
        </div>
    </form>
    
    • 内联表单
      为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
    <form action="" class="form-inline">
        <div class="form-group">
            <label for="">姓名:</label>
            <input class="form-control" type="text"/>
        </div>
        <div class="form-group">
            <label for="">姓名:</label>
            <input class="form-control" type="text"/>
        </div>
        <div class="form-group">
            <label for="">姓名:</label>
            <input class="form-control" type="text"/>
        </div>
    </form>
    
    • 水平排列的表单
      通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
    <form class="form-horizontal">
    	<div class="form-group">
    		<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    		<div class="col-sm-10">
      			<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    		</div>
    	</div>
    	<div class="form-group">
    		<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    		<div class="col-sm-10">
      			<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    		</div>
    	</div>
    <div class="form-group">
    	<div class="col-sm-offset-2 col-sm-10">
      		<div class="checkbox">
        		<label>
          		<input type="checkbox"> Remember me
        		</label>
      		</div>
    	</div>
    </div>
    <div class="form-group">
    	<div class="col-sm-offset-2 col-sm-10">
      		<button type="submit" class="btn btn-default">Sign in</button>
    	</div>
    </div>
    </form>
    
    • 按钮
    1. 可作为按钮使用的标签或元素< a >、< button > 或 < input >
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
    
    1. 使用下面列出的类可以快速创建一个带有预定义样式的按钮。
      (默认样式)Default
      (首选项)Primary
      (成功)Success
      (一般信息)Info
      (警告)Warning
      (危险)Danger
      (链接)Link
    <!-- Standard button -->
    <button type="button" class="btn btn-default">(默认样式)Default</button>
    
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">(首选项)Primary</button>
    
    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">(成功)Success</button>
    
    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">(一般信息)Info</button>
    
    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">(警告)Warning</button>
    
    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">(危险)Danger</button>
    
    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">(链接)Link</button>
    
    1. 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
    <p>
    	<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
    	<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
    </p>
    <p>
    	<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
    	<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
    </p>
    <p>
    	<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
    	<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
    </p>
    <p>
    	<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
    	<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
    </p>
    
    • 图片的形状
    <img class="img-circle" src="img/baidu.png" alt=""/>
    <img class="img-rounded" src="img/baidu.png" alt=""/>
    <img class="img-thumbnail" src="img/baidu.png" alt=""/>
    <img class="img-responsive" src="img/baidu.png" alt=""/>
    
    • 文本颜色类
    <p class="text-danger">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-warning">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-info">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-success">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    
    • 背景色辅助类
    <p class="text-danger bg-primary">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-warning bg-danger">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-info bg-success">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-success bg-warning">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    
    • 关闭按钮
    <span class="close">&times;</span>
    
    • 快速浮动及清除浮动
    <div class="clearfix">
        <div class="pull-left" style="width: 100px;height: 100px; background: red"></div>
        <div class="pull-right" style="width: 100px;height: 100px; background: blue"></div>
    </div>
    <div  style="width:400px;height: 100px; background: orange"></div>
    
    • 块元素居中
    <div class="center-block" style="width: 100px;height: 100px; background: deeppink"></div>
    
    • 显示隐藏
    <div class="show">apibus, tellus ac cursus commodo, tortor mauris nibh</div>//显示
    <div class="hide">apibus, tellus ac cursus commodo, tortor mauris nibh</div>//隐藏
    
2018-07-17 17:00:55 m0_37585915 阅读数 590

HTML5文档类型

Bootstrap 使用的某些HTML元素与CSS属性都需要文档声明是HTML5文档类型。

移动设备优先

Bootstrap 是移动设备优先的,对移动设备的样式融入到了框架的方方面面。
为确保绘制和缩放效果,要在<head>标签中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width,initial-scale=1">

移动设备浏览器上,为视口设置meta属性为user-scalable=no可以禁止用户缩放。

容器

容器有两种流体容器(container-fluid) 和固体容器 (container)
两种容器之间不能相互嵌套。
固体容器固定宽度并且支持响应式,有三个阈值,在不同尺寸视窗下显示不同的固定宽度。

视窗尺寸 容器大小 备注
>= 1200px width = 1170px; PC
>= 992px && < 1200px width = 970px; 小PC
>=768px && < 992px width = 750px; 平板
< 768px auto width = 100% 和 width = auto不同

将最外面的布局div class改为 .container-fluid,就可以将容器设置为流体容器,宽度为100%。

栅格系统

  • 栅格系统通过行(row)与列(column)来进行页面的布局。

  • 行必须包含在 容器 中.

  • 行在水平方向创建一组列,每一行将页面宽等均的分为12列。

  • 页面内容要放在列中,并且只有列可以作为行的直接子元素。

  • 为列 设置 padding 属性,可以为列与列之间设置间距,为 row 设置负值 margin ,抵消为容器设置的 padding 间接为行抵消了 padding 。

  • 如果一行中包含的列大于12,多余的列会另起一行。

  • 在没有给大屏幕设置栅格类的情况下,小屏幕的栅格类可以在大屏幕下起作用。
    栅格系统对不同尺寸屏幕有不用的前缀

属性 < 768px(超小设备,手机) >= 768px(平板小型设备) >= 992px(中型PC) >=1200px(大型pc)
最大容器宽度 auto 750px 970px 1170px
Class前缀 .col-xs- .col-sm- .col-md- .col-lg-
最大列宽 auto 60px 78px 95px
槽宽 30px 30px 30px 30px

槽宽:每列与内容之间的间隙,30px ,平均到两边,每边15px 。

从小到大是兼容的,但是大分辨率在小分辨率下是会从水平排列变垂直排列

列偏移: .col-xx-offset-x ,列会向右偏移设定的多少列。

列排序.col-md-push-*.col-md-pull-*类可以很容易的改变列的顺序。

排版

除了标题标签<h1><h6>之外,还提供了.h1.h6 类,可以给内联元素提供标题样式。

  • 标题内包含 <small> 标签或添加 .small 类的元素。可以添加副标题。
  • .lead 类突出显示段落。
  • <head> 标签,高亮内联文本。
  • <del>被删除的文本。
  • <s>无用文本。类似于删除文本。
  • <ins> 插入文本,文本底部添加下划线。
  • <u>带下划线文本。
  • <strong>强调一段文本,font-weight。
  • <i>斜体,主要用于发言技术词汇 ,<b> 高亮单词或短语。
  • 文本对齐通过 .text-* ,leftcenterrightjustifynowrap
  • 改变大小写,.text-lowercase , .text-uppercase , .text-capitalize(每个单词头大写)。
  • 缩略语 :<abbr title="attribute">attr<abbr>. 页面显示标签内的内容,鼠标移到attr 上会显示title的内容。
  • 为缩略语添加 .initialism 类,可以让 font-size 变小。
  • 地址: <address></address>标签。
  • 文档引用内容 用<blockquote></blockquote> 标签。直接引用建议用 <p> 标签包住。
  • 多样式引用:引用来源添加<footer> 标签 ,来源名称包裹进<cite> 标签。
  • 引用内容默认左对齐,为 <blockquote>添加 .blockquote-reverse类可以右对齐。

列表

无序列表和有序列表,添加.list-unstyled 列表无样式,作用在直接子元素上。

内联列表 通过类.list-inline,将所有元素放置在同一行。
<dl></dl> ,<dt> </dt> ,<dd></dd>,
为<dt> 添加 类 .dl-horizontal 可以让 <dt> 内的短语及其描述在一行。

代码

内联代码: <code> 标签包裹内联样式的代码片段。

用户输入:通过 <kbd> 标签标记用户通过键盘输入的内容。

代码块:多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。
还可以使用 .pre-scrollable 类,作用是为代码块添加高度,自动添加滚动条。

变量: 通过 <var> 标签标记变量。

程序输出: 通过 <samp> 标签来标记程序输出的内容。

表格

为任意 <table> 标签添加 .table类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。

条纹状表格:添加类 .table-striped 可以给表格添加斑马条纹样式。

带边框表格:添加 .table-bordered 类为表格和其中的每个单元格增加边框。

鼠标悬停 :通过添加 .table-hover 类可以让<tbody> 中的每一行对鼠标悬停状态作出响应。

紧凑表格:通过添加 .table-condensed 类可以让表格更加紧凑,减小padding。

状态类:

类名 效果
.active 鼠标悬停在行或单元格上时所设置的颜色,浅灰
.success 标识成功或积极的动作,浅绿
.info 标识普通的提示信息或动作,浅黄
.warning 标识警告或需要用户注意,浅红,
.danger 标识危险或潜在的带来负面影响的动作,浅蓝

响应式表格: 将任何.table元素包裹在.table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。

表单

所有设置了 .form-control类的<input> 、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

内联表单:为 <form> 元素添加 .form-inline 类可使其内容左对齐,表单元素在一行排列。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
一定要添加 label 标签

水平排列表单 : 为表单添加 .form-horizontal 类,可以将 label 标签和控件组水平并排布局。

输入框:括大部分表单控件、文本输入域控件,还支持所有 HTML5。

类型的输入控件: text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。(只有正确设置了type、属性的输入控件才能被赋予正确的样式)

文本域<textarea class="form-control" rows="3"></textarea> 可以通过改变 row 属性值改变文本域大小。

多选框和单选框:默认堆叠排列。通过将 .checkbox-inline.radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。

下拉列表:为 <select>添加类 .form-control ,可以显示Bootstrap设置的默认样式。对于标记了 multiple属性的 <select>控件来说,默认显示多选项。

静态控件:如果需要在表单中将一行纯文本和 label 元素放置于同一行,为<p> 元素添加 .form-control-static 类。

自动获取焦点

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." autofocus>

禁用状态

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

被禁用的 filedset :为<fieldset>设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

只读状态

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

状态检验:状态包括 error ,warning , success 状态。Bootstrap为这些状态都定义了默认样式。使用时,.has-warning.has-error.has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label.form-control.help-block元素都将接受这些校验状态的样式.

添加额外的图标: 设置相应的.has-feedback 类并添加正确的图标.

控件尺寸:通过 .input-lg 类似的类可以为控件设置高度,通过.col-lg-* 类似的类可以为控件设置宽度。通过添加 .form-group-lg.form-group-sm类,为.form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

按钮

可作为按钮的标签或元素:为<a><button><input>元素添加 .button 就可以作为按钮显示。
注意: <a> 元素作为按钮使用时,务必设置 role = “button” 属性。

预定义样式.btn-default , .btn-primary, .btn-success , .btn-info, .btn-warning , .btn-danger , .btn-link

按钮尺寸: 使用 .btn-lg.btn-sm.btn-xs就可以获得不同尺寸的按钮。
给按钮添加 .btn-block类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

激活状态:通过 .active 类实现。

禁用状态:为<button>元素添加 disabled 属性,使其表现出禁用状态。为基于 <a>元素创建的按钮添加 .disabled 类。

图片

响应式图片:通过为图片添加 .img-responsive 类可以让图片支持响应式布局。使用 .center-block 类,让使用了 .img-responsive 类的图片水平居中。

图片形状:通过为<img>元素添加以下相应的类,可以让图片呈现不同的形状。class=”img-rounded”class=”img-circle” class=”img-thumbnail”

辅助

情景文本颜色

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

情景背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

关闭按钮:

通过使用一个象征关闭的图标,可以让模态框和警告框消失

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号

<span class="caret"></span>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

快速浮动不能用于导航条组件:排列导航条中的组件时可以使用这些工具类:.navbar-left.navbar-right
内容快居中:

<div class="center-block">...</div>

清除浮动

<div class="clearfix">...</div>

显示隐藏内容.show.hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。

<div class="show">...</div>
<div class="hidden">...</div>

屏幕阅读器.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。

2015-10-27 10:44:25 griffin23 阅读数 2707
## 移动设备优先 ## Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
## 布局容器 ## Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器和 .container-fluid 容器. .container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
  ...
</div>
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
  ...
</div>
## 栅格系统 ## Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。在使用栅格系统的时候要注意以下几点: - “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 - 通过“行(row)”在水平方向创建一组“列(column)”。 - “列(column)”是行(row)”的直接子元素。我们的内容都要放在列中,栅格系统最多有12个列,多余的列的所有元素都讲在下一行排列。创建列的类有:.col-xs-X .col-sm-X .col-md-X .col-lg-X 等。这四种类分别对应 超小屏幕 手机 (
<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>
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。
    列元素可以设置偏移,使得没有充满全屏的列可以左对齐或者右对齐:
<div class="row">
  <div class="col-md-4 col-md-offset-8">.col-md-4</div>

</div>

在大屏幕上设定的栅格,到了小屏幕上可能会堆叠在一起,为了解决这一问题,我们可以对同一个

元素同时使用两个类,比如.col-xs-* 和 .col-md-*

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

在手机和平板上可以这样:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

如果想在一列中嵌套另外的列,那么可以在原来的列中添加一个新的元素和一些列的.col-sm-* 元素。需要注意的是被嵌套的行(row)所包含的列(column)的个数不能超过12。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6 col-sm-offset-2">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

在实际设备上显示的时候,列不一定按照我们定义的顺序显示,可以进行调整,比如 我们先定义了 col-md-9 后定义了 col-md-3 ,我们可以通过调整顺序使得col-md-3的列在col-md-9的列之前显示:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Bootstrap4笔记

阅读数 366

没有更多推荐了,返回首页