您现在的位置是：网站首页> 编程资料编程资料

bootstrap学习心得总结-css样式设计分享_心得技巧_网页制作_

2023-11-10 391人已围观

简介 下面小编就为大家带来一篇bootstrap学习心得总结-css样式设计分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

由于项目需要，所以打算好好学习下bootstrap框架，之前了解一点，框架总体不难，但涉及到的东西还是很多，想要熟练掌握它，还是要多练练。

一：bootstrap是什么？

bs是什么?  即前端页面搭建的标准化框架工具，已经写好了css.js样式，只需要拿来用即可。

怎么用bs呢？主要是通过使用不同的类增加效果，每一种类，对应的功能不同。

bs好处：增加了开发效率，页面设计更加美观,支持响应式开发。

二：css样式设计

1：基于Html文档

bootstrap引用了部分html元素，所以头部需写成下面所示的样列。

JavaScript Code复制内容到剪贴板
  1.    ---包含HTML5文档声明，所有浏览器均开启标准模式   
  2.   
  3.   
  4. "utf-8">   
  5. "X-UA-Compatible" content="IE=edge">   
  6. "viewport" content="width=device-width, initial-scale=1">   
  7.        
  8. Bootstrap   
  9.   
  10. "stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">   
  11.   
  12.   
  13. "stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">   
  14.   
  15.   
  16. "//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">   
  17.   
  18.   
  19. "//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">   
  20.   
  21.   

  22. Hello, world!

      
  23.   
  24.   

2：栅格系统布局

 通过设置行和列来进行内容的布局。bootstrap把页面设置为12列。通过改变列的数字来进行布局，比如设置三个等宽的列：

JavaScript Code复制内容到剪贴板
  1.      
  2. "zh-CN">   
  3.   
  4. "utf-8">   
  5. "X-UA-Compatible" content="IE=edge">   
  6. "viewport" content="width=device-width, initial-scale=1">   
  7.        
  8.   
  9. "css/bootstrap.css" rel="stylesheet">   
  10. "css/bootstrap.min.css" rel="stylesheet">   
  11. "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js">   
  12. "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">   
  13.   
  14.   
  15.   
  16. class="container">   
  17.         class="row">                               -- col-xs-4 : 指小于768px的小设备   
  18.                      class="col-xs-4">11
     -- col-sm-4 ：指>=768px的设备   
  •                      class="col-xs-4">22
    •      -- col-md-4 ：指>=992px设备   
  •                      class="col-xs-4">33
    •      -- col-lg-4 ：值1200px设备   
  •         
    •   
  •           class="row">   
  •                      class="col-md-4">11
    •   
  •                      class="col-md-4">22   
  •                      class="col-md-4">33   
  •             
  •            class="row">   
  •                      class="col-sm-4">11   
  •                      class="col-sm-4">22   
  •                      class="col-sm-4">33   
  •             
  •            class="row">   
  •                      class="col-lg-4">11   
  •                      class="col-lg-4">22   
  •                      class=
    • -六神源码网