程序博客网 > 待机长平板 知乎

了解Bootstrap

来源：互联网 发布：待机长平板 知乎 编辑：程序博客网 时间：2024/06/04 23:19

1.了解Bootstrap:

简洁，直观，强悍的前端开发框架，让web开发更迅速，简单。

2.优点：

快速，简单，灵活的栅格系统，小而强大，响应式布局，跨平台等。

3.下载

登陆BootStrap的官方网站下载：  http://getbootstrap.com/  。


下面使用Bootstrap官方提供的模板来设计一个响应式布局。

（1）从下载的BootStrap中找出bootstrap.min.css文件复制到项目中。

（2）新建一个style.css文件，实现代码如下：

[css] view plain copy
 print?
  1. .row{  
  2.   
  3.     margin-bottom: 20px;  
  4.   
  5.   
  6. }  
  7.   
  8. .row .row{  
  9.   
  10.     margin-top: 10px;  
  11.     margin-bottom: 0px;  
  12.   
  13. }  
  14.   
  15. [class*="col-"]{  
  16.     padding-top: 15px;  
  17.     padding-bottom: 15px;  
  18.     background-color: #eee;  
  19.     background-color: rgba(86,61,124,.15);  
  20.     border: 1px solid #dddddd;  
  21.     border: 1px solid rgba(86, 61, 214,.2);  
  22.   
  23. }  



（3）新建一个HTML文件，实现代码如下，其中的代码都是Bootstrap官网提供的示例代码，可以用起来非常的方便。

[html] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.   
  7.     <link href="bootstrap.min.css" type="text/css" rel="stylesheet">  
  8.     <link href="style.css" type="text/css" rel="stylesheet">  
  9.   
  10. </head>  
  11. <body>  
  12.   
  13. <div class="container">  
  14.   
  15. <!--导航栏-->  
  16.     <nav class="navbar navbar-default">  
  17.         <div class="container-fluid">  
  18.             <!-- Brand and toggle get grouped for better mobile display -->  
  19.             <div class="navbar-header">  
  20.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">  
  21.                     <span class="sr-only">Toggle navigation</span>  
  22.                     <span class="icon-bar"></span>  
  23.                     <span class="icon-bar"></span>  
  24.                     <span class="icon-bar"></span>  
  25.                 </button>  
  26.                 <a class="navbar-brand" href="#">Brand</a>  
  27.             </div>  
  28.   
  29.             <!-- Collect the nav links, forms, and other content for toggling -->  
  30.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  
  31.                 <ul class="nav navbar-nav">  
  32.                     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>  
  33.                     <li><a href="#">Link</a></li>  
  34.                     <li class="dropdown">  
  35.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>  
  36.                         <ul class="dropdown-menu">  
  37.                             <li><a href="#">Action</a></li>  
  38.                             <li><a href="#">Another action</a></li>  
  39.                             <li><a href="#">Something else here</a></li>  
  40.                             <li role="separator" class="divider"></li>  
  41.                             <li><a href="#">Separated link</a></li>  
  42.                             <li role="separator" class="divider"></li>  
  43.                             <li><a href="#">One more separated link</a></li>  
  44.                         </ul>  
  45.                     </li>  
  46.                 </ul>  
  47.                 <form class="navbar-form navbar-left" role="search">  
  48.                     <div class="form-group">  
  49.                         <input type="text" class="form-control" placeholder="Search">  
  50.                     </div>  
  51.                     <button type="submit" class="btn btn-default">Submit</button>  
  52.                 </form>  
  53.                 <ul class="nav navbar-nav navbar-right">  
  54.                     <li><a href="#">Link</a></li>  
  55.                     <li class="dropdown">  
  56.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>  
  57.                         <ul class="dropdown-menu">  
  58.                             <li><a href="#">Action</a></li>  
  59.                             <li><a href="#">Another action</a></li>  
  60.                             <li><a href="#">Something else here</a></li>  
  61.                             <li role="separator" class="divider"></li>  
  62.                             <li><a href="#">Separated link</a></li>  
  63.                         </ul>  
  64.                     </li>  
  65.                 </ul>  
  66.             </div><!-- /.navbar-collapse -->  
  67.         </div><!-- /.container-fluid -->  
  68.     </nav>  
  69.   
  70.   
  71. <!--表格-->  
  72. <div class="row">  
  73.     <div class="col-md-1">.col-md-1</div>  
  74.     <div class="col-md-1">.col-md-1</div>  
  75.     <div class="col-md-1">.col-md-1</div>  
  76.     <div class="col-md-1">.col-md-1</div>  
  77.     <div class="col-md-1">.col-md-1</div>  
  78.     <div class="col-md-1">.col-md-1</div>  
  79.     <div class="col-md-1">.col-md-1</div>  
  80.     <div class="col-md-1">.col-md-1</div>  
  81.     <div class="col-md-1">.col-md-1</div>  
  82.     <div class="col-md-1">.col-md-1</div>  
  83.     <div class="col-md-1">.col-md-1</div>  
  84.     <div class="col-md-1">.col-md-1</div>  
  85. </div>  
  86. <div class="row">  
  87.     <div class="col-md-8">.col-md-8</div>  
  88.     <div class="col-md-4">.col-md-4</div>  
  89. </div>  
  90. <div class="row">  
  91.     <div class="col-md-4">.col-md-4</div>  
  92.     <div class="col-md-4">.col-md-4</div>  
  93.     <div class="col-md-4">.col-md-4</div>  
  94. </div>  
  95. <div class="row">  
  96.     <div class="col-md-6">.col-md-6</div>  
  97.     <div class="col-md-6">.col-md-6</div>  
  98. </div>  
  99.   
  100.   
  101.   
  102. <!--表单-->  
  103.     <form>  
  104.         <div class="form-group">  
  105.             <label for="exampleInputEmail1">Email address</label>  
  106.             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">  
  107.         </div>  
  108.         <div class="form-group">  
  109.             <label for="exampleInputPassword1">Password</label>  
  110.             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">  
  111.         </div>  
  112.         <div class="form-group">  
  113.             <label for="exampleInputFile">File input</label>  
  114.             <input type="file" id="exampleInputFile">  
  115.             <p class="help-block">Example block-level help text here.</p>  
  116.         </div>  
  117.         <div class="checkbox">  
  118.             <label>  
  119.                 <input type="checkbox"> Check me out  
  120.             </label>  
  121.         </div>  
  122.         <button type="submit" class="btn btn-default">Submit</button>  
  123.     </form>  
  124.   
  125. </div>  
  126.   
  127.   
  128.   
  129. </body>  
  130. </html>  

实现效果如下：

。

0 0
待机长平板 知乎 待机长平板 知乎
原创粉丝点击
热门IT博客
李擂 知乎李擂 知乎
淘宝里什么最好卖淘宝里什么最好卖
2016最红的网络歌曲
特效软件手机版
java迷宫收集金币
trustbox软件下载
科讯cms标签
支付宝 数据 迁移 sd卡
姜思达人工智能辩论词
淘宝联盟无法分享微信
网络推广公司简介
手机解锁软件
linux怎么绑定域名
免费网络推广工具
软件著作权的申请
mac常用软件
mac窗口全屏快捷键
制作头像的软件
头发油的巨快 知乎
热仿真软件flotherm
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 作家 桔子树 梦到橘子树 桔子树的作文 子非鱼 桔子树 栽橘子树 金桔树几年结果 橘子树有刺吗 桔子树 吉他 桔子树 流光 金桔树怎么修剪 橘子树别墅旅馆 金桔树怎么种 金桔树的寓意 桔子树 txt 大橘子树 背后有鬼 桔子树 桔子树 种植 橘子树作品 橘子树艺术教育 背后有鬼桔子树 怎样种橘子树 桔子树 架子鼓 桔子树病虫害 袁哲 桔子树 金桔树栽培 金桔树产地 暗夜流星桔子树 暗夜流星 桔子树 橘子树博客 金桔树照片 桔子树作品集下载 桔子树五道口店 桔子树嫁接方法 金桔树寓意 橘子树怎样嫁接 桔子树 博客 橘子树魔术 桔子树的图片 桔子树 作品集 桔子树 袁哲 橘子树的寓意

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里