如何加盟百度小程序_bootstrap的常用组件和栅格局布局详解

2021-01-12

bootstrap的常用组件和栅格式布局详解       Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,本文介绍了bootstrap的常用组件和栅格式布局详解,有兴趣的可以了解一下

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

因为Bootstrap需要jquery的支持,所以在使用Bootstrap之前要先把jquery插件导入,并且要把bootstrap.js文件放在jquery.js之后改动方可生效。

Bootstrap中有许多好用的组件,只要以规定的class等命名就可以轻松使用这些插件。例如:

导航条:

 nav 
 div 
 !-- Brand and toggle get grouped for better mobile display -- 
 div 
 button type="button" data-toggle="colla凡科抠图e" data-target="#bs-example-navbar-colla凡科抠图e-1" aria-expanded="false" 
 span Toggle navigation /span 
 span /span 
 span /span 
 span /span 
 /button 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Brand /a 
 /div 
 !-- Collect the nav links, forms, and other content for toggling -- 
 div id="bs-example-navbar-colla凡科抠图e-1" 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Link span (current) /span /a /li 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Link /a /li 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" Dropdown span /span /a 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Action /a /li 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Another action /a /li 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Something else here /a /li 
 li role="separator" /li 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Separated link /a /li 
 li role="separator" /li 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" One more separated link /a /li 
 /ul 
 /li 
 /ul 
 form 
 div 
 input type="text" placeholder="Search" 
 /div 
 button type="submit" Submit /button 
 /form 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Link /a /li 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" Dropdown span /span /a 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Action /a /li 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Another action /a /li 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Something else here /a /li 
 li role="separator" /li 
 li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Separated link /a /li 
 /ul 
 /li 
 /ul 
 /div !-- /.navbar-colla凡科抠图e -- 
 /div !-- /.container-fluid -- 
 /nav 

以上述的格式写出需要的代码就可以获得以下样式的导航条:

注:在上述代码中form表单即serch和submit部位,带有 的就是下拉菜单的区域, 的就是下拉菜单的内容区,这些部分并非主要内容,可以删除。通过 可以设置该部位的导航条在总区域的左侧还是右侧。

栅格系统:

栅格系统是bootstrap中最为重要的部分,它通过

 div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 div .col-md-1 /div 
 /div 
 div 
 div .col-md-8 /div 
 div .col-md-4 /div 
 /div 
 div 
 div .col-md-4 /div 
 div .col-md-4 /div 
 div .col-md-4 /div 
 /div 
 div 
 div .col-md-6 /div 
 div .col-md-6 /div 
 /div 

这样的形式来实现网页布局,只要调节 就可以轻松改变单元格区域的排布,

如图:

注:

如上表:由于bootstrap是移动优先的,所以在判定时先从小屏开始,如col-xs-6指的是从width=768开始直到最大都是占6个单位的空间。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



扫描二维码分享到微信

在线咨询
联系电话

400-888-8866