zoukankan      html  css  js  c++  java
  • bootstrap入门

        bootstrap在后台管理系统中使用较多,先前所做的几个项目也是使用的Bootstrap框架。只是并未系统学习过Bootstrap,最近工作没有那么忙了,于是计划系统地学习一下。先简单分享一下Bootstrap表格。

       使用Bootstrap,首先要在官网下载bootstrap包,提供了多种方式的下载。

    官网地址: http://getbootstrap.com/

        进入官网之后,进入下载页面,第一个是预编译版本号下载,包含css,js,font。第二个是源代码下载。须要自行编译。第三个是Sass版本号,依据自己的须要。自行下载,此处,我们下载的是预编译版本号。由于。临时对less和sass还没有深入学习了解。


            使用bootstrap创建的网页头部须要使用html5的文档类型(Doctype),否则可能会存在浏览器显示不一致的问题。甚至可能面临一些特定情况下的不一致,以至于代码不能通过W3C标准的验证。

    因此请使用例如以下的网页头部:

    	<!DOCTYPE html>
    	<html>
    		....
    	</html>
      bootstrap依赖于Jquery,所以在引入bootstrap.min.js之前,须要先引入jquery.js
    为了让 Bootstrap 开发的站点对移动设备友好,确保适当的绘制和触屏缩放,须要在网页的 head 之中加入 viewport meta 标签:
    <meta name = "viewport" content = "width=device-width,initial-scale=1.0">
        width 属性控制设备的宽度。如果您的站点将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 能够确保它能正确呈如今不同设备上。
    initial-scale=1.0 确保网页载入时,以 1:1 的比例呈现。不会有不论什么的缩放
        
    在移动设备浏览器上,通过为 viewport meta 标签加入 user-scalable=no 能够禁用其缩放(zooming)功能。通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户仅仅能滚动屏幕。就能让您的站点看上去更像原生应用的感觉。

    <meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">


    全局显示

    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.428571429;
      color: #333333;
      background-color: #ffffff;
    }

    第一条规则设置 body 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif

    第二条规则设置文本的默认字体大小为 14 像素。

    第三条规则设置默认的行高度为 1.428571429。

    第四条规则设置默认的文本颜色为 #333333。

    最后一条规则设置默认的背景颜色为白色。

    全局链接样式

    通过属性 @link-color 设置全局链接的颜色。

    下面是链接的默认样式:

    a:hover,
    a:focus {
      color: #2a6496;
      text-decoration: underline;
    }
    
    a:focus {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

    容器(Container)

    <div class="container">
      ...
    </div>
    Bootstrap 3 的 container class 用于包裹页面上的内容。bootstrap.css 文件里的 .container class。
    .container {
       padding-right:15px;
       padding-left:15px;
       margin-right:auto;
       margin-left:auto;}

    通过上面的代码,把 container 的左右外边距(margin-right、margin-left)交由浏览器决定。

    请注意,因为内边距(padding)是固定宽度。默认情况下容器是不可嵌套的

    .container:before,.container:after {
      display: table;
      content:" ";}

    这会产生伪元素。设置 display 为 table。会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌。:after 伪元素清除浮动。

    假设 conteneditable 属性出如今 HTML 中,因为一些 Opera bug。环绕上述元素创建一个空格。这能够通过使用 content: " " 来修复。

    .container:after {
      clear: both;}

    它创建了一个伪元素。并确保了全部的容器包括全部的浮动元素。

    Bootstrap 3 CSS 有一个申请响应的媒体查询,在不同的媒体查询阈值范围内都为 container 设置了max-width。用以匹配网格系统。

    @media(min-width:768px){.container {
          width:750px;}

    引入Bootstrap開始使用Bootstrap。

    关于bootstrap.min.js和bootstrap.js差别仅在于是否压缩,此处我们均引入压缩过会的

    <!doctype html>
    <html lang="en">
    	<head>
    	<!--站点编码格式。UTF-8 国际编码,GBK或 gb2312 中文编码-->
    		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="Keywords" content="关键词一。关键词二">
    		<meta name="Description" content="站点描写叙述内容">
    		<meta name="Author" content="Yvette Lau">
    		<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">		
    		<title>CSSDemo</title>
    		<!--css js 文件的引入-->
    		<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
    		<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    		<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    	</head>
            <body>
            </body>
    </html>


        

  • 相关阅读:
    Javascript笔记01:javascript入门介绍
    css笔记19:浮动的案例
    css笔记17:盒子模型加强版的案例
    css笔记16:盒子模型的入门案例
    css笔记15:盒子模型
    css笔记14:css文件之间可以相互引用
    HDU 1203 I NEED A OFFER!
    HDU 2955 Robberies
    HDU 2602 Bone Collector
    HDU 2546 饭卡
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/7259059.html
Copyright © 2011-2022 走看看