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>


        

  • 相关阅读:
    Java的静态块与实例块(转)
    Programming Ability Test学习 1031. Hello World for U (20)
    Programming Ability Test学习 1011. World Cup Betting (20)
    Programming Ability Test学习 1027. Colors in Mars (20)
    Programming Ability Test学习 1064. Complete Binary Search Tree (30)
    Programming Ability Test学习 1008. Elevator (20)
    【maven详解-生命周期】Maven的生命周期和插件
    【maven详解-插件】maven插件学习之源码插件Source Xref
    $(document).ready(){}、$(fucntion(){})、(function(){})(jQuery)onload()的区别
    你还没真的努力过,就轻易输给了懒惰
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/7259059.html
Copyright © 2011-2022 走看看