bootstrap css模式学习

最新推荐文章于 2022-03-11 13:16:52 发布
最新推荐文章于 2022-03-11 13:16:52 发布
阅读量2k 收藏
点赞数
分类专栏： WEB 文章标签： bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengy35/article/details/11493505
版权
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>


<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>
<div class="table-responsive">
<table class="table table-hover">
  <tr>
   <td>chengyang</td>
    <td>yang</td>
    <td>cols</td>
    <td>cols</td>
     <td>yang</td>
    <td>cols</td>
    <td>cols</td>
  </tr>
   <tr>
    <td>chengyang</td>
    <td>yang</td>
    <td>cols</td>
    <td>cols</td>
    <td>yang</td>
    <td>cols</td>
    <td>cols</td>
    
  </tr>
   <tr>
    <td>chengyang</td>
    <td>yang</td>
    <td>cols</td>
    <td>cols</td>
   
    
  </tr>


</table>
</div>
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>




<textarea class="form-control" rows="3"></textarea>


<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>


<button type="button" class="btn btn-primary btn-lg btn-block ">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
 
 <button type="button" class="btn btn-lg btn-primary">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>


<button type="button" class="close" aria-hidden="true">&times;</button>


  </body>
</html>
BoBoAn_DouYa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap CSS入门初步学习---排版
qq_46304554的博客
11-21 363
1.各种标题的显示： 其实大部分标签跟web中HTML标签一样，只不过其Bootstrap为这些标签自带了一些属性，让其更加美观，符合我们大部分平时所见的页面布局。 下面是代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap CSS排版学习</title> <link rel="stylesheet" href="boots
Bootstrap CSS
武林半侠的博客
05-28 1729
Bootstrap CSS 学习的是Bootstrap第3版.   1 Bootstrap 介绍  1.1 Bootstrap 概述 Bootstrap 是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。 --Bootstrap包含了写好的.css 和.js 文件，只要引用这些文件，并在HTML中为元素添加
响应式布局（一）——bootstrap栅格系统
weixin_30606669的博客
11-28 278
bootstrap根据不同屏幕尺寸，选择不同的栅格选项。一共有四种栅格选项，超小屏（手机）、小屏（平板）、中屏（桌面）、大屏（超大桌面）。栅格系统分为12列，即每行最多可容纳12列。若<HTML>里，一个.row内包含的列（column）大于12个（即，一行中的栅格单元超过12个单元），则会自动排版，总之，一行只能最多12列，具体分析往后阅读。 一、 栅格系统的使用...
Bootstrap简单学习
小王的博客
03-11 778
目录一、Bootstrap简介二、响应式布局三、CSS样式和JS插件四、事件监听机制 一、Bootstrap简介 1.1、概念：一个前端开发的框架 框架：一个半成品软件，开发人员可以在框架基础上，在进行开发，简化代码。 好处： 1、定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插得到丰富的页面效果。 2、响应式布局：同一套页面可以兼容不同分辨率的设备。 1.2、快速入门 1、下载Bootstrap 2、在项目中将这三个文件夹复制 3、创建html页面，引入必要的资源文件 二、响应式布局
Bootstrap学习笔记之css样式设计(2)
09-02
在本篇Bootstrap学习笔记中，我们将深入探讨CSS样式设计，特别是关于Bootstrap框架中表单的样式设计。Bootstrap是一个流行的前端开发框架，它提供了一系列预先定义的CSS类，可以帮助开发者快速构建响应式和易于使用...
bootstrap基础知识学习笔记
09-01
<link rel="stylesheet" type="text/css" href="js-lib/bootstrap/css/bootstrap.css" /> <!-- Bootstrap Theme CSS --> <link rel="stylesheet" type="text/css" href="js-lib/bootstrap/css/bootstrap-theme.css" ...
个性css3三角形设计师案例bootstrap模板
最新发布
04-10
6. **CSS3 Flexbox**：一种新的布局模式，能轻松实现弹性盒模型，适应不同屏幕尺寸，解决传统布局的难题。 7. **CSS3 Grid布局**：提供二维网格布局系统，适用于创建复杂的网页布局，尤其适用于响应式设计。 【HTML...
BootStrap入门学习第一篇
08-29
BootStrap 入门学习第一篇 BootStrap 是一个广泛使用的前端框架，可以帮助开发者快速构建响应式的 Web 应用程序。下面是 BootStrap 入门学习第一篇的知识点总结： 环境搭建 在开始学习 BootStrap 之前，需要先...
Bootstrap零基础学习第一课之模板
09-02
在本篇【Bootstrap零基础学习第一课之模板】中，我们将深入探讨Bootstrap这一流行的前端开发框架，特别是针对初学者的基础知识。Bootstrap是一个基于HTML、CSS和JavaScript的工具包，旨在帮助开发者快速创建响应式和...
html 中<br>和<br/>
chengyangyy的专栏
09-20 2258
answer from stackflow:      Simply is sufficient.     The other forms are there for compatibility with XHTML; to make it possible to write the same code as XHTML, and have it also work as HTML. Som
html 动态显示本地时间
chengyangyy的专栏
09-18 2028
function aaa() { document.getElementById("a").innerHTML = Date(); } setInterval("aaa()",1000); 不知道setInterval 是什么意思，所以百度了下。 发现是这个意思： setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
PHP remember me
chengyangyy的专栏
09-21 1854
首先是remember.php，这个略复杂一点点，php混合html真是个强大的工具 name :'/> passwd :'/> <?php if($_COOKIE['remember'] == 1) { ?> <?php } else { //看来还是要加{}在else里，不然会出错. ?>
PHP对字符串的处理
chengyangyy的专栏
09-20 1033
1：字符串的表示： 在超链接中的设置： 其中$Myemail = "qq.com"这样的话，才不会错，因为一对双引号里面的是字符串内容。程序只看两个相邻的“”之间的内容。 内容补充：可以用 \  来转义序列。 2：连接字符串 . 3:在比较两个字符串时不用区分大小写的函数： $result =  strcasecmp($str1, $str2); strcmp()是比较字符大小的
引用CSS文件到html网页里方法
chengyangyy的专栏
09-09 987
直接在内部引用说直接在html标签元素内嵌入css样式，如这一种。 在style中引用。在html头部head部分内style声明插入使用@import引用外部CSS文件方法 使用link来调用外部的css文件 在head放置来调用外部的wcss.css文件来实现html引用css文件 使用link来引用外部的css的优势 1、有利于SEO，使用此方法引用外部css文件，将使得html页
php __autoload()函数与require 和include() 函数的介绍
chengyangyy的专栏
09-18 878
spl_autoload_register spl_autoload_register — 注册__autoload()函数 说明 bool spl_autoload_register ([ callback $autoload_function ] ) 将函数注册到SPL __autoload函数栈中。如果该栈中的函数尚未激活，则激活它们。 如果在你的程
php正则表达式学习
chengyangyy的专栏
09-21 844
//在php中使用正则表达式 // $str = "HBabcd HBx"; // echo ereg('HB[a-zA-Z]',$str);//返回的结果是1 //posix 正则表达式用的是[],特殊字符如下所示： //今天来讲讲POSIX表达式，下面是我列出的几个重要知识点。 // （1）定界符"^"和"$"分别表示开始和结束。注意，"^"一旦用上[]表示取非的匹配。
PHP的异常捕获
chengyangyy的专栏
09-21 836
function check($value='2') { try { if($value>0)  throw new Exception("wrong value"); // 第二个参数是干什么用的,叫做error code ,可以映射错误标识符， //如果没有catch 会出现下面的错误： /*Fatal error: Uncaught exception 'Exception
一个像样的计算器
chengyangyy的专栏
09-20 756
想了几天用各种语言编写出一个计算器，今天下午终于在图书馆实现了一下。虽然浪费了一个下午，但是觉得还是值得的. 实现的界面如图所示： 附上原码，大家可以指正一下错误.... var operator = 0; var pressoperator = false; var first; var second; var flag=0; var finish= true; v
Bootstrap前端框架学习详解
8. **BootstrapCSS概览**： - **HTML5文档类型**：`<!DOCTYPE html>`确保浏览器以标准模式渲染页面。 - **移动设备优先**：Bootstrap设计时考虑了小屏幕设备，然后逐步增强到大屏幕。 - **响应式图像**：使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值