botstrap引入方式、全局css样式、布局容器、栅格系统、列偏移、列排序、按钮 可作为按钮使用的标签或元素、预定义样式、尺寸、禁用状态、预定义背景颜色、预定义字体颜色

botstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

botstrap引入方式

  

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">
    
    <title>Bootstrap 101 Templatetitle>

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    
    
    
  head>
  <body>
    <h1>你好,世界!h1>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">script>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">script>
  body>
html>

 

全局css样式

布局容器

样式

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

 

栅格系统

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

 

行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

botstrap引入方式、全局css样式、布局容器、栅格系统、列偏移、列排序、按钮 可作为按钮使用的标签或元素、预定义样式、尺寸、禁用状态、预定义背景颜色、预定义字体颜色_第1张图片

 

<div class="container">

  <div class="row">

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

    <div class="col-md-1">.col-md-1div>

  div>

div>

 

 

如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。


列偏移

使用 .col-md-offset-2 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

<div class="container">

    <div class="row">

      <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6div>

     <div class="col-sm-5 col-sm-offset-2 col-md-5 col-md-offset-0" >col-md-offset-0div>

      div>

div>

 

 

 

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)

 

<div class="container">
    <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>
div>

 

 

 

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

<div class="container">

        <div class="row">

            <div class="col-xs-3 col-xs-push-6"><div class="box">box1div>div>

            <div class="col-xs-3"><div class="box">box2div>div>

            <div class="col-xs-3 col-xs-pull-6"><div class="box">box3div>div>

            <div class="col-xs-3"><div class="box">box4div>div>

        div>

    div>

 

 

按钮

可作为按钮使用的标签或元素

为 

你可能感兴趣的:(botstrap引入方式、全局css样式、布局容器、栅格系统、列偏移、列排序、按钮 可作为按钮使用的标签或元素、预定义样式、尺寸、禁用状态、预定义背景颜色、预定义字体颜色)