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

由于项目需要，所以打算好好学习下bootstrap框架，之前了解一点，框架总体不难，但涉及到的东西还是很多，想要熟练掌握它，还是要多练练。

一：bootstrap是什么？

bs是什么? 即前端页面搭建的标准化框架工具，已经写好了css.js样式，只需要拿来用即可。

怎么用bs呢？主要是通过使用不同的类增加效果，每一种类，对应的功能不同。

bs好处：增加了开发效率，页面设计更加美观,支持响应式开发。下载地址：https://github.com/foreverjiangting/bootstrap

学习文档：http://v3.bootcss.com/getting-started/

二：css样式设计

1：基于Html文档

bootstrap引用了部分html元素，所以头部需写成下面所示的样列。

<!DOCTYPE html>   ---包含HTML5文档声明，所有浏览器均开启标准模式
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！确保支持响应式布局 -->
<title>Bootstrap</title>

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

2：栅格系统布局

通过设置行和列来进行内容的布局。bootstrap把页面设置为12列。通过改变列的数字来进行布局，比如设置三个等宽的列：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<title></title>

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

<!--  设置栅栏式布局-->

<div  class="container"><!--或者container-fluid-->

        <div  class="row">                               -- col-xs-4 : 指小于768px的小设备

                     <div  class="col-xs-4">11</div>     -- col-sm-4 ：指>=768px的设备

                     <div  class="col-xs-4">22</div>     -- col-md-4 ：指>=992px设备

                     <div  class="col-xs-4">33</div>     -- col-lg-4 ：值1200px设备

        </div>
          <div  class="row">
                     <div  class="col-md-4">11</div>
                     <div  class="col-md-4">22</div>
                     <div  class="col-md-4">33</div>
         </div>
           <div  class="row">
                     <div  class="col-sm-4">11</div>
                     <div  class="col-sm-4">22</div>
                     <div  class="col-sm-4">33</div>
         </div>
           <div  class="row">
                     <div  class="col-lg-4">11</div>
                     <div  class="col-lg-4">22</div>
                     <div  class="col-lg-4">33</div>
         </div>

</div>

</body>

</html>

css网格式有四种写法，主要应用于不同设备的分辨率。

2：平移列

使用offset来进行平移。即平移的列数

<div  class="container"><!--或者container-fluid-->

        <div  class="row">

                     <div  class="col-xs-4">11</div>

                     <div  class="col-xs-4">22</div>

                     <div  class="col-xs-offset-2   col-xs-4">33</div>---指33向右平移了两列

         </div>

           <div  class="row">

                     <div  class="col-md-4">11</div>

                     <div  class="col-md-4  col-md-offset-2">22</div>

                     <div  class="col-md-4">33</div>

         </div> 
         <div class="row">
                <div class="col-md-4">11</div>
                <div class="col-md-4 col-md-offset-2">22</div> 
                <div class="col-md-4">33</div> 
        </div>

</div>

<!-- 平移列-->

效果如下：

33由于平移了两列，不能满足它占4列的要求，于是被挤到下一行开始占据4列。简单来说，相当于将整个div块右移。

3：嵌套列

即在网格列里面再嵌套列。我们对比来看。

<div  class="container"><!--或者container-fluid-->

        <div  class="row">

                   <div  class="col-xs-8">

                         <div  class="col-xs-2">11</div>

                         <div  class="col-xs-4">22</div>

                         <div  class="col-xs-2">33</div>

                    </div>

         </div>

           <div  class="row">

                         <div  class="col-xs-8">11</div>

         </div>

           <div  class="row">

                       <div  class="col-xs-4">11</div>

                         <div  class="col-xs-4">22</div>

                         <div  class="col-xs-4">33</div>

         </div>  
 

</div>

效果如下：



有没有发现问题？为什么上面的没有平均分配8？
原因：我们来看下调试控制台

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {

    min-height: 1px;

    padding-left: 15px;

    padding-right: 15px;

    position: relative;

}

发现padding-left 和padding-right均为15px,这是因为，列与列之间存在padding值得影响，那为什么第二个div没有影响呢？我们来探究一下栅栏格的原理。
1：“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2：通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding
也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
注意：此时row已经把列的padding给抵消了，所以，没有出现padding的值情况。

4：列排序 
   主要是使用col-xs-push-*  col-xs-pull-*(*表示0-11的数字)如何理解这两个类呢？push表示推，pull表示拉。

  <div class="row">

                    <div class="col-xs-4">21</div>

                    <div class="col-xs-8">24</div>

     </div>

       <div class="row">

                    <div class="col-xs-4  col-xs-push-8">21</div>

                    <div class="col-xs-4  col-xs-pull-4">24</div> 

     </div>

效果图如下：

 <div class="col-xs-4  col-xs-push-8">21</div>---记为div1
 <div class="col-xs-8  col-xs-pull-4">24</div>---记为div2  即可理解为交换两者位置，需要将div1向右推8列，div2需要向左拉4列。

三：流式网格布局
   1：列宽使用百分比，而不是像素
   2：将row类换成row-fluid
   3:其它基本功能与上面的固定布局一样，支持响应式。
   4：平分某一个列时，由于流式布局采用的是百分比，所以应该按照6来计算。

 //注意下面这种情况，平分8列时，并不是设置它为两个4，而是两个6，因为bootstrap中是12列栅格分布。

          <div class="row">

             <div class="col-xs-8">

                    <div class="col-xs-6">2</div>

                    <div class="col-xs-6">2</div>

         </div>

     </div>

  下面来看一下流式布局的应用,对比固定布局来看。

<!-- 流式布局-->

<div  class="container">

            <div  class="col-xs-6">333</div>

            <div  class="col-xs-6">444</div>

</div>

<div   class="container-fluid">   ---声明container-fluid类，表明内容是流式布局，作用：作为一个包含块，来包含流式内容

    <div  class="row-fluid">

                   <div  class="col-xs-6  col-md-12">333</div>

                   <div  class="col-xs-6  col-md-12">444</div>

     </div>

</div>

<div  class="row-fluid">     ----没用声明container和container-fluid类，此时为屏幕的宽度

                   <div  class="col-xs-6">333</div>

                   <div  class="col-xs-6">444</div>

</div>

当屏幕小于768px时，效果如下：

当屏幕大于992px时，效果如下：此时独占一行

row-fluid类（非常重要），决定是否是流布局。然后里面的内容块代码编写与网格系统一致，依然是从col-md-1到col-md-12，分别对应于不同的百分比.

四：响应式设计
简单来说就是支持不同设备（手机，PC）的分辨率(960PX,1366PX,978PX等等)进行自适应响应。

   <div class="row">

                    <div class="col-xs-6   col-md-12">21</div>

                    <div class="col-xs-6  col-md-12">24</div> 

      </div>

当设备小于768px时，效果如下：

当设备>=992px时。效果如下：

上面两种类，分别表示的分辨率不一样。col-md-12此时表示每列独占一行即12列。

作者：向婷风

出处：http://www.cnblogs.com/jtjds/p/5547261.html

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者

本人同意 转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。

bootstrap学习总结-css样式设计(一)的更多相关文章

bootstrap学习总结-css样式设计(二)
首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...
Bootstrap学习 - 全局CSS样式
栅格Grid <!-行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中-> <div class="c ...
bootstrap学习总结-css组件(三)
今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs. ...
ReactNative学习之css样式使用
前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...
1+X证书学习日志 —— css样式表
## 因为初级的内容较多,所以选了一些有用的需要记忆的内容写下方便日后回顾 CSS语法选择符{属性:属性值;} ## 所有的css代码都要放在css样式表里面 ...
HTML 学习笔记 CSS样式（简介和语法）
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中是为了解决内容与表现分离的问题外部 ...
HTML 学习笔记 CSS样式（定位）
CSS定位(Positioning)属性允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
HTML 学习笔记 CSS样式（边框）
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式宽度和颜色 CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
HTML 学习笔记 CSS样式（框模型）
CSS框模型( Box Model)规定了元素框处理元素的内容内边距边框和外边距的方式 CSS框模型概述可以用下面的模型图概述

随机推荐

RabbitMQ与AMQP协议详解
1. 消息队列的历史了解一件事情的来龙去脉,将不会对它感到神秘.让我们来看看消息队列(Message Queue)这项技术的发展历史. Message Queue的需求由来已久,80年代最早在金融交 ...
jQuery Devrama Slider 幻灯片
Devrama Slider 是个图像滑块,带有许多非常有趣的特性. 它不仅支持图像还支持 HTML 内容. 响应式方便 CSS3 转换转换效果进度条高级的预加载和延迟加载 CSS 自定义用 ...
RHEL7软件包管理
本文介绍RHEL7的软件包管理 RHEL7下主要有RPM和YUM这两种包管理: YUM使用简单但需要联网,YUM会去网上的YUM包源去获取所需要的软件包并获取该包依赖的其他包 RPM的需要的操作精度比 ...
android 回调函数一：基本概念
1.概念客户程序C调用服务程序S中的某个函数A,然后S又在某个时候反过来调用C中的某个函数B,对于C来说,这个B便叫做回调函数. 一般说来,C不会自己调用B,C提供B的目的就是让S来调用它,而且是C ...
【读书笔记】iOS-KVC
一,KVC即键/值编码. 二,KVC的基本调用包括-valueForKey:和-setValue:forKey:. 三,对于KVC,Cocoa自动放入和取出标量值.也就是说,当使用setValueFo ...
CSS 类选择器(四)
一.类选择器类选择用使用"."(英文点号)进行标识,后面紧跟类名如: .red{color:red;} 类样式可以应用于文档中的多个元素,这体现了CSS代码的可重用性,帮助用户 ...
java网络---流
网络操作很大一部分功能就是输入和输出数据. 简单归纳就是上传和下载文件.文件也是数据的一种载体. java对数据的操作归并为流. 所以对于数据流的操作定义2个基本类. java.io.OutputSt ...
mysql高可用之LVS + KEEPALIVE + MYSQL
1.架构图注意 (一) Mysql需要把bind-address的配置去掉,否则无法实现虚拟ip访问 (二) 关闭所有linux防火墙:/sbin/iptables –F(可能没用) (三) ...
在SQL2008R2查询分析器出错(在执行批处理时出现错误。错误消息为: 目录名称无效。)
在用SQL2008R2查询分析器时 SELECT * FROM 表名; 出错: 在执行批处理时出现错误.错误消息为: 目录名称无效. 原因: 在打开查询分析器时,用360软件清空了临时文件(只是偶尔1 ...
Winpcap
Winpcap网络开发库入门

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

bootstrap学习总结-css样式设计(一)的更多相关文章

随机推荐

热门专题