当前位置:u赢电竞手机版 > u赢电竞竞猜app > [后端人员耍前端系列]Boostrap篇:30分钟快速掌握

[后端人员耍前端系列]Boostrap篇:30分钟快速掌握

文章作者:u赢电竞竞猜app 上传时间:2019-08-28

三、12栅格系统

  Boostrap定义12栅格系统,就是为了更好的布局。每个前端框架都首先要定义好的就是布局系统。在Boostrap里面,就是利用行和列来创建页面布局的。其布局有几个原则:

  • 行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中
  • 每行都包含12列
  • 将内容放置在每列中 

  在boosstrap的栅格系统中,根据宽度将浏览器分为4种。其值分别是:自动(100%)、750px、970px、 1170px。

  对应的样式为超小(xs)、小型(sm)、中型屏幕 (md)、大型 (lg)

  其本就是通过媒体查询定义最小宽度实现。所以,Boostrap做出来的网页向大兼容,向小不兼容!

  在Boostrap框架内,已预先定义好了屏幕大小的分界值,其分界值得定义就是通过媒体查询来定义的。其定义方式如下:

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

  其实Win8应用开发中也应用了媒体查询来实现可响应式的应用。所以大家以后如果听到了可响应系统不要觉得很高深哦,其实就是框架为我们定义了媒体查询,如果超过了媒体查询中定义的最小宽度对应某个类型屏幕,通过这样的方式,就可以在不同屏幕之间收缩元素大小来适应屏幕。然而Boostrap提出的概念是移动设备优先的,所以Boostrap设计出来的页面只能向大兼容,向小不兼容。

七、总结

到此,本文的所有内容就分享结束了,希望通过本文可以让初学者快速理解和掌握Bootstrap。另外本文相当于是Bootstrap要领吧,关于更详细的内容大家可以自行参考Bootstrap中文官网。不过我觉得没不要了,有那样的时间还不如就直接实践起来呢。VS2013的Web应用程序就已经默认支持Bootstrap框架,大家可以看完之前就可以马上通过VS2013来创建一个Web应用程序来体验下Bootstrap在Asp.net MVC 下的应用吧。具体相关教程可以参考:ASP.NET MVC使用Bootstrap系列

在接下来的一篇文章中,我将继续为大家分享前端MVVM框架——AngularJS。

本文所有源码下载:BootstrapSamples。

五、CSS组件

  CSS组件和基础布局组件差不多,也就是Boostrap为一些标签定义了一些已有的样式,这些样式运行的效果都非常美观,这样每个公司或开发人员都不需要再去写一篇样式,从而加快开发效率。这里直接看一个导航的例子吧。说白这个东西,你用多了自然就熟了。

<!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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

  </head>
  <body>
  <h3>导航条</h3>
  <nav class="navbar navbar-default navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        Toggle navigation



      </button>
      <a class="navbar-brand" href="#">Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home (current)</a></li>
        <li><a href="#">About</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown </a>
          <ul class="dropdown-menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
            <li><a href="#">Action 3</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated Action</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://www.pybaoli.com/uploads/allimg/190828/044620E92-0.jpg"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://www.pybaoli.com/uploads/allimg/190828/0446204S1-1.jpg"></script>
  </body>
</html>

   其运行效果:在此运行

  其他组件的运行效果如下:

  分页例子的运行效果:在此运行

  下拉菜单的运行效果:在此运行

  面板的运行效果:在此运行

一、引言

很久没有写过博客了,但是最近这段时间都没有闲着,接触了很多方面。比如一些前端框架和组件、还有移动开发React-Native、以及对.NET框架设计的一些重新认识。这些内容在接下来的时间都会一一和大家分享的。我为什么放置了这么久又重新写博客呢?因为在这段时间里面,我虽然接触了这么多东西,自己也没有停下来学习,但是没有写博文总结的话,总感觉这些东西还不是我的。心里总感觉空荡荡的。今天先介绍了一个前端“样式”框架——Bootstrap。

六、JavaScript插件

  默认情况下,所有的JS插件都可以通过设置特定的HTML代码和相应的属性来实现,而无需写一行JavaScript代码。其实现本质就是Boostrap为这些属性实现了对应的JavaScript代码。

  下面就直接看一个模态窗口的例子:

  

<!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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

  </head>
  <body>
  <h3>模态窗口</h3>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Click me
  </button>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Test body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://www.pybaoli.com/uploads/allimg/190828/044620E92-0.jpg"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://www.pybaoli.com/uploads/allimg/190828/0446204S1-1.jpg"></script>
  </body>
</html>

  其运行效果:在此运行。

  看完前面的所有内容之后,是不是瞬间觉得Boostrap其实只不过是一个样式框架罢了。利用它我们可以快速方便地构建Web页面。另外看完前面的内容,你也就不会困惑为什么Boostrap官方文档为什么是下面这样的吧:

Boostrap官方文档的导航条中的条目不就是我们上面的介绍的几大组成部分嘛。

三、12栅格系统

Bootstrap定义12栅格系统,就是为了更好的布局。每个前端框架都首先要定义好的就是布局系统。在Bootstrap里面,就是利用行和列来创建页面布局的。其布局有几个原则:

  • 行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中
  • 每行都包含12列
  • 将内容放置在每列中

在bootstrap的栅格系统中,根据宽度将浏览器分为4种。其值分别是:自动(100%)、750px、970px、 1170px。

对应的样式为超小(xs)、小型(sm)、中型屏幕 (md)、大型 (lg)

其本就是通过媒体查询定义最小宽度实现。所以,Bootstrap做出来的网页向大兼容,向小不兼容!

在Bootstrap框架内,已预先定义好了屏幕大小的分界值,其分界值得定义就是通过媒体查询来定义的。其定义方式如下:

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

其实Win8应用开发中也应用了媒体查询来实现可响应式的应用。所以大家以后如果听到了可响应系统不要觉得很高深哦,其实就是框架为我们定义了媒体查询,如果超过了媒体查询中定义的最小宽度对应某个类型屏幕,通过这样的方式,就可以在不同屏幕之间收缩元素大小来适应屏幕。然而Bootstrap提出的概念是移动设备优先的,所以Bootstrap设计出来的页面只能向大兼容,向小不兼容。

七、总结

  到此,本文的所有内容就分享结束了,希望通过本文可以让初学者快速理解和掌握Boostrap。另外本文相当于是Boostrap要领吧,关于更详细的内容大家可以自行参考Boostrap中文官网。不过我觉得没不要了,有那样的时间还不如就直接实践起来呢。VS2013的Web应用程序就已经默认支持Boostrap框架,大家可以看完之前就可以马上通过VS2013来创建一个Web应用程序来体验下Boostrap在Asp.net MVC 下的应用吧。具体相关教程可以参考:ASP.NET MVC使用Bootstrap系列

  在接下来的一篇文章中,我将继续为大家分享前端MVVM框架——AngularJS。

  本文所有源码下载:BoostrapSamples。

 

一、引言 很久没有写过博客了,但是最近这段时间都没有闲着,接触了...

网易云课堂,有个BootStrap的免费视频教程,还不错
http://study.163.com/course/introduction/1017002.htm#/courseDetail

四、基础布局组件

  基础布局组件就是Boostrap框架内为一些基础布局的标签定义了一些统一的样式。如Table、按钮、表单等。下面让我们看一个Table的例子:

<!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>Bootstrap 101 Template</title>
    <!--因为这里没有使用到Boostrap的JS插件,所以就没有引用Jquery组件-->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

  </head>
  <body>
  <h3>默认样式的Table</h3>
    <table class="table">
      <caption>表标题.</caption>
      <!-- 表头,组合为t head, t代表table的意思-->
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Tommy</td>
          <td>Li</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Bob</td>
          <td>san</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Sam</td>
          <td>wang</td>
        </tr>
      </tbody>
    </table>

    <h3>带边框的表格</h3>
    <table class="table-bordered">
      <caption>表标题.</caption>
      <!-- 表头,组合为t head, t代表table的意思-->
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Tommy</td>
          <td>Li</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Bob</td>
          <td>san</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Sam</td>
          <td>wang</td>
        </tr>
      </tbody>
    </table>

    <!-- 更多表格样式参考: http://v3.bootcss.com/css/#tables-->
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://www.pybaoli.com/uploads/allimg/190828/044620E92-0.jpg"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://www.pybaoli.com/uploads/allimg/190828/0446204S1-1.jpg"></script>
  </body>
</html>

  具体的运行效果:在此运行。

  对于Button和表单的例子代码这里就不贴了,大家可以通过下面的链接查看运行效果和查看源码。也可以通过最后的下载文件来下载本专题的所有源码。

  Button例子的运行效果:在此运行

  表单例子的运行效果:在此运行

 

转载链接:http://www.cnblogs.com/zhili/p/BoostrapQuickStart.html

本文由u赢电竞手机版发布于u赢电竞竞猜app,转载请注明出处:[后端人员耍前端系列]Boostrap篇:30分钟快速掌握

关键词: 前端学习 前端